Comunidad de diseño web y desarrollo en internet

Efecto simple de rollover con JavaScript

Es fácil hacer un rollOver de imágenes con javascript (sí, ya sé que se puede hacer con CSS) usando el elemento getElementById para que funcione en cualquier navegador, veamos...

Primero, colocamos una imagen cualquiera y le asignamos un id

Código :

<img src="una_imagen.png" id="imagen_id" />


Luego creamos dos funciones javascript, una para el rollover y otra para el rollout

Código :

<script language="javascript">
   function cAmbiaOver(imagen)
   {
      case "imgx1": document.getElementById(imagen).src="una_imagen_con_rollover.png";      
   }
   
   function cAmbiaOut(imagen)
   {
      case "imgx2": document.getElementById(imagen).src="una_imagen.png";
   }
</script>


A nuestra imagen, le añademos los atributos onmouseover y onmouseout

Código :

<img src="una_imagen.png" align="left" id="imagen_id" class="imagen_1" onmouseover="javascript:cAmbiaOver(this.id);" onmouseout="javascript:cAmbiaOut(this.id);" />


Observese que pasamos this.id como paramétro de la función, haciendo referencia al id de nuestra imagen. Espero que este sencillo tip les sirva de algo, con algo de ingenio podemos usar un switch para crear un menú completo...

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate