Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Cambiar imagen al pasar el cursor o mouse por encima

Una imagen que es sustituida por otra al pasar el cursor sobre ella aporta elegancia al blog y a su vez, atrae a los lectores. Sólo necesitas dos imágenes para realizar el truco y un sólo código, sin script alguno.

Seguidamente puedes ver un ejemplo, pasa el cursor sobre la imagen para que cambie:



Para instalarlo, bastará con incluir este código en el cuerpo de una entrada o en un gadget HTML-Javascript:

<img src="URL PRIMERA IMG" onmouseover="this.src='URL SEGUNDA IMG';" onmouseout="this.src='URL PRIMERA IMG';"/>

Reemplaza las líneas resaltadas en color naranja por la dirección de la imagen que aparecerá por defecto y las de color verde por la URL de la imagen que se mostrará al pasar el cursor por encima.

Ten en cuenta que al implementarlo en una entrada tendrás que hacerlo en el modo 'Edición de HTML' y no en 'Redactar'.



Con esto podrás mostrar en tu blog imágenes que muestren los cambios de algo en particular, crear un menú de navegación con iconos personalizados o añadir una descripción a tu fotografía favorita.

Ten muy en cuenta el tamaño de las imágenes pues cuanto más parecido sea mejor resultado obtendrás.

Nota:
Para no estar copiando el mismo código cada vez que desees utilizar el efecto, haz uso de la plantilla de entrada que ofrece blogger.

Anónimo dice...

Que gran ayuda es esto!! Gracias.

SaraL dice...

Jaime, lo explicas tan bien que pude ponerlo en mi blog. Hacia tiempo que buscaba esto porque queria poner un menu de navegacion con mis propias fotitos.

Saludos!

Roger dice...

Muy útil, lo tendré en cuenta. Bonitas las fotos del ejemplo.

Anónimo dice...

no me pasa las fotos, solo aparece la foto q e puesto en la url 1
:S

Jaime Trujillo Escobedo dice...

Me alegra que te sea de utilidad, Anónimo.

Jaime Trujillo Escobedo dice...

Seguro que obtuviste un resultado precioso, SaraL. Gracias por tu comentario.

Jaime Trujillo Escobedo dice...

¡Gracias Roger! El truco es práctico e interesante por lo que apuntarlo es buena idea.

Jaime Trujillo Escobedo dice...

Anónimo, podría deberse al tamaño de las imágenes. Evita las de gran peso e intenta que tengan un tamaño reducido. Ten en cuenta que el efecto no se produce de inmediato como en el ejemplo, tendrás que dejar el cursor al menos durante dos segundos.

PeliculasTube dice...

muy buen truco, simple y efectivo

PeliculasTube dice...

una cosa y como se pondria para que al dar click sea un link?

Blogs Cristianos dice...

¿Funciona con internet explorer?

Jaime Trujillo Escobedo dice...

PeliculasTube, revisa esta entrada pues en ella se comenta el atributo necesario para crear un enlace. Tan solo tendrás que reemplazar TITULO DEL LINK por el código de la imagen.

Jaime Trujillo Escobedo dice...

Por supuesto que funciona en Internet Explorer, Blogs Cristianos.

PeliculasTube dice...

Gracias Jaime funciono.

Anónimo dice...

bn buen aporte gracias men me sasco de dudas y me ayuda arto

Anónimo dice...

Gracias men.
Hace rato estaba buacando esto y lo encontre, pero como estaba mal explicado no me salio pero ahora si ;)

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo