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)"> * * @version 2005-03-18 */ function rollover(imagen, resaltar) { 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> * * @version 2005-03-18 */ function rollover(enlace, resaltar) { 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 miércoles 12 de agosto de 2026 (13:52:39 +0200) desde https://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.

Lorem ipsum dolor sit amet.

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>