Comunidad de diseño web y desarrollo en internet

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

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...

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

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