Para los fotobloggers es un recurso muy chulo que nos servirá para mostrar, por ejemplo, el antes y el después de una fotografía tras haberle aplicado alguna técnica o efecto ya que de esta forma los cambios se apreciarán mucho mejor.
1. Nos situamos en nuestra plantilla y justo antes del </head> añadimos el siguiente script:
<script language=”JavaScript” type=”text/javascript”>
imagenOn = new Image(300,300);
imagenOn.src = “images/avatar2.gif”;
</script>
Guardamos los cambios.
2. Subimos las imágenes a nuestro servidor de costumbre y tenemos preparadas las URL de cada una de ellas para el siguiente paso.
3. Nos vamos a editar la entrada donde desamos crear nuestra imagen con efecto rollover.
Copiamos y pegamos lo siguiente:
<a href= “#” onclick=”returnfalse;” onmouseover=”document.ejemplo.src=’url-imagen-antes’;” onmouseout=”document.ejemplo.src=’url-imagen-despues’;”>
<IMG name=”ejemplo” src=”url-imagen-1ª” alt = “ejemplo de rollover”width=”300″ height=”300″ border= “0″>
</a>
Si queremos enlazar la imagen con alguna URL solamente tendremos que sustituir el signo # por la url a enlazar.
Este es el resultado que conseguiremos:
<a href=”http://www.flickr.com/photos/10066932@N03/2272165789/” onclick=”returnfalse;” onmouseover=”document.ejemplo.src=’http://ericmartin.es.googlepages.com/Oscurecer-retratos-antes.jpg’;” onmouseout=”document.ejemplo.src=’http://ericmartin.es.googlepages.com/Oscurecer-retratos-despues.jpg’;”><img name=”ejemplo” src=”http://ericmartin.es.googlepages.com/Oscurecer-retratos-despues.jpg” alt=”Antes” /></a>
También te puede interesar ...
6 Responses to “ROLLOVER. Imagen que cambia al pasar el cursor”
SOS, no lo he podido introducir en mi plantilla, me da el mensaje siguiente:
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Open quote is expected for attribute “{1}” associated with an element type “language”.
Ya lo he probado y funciona perfectamente! Mira que mala he sido, cuando lo vea me mata!
http://elsombrerodepensar.blogspot.com/2008/05/prueba.html
Muchas gracias! Gracias a esto voy a ser una mujer muy mala… ji ji ji
Gracias Mariluz.
En cuanto a tus dudas con la plantilla y el menú que quieres hacer, dame unos días para que tenga algo de tiempo y pueda responder a tus peticiones, no te preocupes que te ayudo, ya lo sabes, en todo lo que necesites.
Saludos,
Eric.
Muy bueno, Eric, gracias por la información, para los que no tenemos ni idea de esto, nos viene muy bien.
Por cierto, a ver cuándo haces una entrada sobre cómo colocar un menú en forma de pestañas en la parte de arriba del blog. A mí me gustaría dejar todo el ancho de la plantilla para poner la foto más grande, y lo que tengo en la columna de la derecha incluirlo dentro de pestañas: perfil, enlaces, etiquetas, equipo, etc.
Pero como no tengo ni idea……
Es una herramienta muy interesante sobre todo para eso, para ver el antes y el después. Lástima que yo en Shutterchance no se como poderlo utilizar al no tener el control de la web.
Vi un tutorial en el blog de Ramón Portillo y veo que él ultimamente lo está aplicando a sus imágenes con un resultado muy vistoso!