Foros del Web » Diseño web » CSS »

Cambiar de imagen al pasar el mouse

Estas en el tema de Cambiar de imagen al pasar el mouse en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/04/2008, 22:58
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 6 años, 10 meses
Puntos: 3
Cambiar de imagen al pasar el mouse

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 ??
  #2 (permalink)  
Antiguo 10/04/2008, 23:47
Avatar de djdraft  
Fecha de Ingreso: abril-2008
Mensajes: 118
Antigüedad: 6 años, 8 meses
Puntos: 0
Re: Cambiar de imagen al pasar el mouse

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
}
  #3 (permalink)  
Antiguo 11/04/2008, 02:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.243
Antigüedad: 8 años, 2 meses
Puntos: 279
Re: Cambiar de imagen al pasar el mouse

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.
  #4 (permalink)  
Antiguo 11/04/2008, 06:56
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 6 años, 10 meses
Puntos: 3
Re: Cambiar de imagen al pasar el mouse

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
  #5 (permalink)  
Antiguo 11/04/2008, 07:00
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.202
Antigüedad: 7 años
Puntos: 67
Re: Cambiar de imagen al pasar el mouse

creo que ya se guardán automáticamente en la cache, pero para una nueva consulta abre nuevo tema mejor :D
__________________
No diseñes usando tablas.
  #6 (permalink)  
Antiguo 11/04/2008, 08:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.243
Antigüedad: 8 años, 2 meses
Puntos: 279
Re: Cambiar de imagen al pasar el mouse

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.
  #7 (permalink)  
Antiguo 11/04/2008, 12:21
Avatar de AbdelioR  
Fecha de Ingreso: septiembre-2006
Ubicación: Tarragona
Mensajes: 926
Antigüedad: 8 años, 3 meses
Puntos: 8
Re: Cambiar de imagen al pasar el mouse

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?
  #8 (permalink)  
Antiguo 12/04/2008, 05:48
Avatar de AbdelioR  
Fecha de Ingreso: septiembre-2006
Ubicación: Tarragona
Mensajes: 926
Antigüedad: 8 años, 3 meses
Puntos: 8
Re: Cambiar de imagen al pasar el mouse

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?
  #9 (permalink)  
Antiguo 12/04/2008, 09:46
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 6 años, 10 meses
Puntos: 3
Re: Cambiar de imagen al pasar el mouse

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
  #10 (permalink)  
Antiguo 26/04/2010, 22:14
 
Fecha de Ingreso: abril-2010
Mensajes: 1
Antigüedad: 4 años, 7 meses
Puntos: 0
De acuerdo Respuesta: Cambiar de imagen al pasar el mouse

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....
  #11 (permalink)  
Antiguo 27/04/2010, 00:42
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 8.968
Antigüedad: 6 años, 9 meses
Puntos: 1177
Respuesta: Cambiar de imagen al pasar el mouse

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

Saludos
__________________
Aprender sin pensar es inútil. Pensar sin aprender, peligroso.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 19:28.
SEO by vBSEO 3.3.2