JMiur [E]

Cuando utilizamos varias imágenes para hacer un efecto de rollover, o un slideshow, la única imagen que se carga es la primera, la que está visible; las demás sólo lo hacen cuando las activamos con el mouse (poniéndolo encima del enlace o haciendo click en él).


Este es el código básico par este tipo de efecto:
<a href="direccion_URL"
onmouseover="getElementById('nombreUnico').src='URL_imagenOver';"
onmouseout="getElementById('nombreUnico').src='URL_imagenNormal';">
<img id="nombreUnico" src="URL_imagenNormal"/>
</a>
La imagenNormal se cargará con la página pero la imagenOver lo hará después. Ver DHTML: Páginas dinámicas.

Esto, que generalmente pasa desapercibido, puede causar algún problema ya que si la imagen tarda en cargarse (es muy grande o la conexión es lenta), no veremos el efecto y nuestras intenciones habrán caído en saco roto.

Para evitarlo, hay varias técnicas, una de ellas es la llamada Preload (precarga) y la forma más común de hacerlos es utilizando un script:
<script>
img1 = new Image();
img2 = new Image();
img1.src = "URL_imagenNormal";
img2.src = "URL_imagenOver";
</script>
Pero, hay otra forma bastante más simple y es utilizar CSS, sólo necesitamos agregar una clase a nuestra plantilla:
<style type="text/css">
.preload {display: none;}
</style>
Y luego, poner cada una de las imágenes al final de la página, justo antes de la etiqueta </body>, utilizando esa clase.
<img class="preload" src="URL_imagenNormal" width="ancho" height="alto" />
<img class="preload" src="URL_imagenOver" width="ancho" height="alto" />
Las imágenes se cargarán (se guardarán en la caché) pero no se mostrarán, cuando las utilicemos el navegador no necesitará descargarlas nuevamente y el efecto será instantáneo.

23 comentarios:

Charly  

Utilísima como siempre. Gracias.

Responder
JMiur  

Gracias Charly, espero que te ayude. Sirve para cualquier tipo de imagen que tengamos oculta.

Responder
Gem@  

Está muy bien pero ¿dónde conseguimos una imagenOver casi idéntica a la imagen normal para que produzca el efecto del ejemplo?

Responder
JMiur  

Si mal no recuerdo, las dos imágenes del botón del ejemplo las hice con alguno de los servicios que recomendabas en tu blog. Estoy casi seguro que era ESTE POST :)

De no ser ese, hay otros sitios donde se generan botones con imágenes y efectos over.

Responder
Gem@  

Estás en lo cierto, esa página proporciona imágenes over, pensaba que quizás había alguna otra que no conozco ;)

Responder
Anónimo  

Hola, me llamo Joaquín,

Y quisiera agradecer vuestro trabajo, porque en concreto esto me ha servido de mucho, es lo que estaba buscando una solución inteligente rápida y que no dependa de la arquitectura del usuario.

Gracias y un saludo.

Responder
JMiur  

Me alegro que te fuera útil Joaquín :)

Responder
Dextertp  

Hola JMiur me gustaría que me ayudaras con el menú de categorías que tengo en la barra lateral de mi blog, porque he intentado lo que dices pero no me sale, espero me puedas ayudar. Mi blog es http://educandomimente.blogspot.com.

Responder
JMiur  

Dextertp:
Aclareme un poco que es lo que no logras hacer porque lo veo funcionando muy bien.

Responder
Dextertp  

Mira es que pasa que cada que abro mi blog y pongo el cursor sobre un botón, empieza a cargar para que aparezca la imagen y quisiera que las cargara antes de poner el mouse sobre el botón, para que no se vea lento.

Aquí te dejo un ejemplo de como hice un botón en html:

--- < a href="javascript:void(0);" onclick="expandcollapse('Educacion_Mental')" >< img border="0"
onmouseover="this.src=img='http://img143.imageshack.us/img143/8058/educa******.png';" src="http://img373.imageshack.us/img373/3562/educaci******.png" onmouseout="this.src='http://img373.imageshack.us/img373/3562/educacio*****.png';"/ >< /a>< br/ >

< ul id="Educacion_Mental" class="texthidden" >
< li >< a href="http://educandomimente.blogspot.com/2008/10/texto-clsico-acerca-de-la-conducta.html" target="_self">Un texto clásico acerca de la conducta< /a >< /li >. ---

Coloqué el código < style type="text/css" > .preload {display: none;}< /style > antes de < /skin >

y < img class="preload" src="URL_imagenNormal" width="ancho" height="alto" / > < img class="preload" src="URL_imagenOver" width="ancho" height="alto" / > antes de /body, pero esto lo repetí varias veces con la url de cada botón pero al parecer no es así, ojala puedas ayudarme y gracias.

*Pongo espacio a "< >" por causas de edición, pero van juntos.

Responder
JMiur  

Lo que has hecho está bien. Veamos otras alternativas. La idea general es cargar las imágenes y no mostrarlas para que estén disponibles antes. Una posibilidad entonces es hacer lo mismo pero, en lugar de ponerlo a l final, ponerlo al inicio, justo después de <body>
<img class="preload" src="URL_imagenNormal" width="ancho" height="alto" / >
etc...
Será lo mismo, quedarán ocultas pero, en teoría, se cargarán al principio de la página.

La segunda opción si esto no funciona, es recurrir al método tradicional, el script que se coloca antes de </head> Ese es el métodoque uso en el efecto que está aquí abajo y que muestra una animación en Hacia Atras Home etc.

La tercera opción y la que más me gusta, la uso en la sidebar y sól orequiere de una imagen, es una opción válida y funcionará siempre (VER aquí y aquí)

Responder
Dextertp  

Hola gracias por contestar tan oportunamente, tengo otra duda, es que sin lugar a dudas no soy programador ha'.
Si utilizo el script:
img1 = new Image();
img2 = new Image();
img1.src = "URL_imagenNormal";
img2.src = "URL_imagenOver";
en mi caso como pongo esta secuencia si son varias imagenes que tengo que cargar
No sé si sea así, o como:
img1 = new Image();
img2 = new Image();
img3 = new Image();
img4 = new Image();
img1.src = "URL_imagenNormal";
img2.src = "URL_imagenOver";
img3.src = "URL_imagenNormal";
img4.src = "URL_imagenOver";
????
Gracias.

Responder
JMiur  

Exacto, tal como lo has puesto. El orden de las imágenes no importa. Lo único importante es que cada una tenga un nombre distinto, img1, img2, img3, etc.

Responder
Dextertp  

Hola JMiur lo vuelvo a molestar, había hecho el script tal como le mostré, solo que a la hora de guardar, pasa lo siguiente
En vez de que quede con comillas así
img2.src = "http://img143.imageshack.us/img143/8058/educacio***.png";
Estas se transforman en código ASCII si no me equivoco
img2.src = "http://img143.imageshack.us/img143/8058/educaci***.png"

Y pienso yo que eso podria ser lo que provoca que no funcione el script o ¿usted que opina?

Responder
Dextertp  

perdón queda así

img2.src = "http://img143.imageshack.us/img143/8058/educacio***. png";
Estas se transforman en código ASCII si no me equivoco
img2.src = & quot;http://img143.imageshack.us/img143/8058/educaci***. png"& quot;

Responder
JMiur  

Sí, eso es así. Blogger transforma comillas simples y dobles lo cual, a veces, provoca problemas. Para que el script no cambie y sea entonces más sencillo de leer y entender, colócalo así:

<script type='text/javascript'>
//<![CDATA[
....... aqui el código del script .......
//]]>
</script>

Responder
Dextertp  

Gracias JMiur por su paciencia y ayuda, felicidades por este espacio tan completo.

Responder
JMiur  

Saludos, Dextertp. Fue un placer :)

Responder
Uno mas del monton  

Espectacular, Aplausos :D clap, clap!
Acababo de descubrir hace un dia o dos el efecto rollover, soy muy novato, y lo implemente en algo asi como un blog donde enlazo a todos mis blogs y me di cuenta de esto, de que tardaba mucho y no quedaba bien... pero con esto cambio 100% hasta tardan menos en cargar las imágenes Normales.
Lo mas curioso es que esto lo encontré por tu post de transiciones y no porque lo haya buscado :P, bueno gracias por ayudar a los novatos como nosotros.

Jmiur te quisiera hacer un par de preguntas, solo por curiosidad,contestalas si queres ahi van.. ¿tienes algun otro blog?¿eres estudiante? (no encontré tu perfil de blogspot para ver eso :P)¿el blog lo tienes solo por compartir, pasar el rato de una forma util, para expresar tu ego?(como yo xD)¿cuantos años tienes :X?
BUeno creo q me pase son bastantes jej

Para el que quiera ver el efecto andando dejo la direccion donde lo implemente
http://expresandome.com.ar

Saludos.. ya te sigo por feedburner y te voy a estar robando cosas jeje..

Responder
JMiur  

Me alegro que sirviera y contestaré lo que pueda :D

¿Otro blog? Oficialmente, este.

¿Estudiante? No. ¿Edad? Demasiada y por eso la respuesta a la pregunta anterior fue no ;)

¿El blog lo tienes solo por compartir, pasar el rato de una forma util, para expresar tu ego? Difícil de contestar pero no es para ayudar ni compartir (no fue pensado así) si eso ocurre es sólo casualidad y nada premeditado. Pongo lo que me interesa sin pensar mucho más que en pasarla bien. Es UN JUEGO; si alguien se une al juego, mejor :D

Responder
Uno mas del monton  

jaja :$ me emocioné demaciado rapido, me cegó la emoción.. emm.. no era tan lindo como yo pensaba, lo que ocurrió es que probé con otro navegador que casi no uso y tenia las imagenes ya cargadas en la caché porque habia entrado antes xD...no es tan rapido..

Tengo una duda,donde se ubica el .preload dentro de la platilla?

Responder
JMiur  

La precarga siempre depende del acceso a las imágenes y en eso, los navegadores difieren.

La mejor técnica para evitar esas demoras en los efectos es utilizar la técnica descipta en este otro post ya que no se usan dos imágenes sino una sola comn lo cual, el resultado es instantáneo.

Responder
joako  

hoola esta muy buena grax che si te gusta el reggaeton

pasate si qeres a mi blog http://www.joako-musica.tk


grax por la opcion GOOD BYE

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