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 jueves 29 de julio de 2010 (21:26:27 +0200) desde http://borrame.com/recortes/javascript/rollovers.html. La última vez que miré contenía HTML válido con CSS fresquito y si tiene flatas de ortografía ha sido sin querer.

borrame.com es el sitio anteriormente conocido como bits.demogracia.com (no confundir con Demogracia, que sólo pasaba por ahí).

Lo más fresco

Sugerencias del chef

Lo más visitado

Menú del día

Rollovers

Requisitos

Versión para etiquetas <img>

Versión para etiquetas <a>