Curioso rollover en javascript
Si veis el menú de la izquierda, he añadido un mini banner de publicidad para los que me querais enlazar de forma más gráfica, el rollover está hecho de forma un tanto extravagante, en javascript. Este código irá en la cabecera de la página, para que precargue las imágenes en el Load:
<script language="JavaScript">
Imagenes = new Array();
function Precargar()
{
for (var j=0; j<Precargar.arguments.length; j++)
{
Imagenes[j]=new Image;
Imagenes[j].src=Precargar.arguments[j];
}
}
Precargar('images/banners/banner01.jpg', 'images/banners/banner01hover.jpg');
</script>
Y a la hora de hacer el enlace simplemente habrá que poner algo así:
<a href="http://www.userlinux.net"><img src="images/banners/banner01.jpg" border="0" alt="banner01" onmouseover="this.src=Imagenes[1].src;" onmouseout="this.src=Imagenes[0].src;" title="diario de r0sk"/></a>
reidrac@11.05.2004, 'De lo más normal'
Es de lo más normal. Aunque en el fondo tiene poco sentido, si lo pansamos bien. Me explico.
¿Por qué no coge autmáticamente las imágenes del cache? Pues para justificar que que haya que hacer todo eso de new Image() :D. Si no hacemos "preload" y no usamos luego this.src=Imagenes[1].src (y hacemos this.src='images/banners/banner01hover.jpg')... ¡cargará la imagen de la web cada vez que se active el rollover! Y digo yo... ¿para qué estará el cache del navegador?
Imagino que se comporta así por compatibilidad hacia atrás con las implementaciones de navegadores más antiguos (como decir que porque siempre ha sido así).
neuronal@13.05.2004, 'mola'
También lo puedes hacer con CSS. No recuerdo el enlace de dónde lo explicaba (lo lei hace no se cuándo gracias a Blogpocket.com). Pero en esta web puedes verlo en funcionamiento. Fijate en los menús de la derecha, las imagencitas que usa. Pues si cargas unicamente la imagen verás donde está el truco :-) (bueno, eso y el respectivo fragmento de CSS que utilizará para alternar entre una porción de imagen y otra).
No me he parado en cuchichear el codigo de esa web pero casi seguro que ha utilizado el truquito este de CSS que medio comento.
Saludos
coder@13.05.2004, 'no lo veo'
Ye neuronal socio, no lo capto xD. Estoy algo nigro, no entiendo a qué te refieres xD.
Offtopic: xorg rox on the mega top of the week.
alejandro@25.01.2008, 'Re: Curioso rollover en javascript'
aqui puedes ver como hacerlo con css :
[url=http://netcodigo.webinfo.es/2007/11/25/precarga-de-imagenes-sin-javascript/]
es muy facil,
pero tengo dudas que sera mas eficiente??
