Rollover: otra forma de conseguir este efecto

Lo que conocemos como rollover o imagen de sustitución es un efecto muy conocido en donde una imagen existente en la página web es sustituida por otro cuando el puntero del ratón se posa sobre ella, restituyéndose cuando quitamos el puntero de ella.

La técnica que siempre hemos aplicado es tan simple como cambiar el atributo src de la etiqueta img, pero aunque sencilla, no es una técnica del todo efectiva, ya que si la imagen no se encuentra en memoria no llega a mostrarse.

Solución: precarga... ¿o no?...

Usando una precarga eficiente debería conseguirse el objetivo, pero ¿se consigue en realidad? Por mi experiencia en los foros del web puedo afirmar que una precarga no es una solución definitiva.

Bien, ya que hemos mencionado el efecto rollover y la precarga de imágenes, voy a mostrar como se implementa en una página web:

Efecto rollover en una etiqueta img con sustitución:
<img src="imagen1.gif" 
	onmouseover="this.src = 'imagen2.gif'" 
	onmouseout="this.src = 'imagen1.gif'" 
	alt="rollover"
/>

No he puesto los atributos de dimensión de la imagen, pero es aconsejable usarlos siempre (aunque creo que es mejor poner esas dimensiones con estilos)

//Precarga de las imagenes que vamos a usar
function precarga() {
	img1 = new Image();
	img1.src = "imagen1.gif";
	img2 = new Image();
	img2.src = "imagen2.gif";
}

De más está decir que la función precarga hay que ejecutarla al cargar la página. Si se quisiera hacer una precarga más sofisticada, podrían encontrar muchos mensajes que hablan de ello en los foros citados, pero voy a recomendar uno que permite un control de las imágenes cargadas. Precarga con barra de progreso

Rollover sin serlo

Llegó el momento de explicar este nuevo método. Supongamos que tenemos una imagen en la página y ponemos otra encima... ¿Qué pasaría?

Sencillamente solo se vería la imagen superior y la inferior no, aunque ahí está...

¿y entonces...?

Entonces el efecto rollover se consigue ocultando la imagen superior con el evento del ratón mouseover, y volviéndola a mostrar con el evento mouseout...

... Un momento que me he perdido... Si ocultamos la imagen, también "ocultamos" su código... y entre tanto ocultismo, ocultamos también el evento.

Pues sí, pero dejamos visible otra imagen con sus propias características, entre ellas, sus eventos.

Para evitar más confusión, pondré el código para obtener este efecto:

Efecto rollover en una etiqueta img sin sustitución:

<div style="width: 120px; height: 80px; position: relative" />
<img src="imagen2.gif" 
	onmouseout="document.images.rollover.style.visibility = 'visible'" 
	alt="rollover" 
	style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"
/>

<img src="imagen1.gif" name="rollover" id="rollover"
	onmouseover="this.style.visibility = 'hidden" 
	alt="rollover" 
	style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"
/>
</div>

Se puede apreciar que es algo más complejo el sistema sin sustitución ni precarga, aunque se mejora el efecto ya que no debe recargarse la imagen porque nunca se sustituye.


Ejemplos

Ejemplo con sustitución

rollover

Ejemplo sin sustitución

rollover rollover

Conclusiones

Tal vez no sea muy apreciable la diferencia entre un sistema y otro, sobre todo con pocas imágenes y de poco peso, aunque creo que saber que existe una alternativa en la implementación del efecto es una buena razón para probarlo.




Comentarios

Nombre: Sergio
E-Mail: sergio.streetsoul@gmail.com
Fecha de envío: 1 de octubre de 2012, a las 02:25.
comentario:

hola

quisiera saber si se podría hacer algo parecido pero con varias imagenes, como una especia de preview.

Gracias!!


Nombre: musita
Procedencia: ^^
E-Mail: veronica_as_2100@hotmail.com
Fecha de envío: 8 de julio de 2010, a las 23:41.
comentario:

muy buebo


Nombre: joaquin
Procedencia: andalucia
E-Mail: tabam2009@hotmail.com
Fecha de envío: 2 de julio de 2010, a las 02:52.
comentario:

fasinante!!!!!


Nombre: Alfonso Rosas
Procedencia: Texcoco, estado de Mexico.... Mexico :D
E-Mail: vortex0985@gmail.com
Fecha de envío: 11 de junio de 2009, a las 22:00.
comentario:

Interesante :D Aqui en el trabajo uso mucho javascript pero nunca dejan de sorprenderme con maneras tan imaginativas de su uso.

Y Caricatos... siempre un buen tutor :D Gracias.


Fecha de envío: 20 de mayo de 2009, a las 20:09.
comentario:

gracias.. buen aporte


Nombre: ricardo
Procedencia: madrid
E-Mail: todojuegosgratis.es@gmail.com
URL: http://www.todojuegosgratis.es
Fecha de envío: 22 de octubre de 2007, a las 21:35.
comentario:

Es mejor hacer la sustitucion en un archivo de funcion aparte para muchas imagenes, porque ademas se puede hacer compatible con firefox y netscape ya que el 'hidden' no se usa igual en ambos navegadores y asi la web es mas estandar. Nosotros en nuestra web lo tenemos hecho asi y va muy bien en todos los navegadores que hemos probado.

ej:
&lt;script type="text/javascript" language="javascript1.2"&gt;

var gotlayers=1;

NS4 = (document.layers) ? 1 : 0;
IE4 = (document.getElementById) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;

function popUp(menuName,on) {
if (gotlayers) {
if (on) {
if (NS4) {
if(document.layers[menuName]!=null){
document.layers[menuName].visibility = "show";
}
} else {
if(document.getElementById(menuName)!=null){ document.getElementById(menuName).style.visibility = "visible";
}
}
} else {
if (NS4) {
if(document.layers[menuName]!=null){document.layers[menuName].visibility = "hide";}
} else {
if(document.getElementById(menuName)!=null){document.getElementById(menuName).style.visibility = "hidden";}
}
}
}
ese seria el archivo de funcion
luego a cada imagen se le da un zindex que puede ser auto y una clase que es la que hara popup de su foto
espero que os sirva para algo, un saludo


Nombre: Alberto
Procedencia: España
Fecha de envío: 19 de junio de 2007, a las 19:32.
comentario:

El método de rollover sin sustitución es interesante, aunque me gustaría conocer un detalle: ¿el código es de uso libre?


Colabore enviando su comentario

Nombre
Procedencia
Página web
E-mail *
Evaluación evaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluar
Código de envío

Rellene este campo con la clave de la imagen: codigo de envío

Nota Importante

El campo E-Mail es obligatorio para activar por correo electrónico el comentario (si no desea que se haga público, marque la casilla "anonimato"). También es obligatorio el código "captcha" (el número que se ve en la imagen adjunta); y por supuesto, debe existir un comentario.

Puede encontrar información sobre este sistema de comentarios en este enlace: Ponga comentarios en su web.

Edición negrita cursiva subrayado   alineación izquierda alineación derecha alineación centrada alineación justificada   Insertar enlace insertar imagen   Emoticones: [:)] [:(] [:x] [BIEN] [MAL] [SI] [NO] [APLAUSOS] [MEJORABLE] [¡A VER!] [¡DÉJAME PENSAR!] [FLIPE] [¡SIN PALABRAS!]
Copyright © 2006-2018 www.caricatos.net
Visitas: 58173