Hacer que cambie una imagen al pasar el ratón por encima, como invitando a pulsar le llamamos rollover. Es uno de los efectos más vistosos que podemos incluir en una página web con unas pocas líneas de Javascript, y sin necesida de saber programar.
Vamos a ver la técnica por la
práctica y con una elemental receta:
1. Nombramos la imagen:
Ponemos en la página la imagen que tiene el dibujo apagado. Además le asignamos un nombre, para poder referirnos a ella mediante JavaScript.
<img src="dibujo_apagado.gif" name="imagen1">
| 2. Ponemos un enlace en la imagen |
Ahora ponemos el enlace al que queremos navegar en el momento en el que el usuario pinche en el.
<a href="ir_a.html">
3. Empezamos con JavaScript
Debemos colocar dos atributos HTML al enlace que nos van a servir para realizar el efecto buscado.
OnMouseOver , col él indicaremos, mediante JavaScirpt, la acción a realizar cuando se pose el ratón encima de la imagen.
OnMouseOut nos sirve para definir el evento de retirar el ratón de la imagen,
<a href="ir_a.html" onmouseover="-Código JavaScript-" onmouseout="-Código JavaScript-">
4. Tomamos las imágenes con JavaScript
Vamos a declarar dos variables con JavaScript para guardar las imágenes iluminada y apagada. Para ello vamos a utilizar la etiqueta <SCRIPT> de HTML. El script lo podemos colocar en cualquier sitio, pero sería adecuado colocarlo antes de la imagen.
Los números que vereis corresponden con la anchura y la altura de la imagen que estais tomando.
<script language=javascript>
iluminada = new Image(84,34)
iluminada.src = "dibujo_iluminado.gif"
apagada = new Image(84,34)
apagada.src = "dibujo_apagado.gif"
</script>
5. Escribimos el código de los eventos:
Para acceder a un elemento de JavaScript utilizamos la jerarquía de objetos de JavaScript. Puede ser complicada, pero nuestro objetivo es simple, así lo haremos:
window.document['nombre_de_la_imagen'].src = variable_imagen_javascript.src
En concreto, los atributos HTML de los eventos
onmouseover y
onmouseout quedrán así:
onmouseover="window.document['imagen1'].src= iluminada.src
onmouseout="window.document['imagen1'].src = apagada.src
5. Este es el codigo completo
<script language=javascript>
iluminada = new Image(84,34)
iluminada.src = "dibujoiluminado.gif"
apagada = new Image(84,34)
apagada.src = "dibujoapagado.gif"
</script>
<a href="ir_a.html"
onmouseover=" window.document['imagen1'].src = iluminada.src "
onmouseout=" window.document['imagen1'].src = apagada.src" >
<img src="images/eugimlogo.gif" border=0 name="imagen1" width=84 height=34>
</a>
Esto es lo único que debes hacer para iluminar una imagen, es un primer paso, ahora puedes probar con un grupo de imagenes para crear una barra de navegación dinámica con Javascript !
http://www.desadolloweb.com
Usuarios que han visto este tema también han visto...
- Marcar todos los checkboxes con JavaScript
- Detectar el bloqueo de mayúsculas
- Efecto de transición FadeIn en imágenes con JavaScript
- JQuery: expandir y colapsar un div
- Cambiar Estilos CSS o JavaScript
- Versión imprimible de este documento
- Enviar por e-mail este documento
