Ejemplo sin sustitución
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.
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
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.
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.