JMiur [E]

Un rollover es un efecto simple que se utiliza en muchísimas páginas web y que consiste en cambiar, de manera dinámica (sin recargar la página) alguna propiedad de un elemento HTML.

Por lo general, es algo que vemos en los enlaces y que podemos controlar con propiedades CSS que todos los navegadores reconocen; por ejemplo:
a {color: #CCCCFF; font-weight: normal;}
a:hover {color: #FF6666; font-weight: bold;}
Esto, hará que LOS ENLACES se muestren de cierto color y cuando coloquemos el puntero del ratón encima, cambien de color y la fuente sea negrita; volviendo a su estado "normal" en cuanto ubicamos el puntero en otro lado.

Como los enlaces, pueden ser tanto textos como imágenes, podemos usar la misma técnica para hacer un rollover sobre un enlace que sólo sea una imagen, ya sea cambiando su transparencia, agregándole un borde o cambiando la imagen:

a.demoArollOver21 {background: transparent url(URL_imagen) no-repeat left 50%; display: block; height: 32px; width: 32px; padding: 2px 0;}
a.demoArollOver21:hover {background-color: #DC143C; border: 2px solid #A52A2A; padding:0;}
a.demoArollOver22 {background: transparent url(URL_imagen) no-repeat left 50%; display: block; width: 32px; height: 32px;}
a.demoArollOver22:hover {filter: alpha(opacity=80); opacity: 0.80;}
a.demoArollOver23 {background: transparent url(URL_primeraImagen) no-repeat left 50%; display: block; width: 32px; height: 32px;}
a.demoArollOver23:hover {background: transparent url(URL_segundaImagen) no-repeat left 50%;}

En resumen, lo que hacemos es darle a un enlace dos tipos de propiedades; una "normal" y otra que usaremos cuando el puntero del ratón esté encima.

Esos cambios pueden ser tan sencillos como modificar el color o tan complejos como se nos ocurra:


Usar el opcode :hover es lo más sencillo pero tiene una limitación, en algunos navegadores como Internet Explorer sólo funciona con los enlaces así que si queremos utilizarlos en otro tipo de etiquetas, debemos recurrir a alguna clase de truco y allí entra a jugar el JavaScript.

Todas las etiquetas admiten uno o varios atributos:
<ETIQUETA atributo="valor"> el contenido </ETIQUETA>
Entre esos atributos están los llamados eventos y algunos de ellos se corresponden con esto de los rollovers; específicamente hay dos: onmouseover y onmouseout. El primero detecta cuando el puntero del ratón está sobre una etiqueta y el segundo cuando sacamos el puntero. Sabiendo esto, podríamos escribir una etiqueta como IMG y hacer que cambiara:
<ETIQUETA onmouseover="... hacer algo ..." onmouseout="... hacer algo ..."> el contenido </ETIQUETA>
Ese "hacer algo" debe ser código JavaScript y, aunque parece magia negra, en realidad, podemos crear algunas cosas de manera sencilla. Un ejemplo fácil de comprender es la etiqueta IMG:
<img src="URL_laImagen" />
Con JavaScript podemos "leer" el valor del atributo src usando la palabra this que es la referencia al objeto (en este caso la etiqueta) así que:
this.src es la dirección de esa imagen (URL_laImagen)
Por lo tanto, como sabemos cuál es, la podemos modificar cuando colocamos el puntero del ratón encima:
<img src="URL_primeraImagen" onmouseover="this.src = 'URL_segundaImagen';" />
Claro que, como la cambiamos, si queremos volver atrás y resturar la imagen original cuando quitemos el puntero, habrá que hacer lo inverso:
<img src="URL_laImagen" onmouseover="this.src = 'URL_segundaImagen';" onmouseout="this.src = 'URL_primeraImagen';" />


En resumen, en una imagen IMG:

el atributo src = "URL_primeraImagen" es la imagen visible, la primera que vemos
el atributo onmouseover="this.src = 'URL_segundaImagen';" es la imagen que cambiamos
el atributo onmouseout="this.src = 'URL_primeraImagen';" es la imagen original que restauramos

Pero JavaScript nos permite hacer algo más. Si identificamos una etiqueta con el atributo ID y le damos un nombre único, en lugar de la palabra this, podemos usar una función interna llamada getElementById() para modificar otra etiqueta.

getElementById('elNombre').src es la dirección de la imagen en una etiqueta con el atributo ID ='elNombre'

Un ejemplo sencillo. Tenemos dos imágenes, la de la izquierda tendrá los eventos que cambiará la de la derecha a la que habremos dado un nombre para reconocerla:


La imagen de la izquierda:
<img src="URL_primeraImagen" onmouseover="getElementById('elNombre').src='URL_segundaImagen';" onmouseout="getElementById('elNombre').src='URL_primeraImagen';"/>
La imagen de la derecha:
<img id="elNombre" src="URL_primeraImagen"/>
Compliquemos un poco el asunto.

Imaginemos que tenemos una serie de pseudo-enlaces de texto y usando el evento onmouseover, cambiamos la imagen de una etiqueta IMG de tal manera que en un pequeño sector, podemos mostrar una serie de imágenes diferentes.

Cada pseudo-enlace lo colocaremos en una celda de una tabla así que tendrá un código como este:
<td onmouseover="getElementById('rollOverImgs').src='URL_imagenXXX';">TEXTO</td>
Y la imagen en si misma, estará en cualquier otro lado, dentro de la tabla o fuera de ella, y tendrá un código similar a este:
<img id="rollOverImgs" src="URL_imagenInicial" />

ABFIJNOPVX

Descargar el código del ejemplo

42 comentarios:

Fernandooo1  

Creo que llego algo tarde, pero tu formulario ya funciona :D

Responder
JMiur  

Nunca es tarde cuando la dicha es buena :D Y hasta hace 10 minutos no funcionaba :D

YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY
YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY
YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY
YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY
YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY YUPPYYY

Hay que tomarlo con calma.

¿Durará?

Responder
Claudio 'Poca Tinta'  

La verdad que me alegra por todos los que tienen estos formularios, yo aun no lo he puesto en mi blog, :D

Pero me encanta insultar a los de Google, bueno también a Chavez, Bush, Bill Gastes y ojala nunca a Obama.

Saludos

Responder
JMiur  

Pués ... siempre habrá oportunidad para insultar a Blogger, ellos nos lo hacen sencillo :D

Ah y el botón de Vista Previa sigue de adorno.

Responder
Fernandooo1  

Esto es obra de Obama, sin duda :)

Responder
Fabio Salinas  

esta muy bueno el documento!, felicitaciones!

Responder
MentesSueltas  

Interesantisimo tu espacio, me ayuda.

MentesSueltas

Responder
Graciela de Palomas  

jajaja te han devuelto el formulario MUY BUEN 10!!!...JMIUR cúantas cosas se puede hacer con rollovers (que me salga bien es la cuestión) me encanta ésta entrada, buenísima...chauuu que para insultar tenemos el día entero en nuestro país!!!

Responder
La Blogueria  

Hola, a mi también me encanta insultar a los de Blogger! Qué bien que cada rato nos dan algún motivo!

Gran entrada, el rollover desvelado :D gracias.

Responder
Gem@  

Me en anta la información que das en esta entrada, voy a probarlo todo :)

!Mi formulario también funciona¡ olé, olé y oleeeeeeee
¿Es más ancho el editor o lo mío son paranoias?

Responder
Gem@  

Rectifico "en anta" = encanta :)

Responder
JMiur  

Pués, entonces, habrá que crear un tablón especial de insultos, no de problemas ni de ayuda, sólo de insultos y premiar los mñas creativos :D

Gem@: Así es, ayer a la noche recorí todos los blogs que recordaba que tenían problemas y en todos había vuelto a la normalidad. Amén.

Lo del ancho es cierto. También verás que los textos como "Comentar como" ahora se ven y el enlace "Subscribe" tiene otro color. Pero eso es un cambio mio que hice justo un poco antes del colapso. En el blog de Fernando está explicado. Iba a escribir sobre el asunto pero como dejaron de funcionar lo pospuse así que será la semana que viene.

Responder
Sharck_Bloody  

Hola, bastante util, con imaginacion se le puede sacar jugo al material. Tengo una pregunta un poco fuera de contexto, ¿Como cambio la cantidad de post que muestran los enlases de navegacion? (entradas antiguas, entradas recientes) es que en mi blog muestra de a 20 y me parece una barbaridad.

Responder
Vera  

Este post puede verse implentado con uno que he explicado sobre como crear un efecto botón con un simple enlace.

http://www.verasoul.com/2008/11/como-crear-botones-partir-de-enlaces-en.html

Me alegra que ya funcione el formulario y como bien has dicho JMiur ¿Durará? y en ese caso ¿cuánto tiempo?

Saludos

Responder
Gem@  

Gracias por la info J.Miur mañana probaré este invento ;)

Responder
El club de los Parados  

te descubri hace unos dias en el blog de Gema...y desde entonces no he dejado de entrar para entender un poco mas todo lo que significa llevar un blog hacia delante. Me han servido de ayuda muchos de los enlaces que tienes en tu web. Voy leyendo por Julio de 2007 jeje Es increible todo lo que llevas escrito.
Bueno ahora me centro en mi peticion. He estado buscando a ver si explicabas en algun sitio como poner el diseño de la fecha en el titulo de cada entrada. Seria de gran ayuda si le echas un vistazo a mi blog y me mandases un mail para ver que codigo debo insertar...
Te dejo una invitacion a mi blog y mi mas sincera admiracion
Nos leemos

Responder
Claudio - Poca Tinta  

Yeeeeeeee! ya funciona mi formulario!!!!!.

Es que recién lo puse, jajajaja :D

Saludos

Responder
JMiur  

Sharck_Bloody:
Es la misma cantidad que se muestra en la página principal y es definida en Configuración | Formato. Allí, se establece el valor de posts a Mostar por página.

Ver:
Claro. Los rollovers son la base de casi todos los efectos de las páginas dinamicas.

El club de los Parados:
Gracias por el comentario. Hay una entrada que habla de eso: en este post. No es complejo pero puede ser algo engorroso ya que las plantillas son muy diferentes entre si. Cualqueir cosa, me envias un mail y vemos si es posible solucionarlo.

Claudio:
¡Era hora!!!!!!! :D ¿Estabas esperando que pasara el colapso? No te preocupes, ya habrá otros y disfrutaremos las delicias del maravilloso mundo de Blogger :)

Responder
єι_мαиcнєɠσ  

Hola JMiur y demás lectores de este fabuloso blog,

Tengo un blog con el mismo problema que tu JMiur, uso la misma platilla que la tuya, y hace unos días me di cuenta que no funciona el formulario de comentarios incrustado. Veo que a ti ya te funciona, hay algo que hiciste para que te funcionara y todo lo dejaste en las manos de blogger?

Responder
Sharck_Bloody  

Grasias, me temia que fuera eso, creo que me lo mas, voy a tener que condicionar los post para que no se muestren en la pagina principal, pero de eso me ocupo yo; ya que no me falta mucho, seria un gran honor si cuando termine el diseño del blog te diaras una vulelta y me dijieses que te parace.

Responder
JMiur  

єι_мαиcнєɠσ:
Imagino que es El blog de Irámuco. Como no veo el código fuente del formulario, te diría que primero te fijes que esté habilitado en Configuración | Comentarios porque no se ven errores.

Sharck_Bloody:
Será un placer :D

Responder
Malacate  

Estimado JMiur
He colocado dos post en mi blog con el código que nos has dejado. Si abro el blog con IE7, todo correcto. Si lo abro con Firefox o con Chrome, no funciona. ¿Es normal? ¿Qué hago mal?
Gracias Jota

Responder
JMiur  

No, no es normal. Allí no hay propeidades conflictivas y de hecho, uso Firefox aunque lo he comprobado en IE7.

Lo que no puedeo hacer es ver el código real colocado en en el post e imagino que el error debe estar allí porque copio y pego el código fuente de uno de tus posts, lo coloco en un blog de pruebas y funciona perfectamente [EJEMPLO]

Podrías enviarme el codigo fuente del post por mail para revisarlo o copiar el código fuente de tu propio blog y pegarlo en un post.

Responder
Malacate  

Te lo envío inmediatamente.
Un fuerte abrazo

Responder
JMiur  

OK: ya lo recibí.

Responder
FRAN LLANO  

¿Todo bien, JMiur?.
He leido tanto en tu blog desde hace un año aproximadamente, que en ocasiones tengo la impresión de conocerte.
Tengo el mismo problema que MALACATE, podrias ayudarme,
He colocado dos post en mi blog con el código que nos has dejado. Si abro el blog con Firefox (lo utilizo de manera exclusiva), funciona el primero de ellos, pero los pseudo-enlaces del segundo, hacen que funcione el primero, pero no el segundo.

Responder
JMiur  

FRAN LLANO:
¿En cuál de tus blogs está? ¿En qué parte? Necesitaría verlo para confirmarlo pero, por lo que dices, el problema podría ser que ambos tubieran el mismo ID y deberían ser diferentes.

De todas formas, si me dices donde mirar, me fijo.

Responder
FRAN LLANO  

El sitio es http://elsentaitoprueba.blogspot.com/, lo utilizo como prueba para realizar experimentos con casi todo lo que pones en tu blog, para posteriormente trasladarlo a otros Blog. Como podrás ver tengo varios ejemplos en los últimos post con los problemas que te comente. Un saludo desde Carmona -Sevilla-. Por cierto sigo siendo FRAN LLANO, en "Comentar como", no sale la opción para identificarme.

Responder
JMiur  

FRAN LLANO:

Es un problema generado por usar siempre el mismo ID. El primer ejemplo déjalo como esta. En los siguiente, como están en la misma página, deberías usar nombres distintos. El ID identifica la imagen a cambiar y como todas tienen el mismo rollOverImgs, la única que se ejecuta en el home es la primera.

Ese ID va en dos partes. Así que fíjate en el segundo ejemplo y, en cada celda cambia rollOverImgs por, por ejemplo rollOverImgs:

<td onmouseover="getElementById('rollOverImgs2').src='...............

Y lo mismo haces en la imagen:

<img id="rollOverImgs2" src="...............

rollOverImgs es el ID y sólo es un nombre, puedes colocar cualquier otro.

¿Se comprende?

Responder
Staff  

Exelente como siempre!

Responder
Carlos Martínez  

Hola JMiur, tengo un problema con este código, las imágenes no se mantienen una al lado de la otra, como en esta entrada, quiero que se vean una detras de otra y se ven una bajo la otra :S.

http://carlossk8d.blogspot.com/2009/05/lista-de-navegadores.html

Responder
Carlos Martínez  

Perdon, pero ya lo resolvi, solo borre las lineas display: block; width: 32px; height: 32px; y listo... gracias de todos modos :)

Responder
Felipe Marte  

Como consigo los codigos del cuadro debajo con las letras, A, B, F, I Etc, ya que me dise que no tengo sufisiente Bandwidth excedido

Responder
JMiur  

Fíjate acá

Responder
AristidesEchauri.Com  

Muchas gracias.... se sera muy util...
www.AristidesEchauri.Com


Responder
xXx4bN3rxXx  

Muy bien explicado, te felicito Jmiur, graciasssss... enserio eso me valio de mucho EXCELENTE!!!!!

Responder
Michael Graber  

I LOVE YOUUU!
Eu entrei em cssplay e busquei um tutorial sobre como ocultar imagens no menu!
E nada!
Agora deixo de assistir um filme,para visitar o melhor blog do mundo!
E encontro!
I love youuuuuu!!!
Ich liebe dich amigo!

Responder
JMiur  

Me alegra que sirviera, Michael.

Responder
Manfenix  

Hola JMiur.
Completo la info del último email que te mandé sobre rollover en los enlaces de mi sidebar (blog principal).
En cada enlace, en la parte de img, coloqué un style="margin: 5px; width: 85px; height: 53px;", y cada imagen usada fue del tipo "s000".
Con todo esto quedó solucionado el problema al hacer el rollover.
Lo mismo hice en los enlaces ubicados debajo de los primeros.
Gracias por la ayuda. :)

Responder
JMiur  

No fue nada Mafenix :D

Responder
fealvarado  

Hola compañero,

Este blog!! era justo lo que necesitaba, ahora bien tengo una pregunta.. en la parte donde se coloca la imagen en el src, esto no puedo sustiturlo por un iframe??o un div?

Gracias de antemano

JMiur  

No entiendo la pregunta, aclara un poco la idea.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR