Hay varios códigos que me han ahorrado trabajo muchas veces, el que comparto en esta ocasión me sirvió para hacer que un efecto sobre un ícono, ustedes lo pueden hacer con cualquier imagen.

Para lograr el efecto utilice Adobe Fireworks y una imagen, se le puede cambiar los niveles de opacidad o bien el color, esto con el fin de lograr un efecto que al pasar el puntero del ratón se vea distinto.

A la antigua:

En: <a href=”http://soundcloud.com/ “> insertamos el link al cual nos va a llevar la imagen al hacer clic sobre ella.

En lo resaltado en color rojo insertamos la dirección url de la imagen a la cual se le cambio el color o el nivel de opacidad.

Y en lo resaltado en color azul se inserta la dirección url de la imagen normal, a la que no se le hizo cambio alguno

<a href=”http://soundcloud.com/ “><img title=”this” onmouseover=”this.src=’http://rebeccaaldama.com/wp-content/uploads/2013/09/Soundcloud-Logo-over.png‘;” onmouseout=”this.src=’http://rebeccaaldama.com/wp-content/uploads/2013/09/Soundcloud-Logo-psd47614.png” />

 

Existen otras maneras de hacerlo, como por ejemplo, éste ahorra mucho más tiempo:

<a href=”http://soundcloud.com/ “><img style=”opacity: 0.2; filter:alpha(opacity=20);” src=”http://rebeccaaldama.com/wp-content/uploads/2013/09/Soundcloud-Logo-psd47614.png ” onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=’100′;” onmouseout=”this.style.opacity=0.2;this.filters.alpha.opacity=’20’;”/>

<a href=”http://soundcloud.com/ “><img src=” http://rebeccaaldama.com/wp-content/uploads/2013/09/Soundcloud-Logo-psd47614.png ” onmouseout=”this.style.opacity=1;this.filters.alpha.opacity=’100′;” onmouseover=”this.style.opacity=0.2;this.filters.alpha.opacity=’20’;”/>

Voilá!

# # # # # # # # #

septiembre 13, 2013

Deja un comentario