¿Quieres registrarte?

Efecto simple de rollover con JavaScript

Por: Aoyama
22 de Abril del 2006
5861 de clabLevel
Otros artículos de Aoyama
7,019 visitas

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

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas javascript css

Comentarios | Enviar un comentario
Esto, para ser honesto, no me parece relevante. Hacer Rollovers con CSS es más sencillo, te ahorra tiempo de carga, y hay ciertos trucos para que la imagen a Rollovear (:lol:) no se tenga que cargar... pero en eso de que es un Javascript bastante sencillo, estoy de acuerdo, y vamos, que mi comentario fue muy subjetivo :)
Por: Alan
Esto es muy útil, pero solo si lo aplicas a elementos que el necesitas darle rollovers y no son enlaces. Porque si son botones o algo similar con CSS es muy práctico. Pero si es para digamos un Div, o algo similar alli si necesitas "esto" para que funcione en IE.

Esperemos a IE7.

PD: Aoyama, conoces moo.dom? Es excelente, lo he usado en un proyecto reciente y wow.. que script, te recomiendo lo revises.
Por: neojp
En efecto... se me olvido mencionar que esto es para elementos que no son enlaces... :P ... sobre todo para hacer algunos efectos sin necesidad de recurrir a Flash... ...

NEO, no conocía ese script, en verdad me impreisono... lo voy a checar.....
Por: Aoyama
De hecho, el de CSS funciona en ambos casos... ademas, oldjp, ahi no está aplicado a hacer rollover a un div, si no ha cambiar el source de una imagen... y por eso digo lo de CSS o_o
Por: Alan

Alan :

De hecho, el de CSS funciona en ambos casos... ademas, oldjp, ahi no está aplicado a hacer rollover a un div, si no ha cambiar el source de una imagen... y por eso digo lo de CSS o_o
\Si buen codigo simple y ligero, para el uso que se le quiere dar esta bien 3 Point for you Aoyama.
saben creo que lo mejor de poder programar es hacerlo no solo uniforme, creo que la potencialidad programacion es combinar muchas funciones u objetos para llevar acabo cada accion en cada web browser, aunque implica mas tiempo, y obviamente queremos terminar luego pero bueno... prefiero hacer un modelo diferente para cada Navegador...
Lo de mootools esta bien ya habia visto este tipo de efectos pero con menus horizontales que se recorren al pasar por ciertas cordenadas y puedes ir viendo los demas botones escondidos con un <div> y un recorte de su area... muy bueno....
Por: Lorablast
fsdfddd
Por: sdfdsf-blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.