Cambiar de imagen al pasar el mouse

[Jamati]

Hola foristas, tengo la siguiente duda:

Si yo tengo un botón por ejemplo con fondo ROJO, y al pasar el mouse se cambia de color y se pone VERDE, yo hasta ahora tengo dos formas de hacerlo:

1) usando dos gif del boton (uno estando rojo y el otro verde) y con javascript hacer el cambio de imagen. Esto lleva al navegador y la conexion tener que cargar en cache otra imagen.

2) otro metodo que aprendí leyendo este foro, es hacer una sola imagen del boton pero el doble de largo, donde por ejemplo del lado izquierdo este rojo, y del lado derecho verde, y en el CSS lo unico que hago es decirle que la posicion del background se corra XX cantidad de pixeles para que aparezca el verde. Esto supongo que es mejor porque no tiene que cargar dos imagenes, sino simplemente una sula.

Ahora mi pregunta es??... que conviene ??... porque igualmente estuve chequeando esta segunda opción, y es notable que el navegador no lo hace instantaneo, sino que parece que carga otra imágen porqeu está unas milesimas de segundo sin mostrar nada.

Alguien conoce otra mejor forma ??

[djdraft]

ES FACIL USAS ESTOS EN CSS

A:link {
background-image: url(cualquierimagen.jpg);--->esa sera la imagen que se vera cuando esta en reposo
}

A:HOVER {
background-image: url(cualquierimagen.jpg);--->esa sera la imagen que se vera cuando pases el mouse por encima
}

A:FOCUS {
background-image: url(cualquierimagen.jpg);--->esa sera la imagen que se vera cuando se de click encima
}

A:VISITED {
background-image: url(cualquierimagen.jpg);--->esa sera la imagen que se vera cuando visitamos un link y volvemos atras--link visitado

EL OTRO A:ACTIVE: que es cuando se activa

ESPERO HABERTE SERVIDO.

HTTP://COTUIURBANO.TK
}

[Mikmoro]

Si tiene que ser con imágenes a la fuerza, yo creo que debería ser más rápida la segunda forma, pero si dices que lo has probado y hay un retardo... no sé, la verdad.

Mikel.

[Jamati]

Gracias a todos igualmente, seguiré probando y si encuentro otra forma mas sencilla de hacer la carga les comento.

Al respecto de eso, alguien sabe como se hace para que cuando esté cargando la página, automáticamente se descarguen los gifs que yo quiero al cache, así si luego los tiene que usar no hace falta que los descargue porque ya lo habra echo, me entiendo ??

sé que es con javascript, pero no se bien cual y como hacerlo.

Saludos amigos

[hades87]

creo que ya se guardán automáticamente en la cache, pero para una nueva consulta abre nuevo tema mejor :D

[Mikmoro]

Efectivamnte, eso se llama precarga de imágenes, y has de hacerlo con javascript. Busca en ese foro, que seguramente habrá alguna FAQ sobre precarga.

Mikel.

[AbdelioR]

Yo estoy con lo mismo, he probado el siguiente script pero en IE no funciona. En firefox si:

Código HTML:

<script language="javascript">
<!--

var i;
var imagenes = new Array("image1.png","image2.png");
var lista_imagenes = new Array();

function cargarimagenes(){

for(i in imagenes){
lista_imagenes[i] = new Image();
lista_imagenes[i].src = imagenes[i];

}
}

//-->
</script> 

¿No sirve esta función para IE?

[AbdelioR]

Otra duda que me surge.

Las imagenes se cargan cada vez que se llame a la función no? Aún y siendo las mismas imagenes, si el usuario visitara la sección donde las cargo varias veces, se crearian bastantes imagenes iguales. ¿Eso no saturaria el servidor?

[Jamati]

Hasta donde yo sé, esto no es así como vos decís. Una vez que la imágen cargó en tu caché, no se vuelve a cargar nuevamente. Hay un solo archivo con dicha imágen, al menos eso creo yo.

Seguramente esto lo contestará Mikmoro que sabe una banda y a ver si nos conviene usar o no javascript para estas cosas.

Saludos

[Darki]

Tras de mucho buscar como cambiar una imagen de link por otra al pasar el mouse en código html encontre en una pagina que me ayudo bastante sin necesidad de recurrir a javascript:

el ejemplo es así:

<a href="www.google.com.co" target="_top">
<img src="1.png"; onmouseover="this.src='2.png';" onmouseout="this.src='1.png';" height="300px" with="300px" />
</a>

mucha suerte....

[Carlangueitor]

Amigo Darki, no revivas temas viejos, este ya tienen un año. Y ese código que pusiste s es con Javascript.

Saludos