Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Rollover con javascript


Aprende a hacer un efecto de iluminación sobre una imagen al pasar el ratón por encima. Desde un punto de vista práctico, en unos minutos serás capaz de hacerlo tu mismo.


01/1/70 -
Ejemplo de rollover
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!

En este archivo zip puedes encontrar el código y las imágenes del ejemplo de arriba.
.ziprollover.zip 16Kb

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 4 categorias relacionadas
+ 1 comentario (Añadir)

 Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Taller de Javascript

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Colecciones de scripts
+ Entrar en DHTML
+ Entrar en Scripts en Javascript
+ Entrar en Scripts DHTML


 Comentarios de los visitantes
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
Se muestra un comentario revisado

 Comentario de Mary De Nóbrega
27/10/06 
Una forma más sencilla de hacer el rollover es: <img src="imagen.gif" onmouseover="this.src='imagen2.gif'" onmouseout="this.src='imagen.gif'">

Con el mouse encima se verá la imagen2, cuando lo quitas queda la imagen inicial.


Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Taller de Javascript
Categorías
+Colecciones de scripts
+DHTML
+Scripts en Javascript
+Scripts DHTML

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia