Demogracia Bits

• • • Colección privada de recortes de código y documentación para programación web

[Sí, aún estamos en pruebas; ¿por?]

Rollovers

El palabro rollover hace referencia al efecto visual que se produce al situar el ratón sobre un objeto. A mí me gustan porque creo que ayudan a afinar la puntería.

Requisitos

Al crear las imágenes debe usarse la siguiente notación: foo.png para el estado normal, foo_h.png para el estado activo.

Versión para etiquetas <img>

/*
 * <img onmouseover="rollover(this, true)" onmouseout="rollover(this)">
 */
function rollover(imagen, resaltar){ // v2005-03-18
    if(resaltar){
        imagen.src=imagen.src.replace(/_h\.(png|gif|jpg)$/, '.$1');
        imagen.src=imagen.src.replace(/\.(png|gif|jpg)$/, '_h.$1');
    }else{
        imagen.src=imagen.src.replace(/_h\.(png|gif|jpg)$/, '.$1');
    }
}

Versión para etiquetas <a>

/*
 * <a onmouseover="rollover(this, true)" onmouseout="rollover(this)"><img></a>
 */
function rollover(enlace, resaltar){ // v2005-03-18
    var imagen=enlace.firstChild;

    if(resaltar){
        imagen.src=imagen.src.replace(/_h\.(png|gif|jpg)$/, '.$1');
        imagen.src=imagen.src.replace(/\.(png|gif|jpg)$/, '_h.$1');
    }else{
        imagen.src=imagen.src.replace(/_h\.(png|gif|jpg)$/, '.$1');
    }
}

Recomendamos efectuar precarga de las imágenes *_h.*.

Esta página ha sido impresa el domingo 6 de julio de 2008 (22:53:58 +0200) desde http://bits.demogracia.com/recortes/javascript/rollovers.html, contenía HTML válido con CSS fresquito la última vez que lo miré y no debería tener flatas de ortografía.

Demogracia Bits no tiene absolutamente ninguna relación con Demogracia, salvo el nombre, el dominio punto com y que el autor es el mismo.

© 2005-2008 by Álvaro G. Vicario (alvaro.es) ¤ Burgos (España) ¤ http://bits.demogracia.com/