borrame.com - Colección particular de recortes de código y documentación para programación web

Canales RSS

Lo más fresco

  1. Bookmarklets Nuevo
  2. Recetario básico para CakePHP/2 Nuevo
  3. Certificado auto-firmado Nuevo

Sugerencias del chef

Lo más visitado

  1. Fecha y hora
  2. Dar formato a un número
  3. Reiniciar secuencia
  4. Vaciar un esquema
  5. Certificado auto-firmado
Compartir esta página

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 sábado 23 de septiembre de 2017 (02:23:28 +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í).

© 2005-2017 by Álvaro González (alvaro.es) • Burgos (España) • borrame.com