Foros del Web » Creando para Internet » CSS »

Cargar imagen oculta en un a:hover

Estas en el tema de Cargar imagen oculta en un a:hover en el foro de CSS en Foros del Web. Hola, no se si este será el sub-foro correcto para mi pregunta, o mejor iria en php. Disculpar si no lo he puesto en su ...
  #1 (permalink)  
Antiguo 15/05/2009, 06:17
 
Fecha de Ingreso: mayo-2008
Ubicación: España
Mensajes: 130
Antigüedad: 9 años, 6 meses
Puntos: 3
Cargar imagen oculta en un a:hover

Hola, no se si este será el sub-foro correcto para mi pregunta, o mejor iria en php. Disculpar si no lo he puesto en su lugar debido.

Vereis tengo un div con una imagen de fondo, que al pasar el raton por encima cambia la imagen de fondo por otra. Al pasar por primera vez el raton por encima la imagen tarda unos segundos en cargar, quedando un efecto un tanto feo.
Mi pregunta es, si se puede hacer mediante css o php, forzar la carga de la imagen de fondo que aparece aunque aún no se haya pasado el ratón por encima y este oculta al usuario, así al pasar el ratón por encima no habría que esperar unos segundos para ver la imagen secundaria.

Muchas gracias por adelantado.
  #2 (permalink)  
Antiguo 15/05/2009, 06:22
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cargar imagen oculta en un a:hover

Mira este ejemplo de Mikmoro, sólo utiliza una imagen, por lo que no hay demoras
http://www.araudi.net/ejemplos/rollo..._posicion.html
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 15/05/2009, 06:31
 
Fecha de Ingreso: mayo-2008
Ubicación: España
Mensajes: 130
Antigüedad: 9 años, 6 meses
Puntos: 3
Respuesta: Cargar imagen oculta en un a:hover

Gracias kseso?. Me podrias pasar el enlace del codigo?, es que me has pasado solo el del ejemplo. Muchas gracias
  #4 (permalink)  
Antiguo 15/05/2009, 06:59
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Respuesta: Cargar imagen oculta en un a:hover

Hola Marti1982

Mira el código fuente de la página.

Saludos,
  #5 (permalink)  
Antiguo 15/05/2009, 10:37
 
Fecha de Ingreso: mayo-2008
Ubicación: España
Mensajes: 130
Antigüedad: 9 años, 6 meses
Puntos: 3
Respuesta: Cargar imagen oculta en un a:hover

Bueno pues ya esta solucionado, al final creo que lo he hecho algo diferente al ejemplo que me mostrabais.
Al ser 2 imágenes diferentes, las he juntado en una misma imagen, una debajo de otro. Al pasar el ratón por encima el background se desplaza verticalmente (con background-position: -px -px; ), mostrando la parte de abajo de la imagen, dando la impresion de ser otra imagen diferente. De esta forma ya no hay esos segundos con el fondo en blanco, ya que la imagen esta cargada sin tener que pasar el ratón ^^

Muchas gracias por la ayuda, saludos.
  #6 (permalink)  
Antiguo 15/05/2009, 10:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cargar imagen oculta en un a:hover

Je, je, je.
Me alegro de que lo hayas solucionado, pero esta era la imagen del ejemplo que te apuntaban:



Saludos.
  #7 (permalink)  
Antiguo 16/05/2009, 04:50
 
Fecha de Ingreso: mayo-2008
Ubicación: España
Mensajes: 130
Antigüedad: 9 años, 6 meses
Puntos: 3
Respuesta: Cargar imagen oculta en un a:hover

Pues si, asi esta la imagen que he hecho también, una debajo de otra, veo que es el mismo sistema, jeje. Gracias Mikmoro :)
  #8 (permalink)  
Antiguo 16/05/2009, 05:42
Avatar de Werlisa  
Fecha de Ingreso: noviembre-2008
Mensajes: 286
Antigüedad: 9 años
Puntos: 28
De acuerdo Respuesta: Cargar imagen oculta en un a:hover

Hola, esto es justo lo q andaba buscando aunque en mi caso me gustaria q la imagen de fondo quedara fija al clickar sobre ella...como podria hacerse?

1 saludo
  #9 (permalink)  
Antiguo 16/05/2009, 06:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cargar imagen oculta en un a:hover

Pues depende de cómo sea el código que estás usando. Si e sun enlace (para poder clicarlo como dices), seguramente lo puedes hacer marcando el desplazamiento en el selector y usando :visited.

Pon tu HTML y CSS y lo aclaramos. Explica de paso lo más claramente posible que deseas hacer.
  #10 (permalink)  
Antiguo 16/05/2009, 06:28
Avatar de Werlisa  
Fecha de Ingreso: noviembre-2008
Mensajes: 286
Antigüedad: 9 años
Puntos: 28
Respuesta: Cargar imagen oculta en un a:hover

Ok, el css es este: Lo he tomado del enlace proporcionado por Kseso?

<style type="text/css">
.caja {margin: 0 auto;
position: relative;
width: 150px;
height: 99px;
}
a {display: block;
height: 100%;
width: 100%;
background: url(../img/color_BN.jpg) no-repeat center top;
}
a:hover {background: url(../img/color_BN.jpg) no-repeat center bottom;
}
</style>
Yo tambien dispongo de dos imagenes por boton y mi intención es q la imagen de fondo quede fija cuando se clicke en ella y asi sucesivamente en el resto de botones.
Por cierto, otra duda, se supone q para cada boton debere repetir el css cambiando ".caja" por otra palabra al igual q las imagenes pero...puedo repetirlo copinado el codigo y pegandolo uno debajo de otro? O por lo contrario crear un css para cada boton?

Saludos y gracias de nuevo
  #11 (permalink)  
Antiguo 16/05/2009, 06:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cargar imagen oculta en un a:hover

Cuyo autor es quien te ha respondido justo antes
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 16/05/2009, 09:53
Avatar de Raenk  
Fecha de Ingreso: mayo-2003
Ubicación: The Net
Mensajes: 747
Antigüedad: 14 años, 6 meses
Puntos: 7
Respuesta: Cargar imagen oculta en un a:hover

Hola Werlisa

Si la imagen que utilizas para cada boton es distinta pero las "cajas" tienen las misma caracteristicas, entonces el codigo que necesitas repetir es solamente el de las anclas, pero tendrás que ponerle un nombre de clase distinto a cada uno y si lo puedes hacer dentro del mismo espacio sin crear otro CSS más.

Si las caracteristicas de las cajas son distintas, entonces tendrás que repetir también este usando nombres distintos de clases (.caja .cajita .cajota).

Te recomendaría utilizar un file externo para todos tus CSS.

Saludos
__________________
Our shadow is taller than our soul
  #13 (permalink)  
Antiguo 16/05/2009, 14:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cargar imagen oculta en un a:hover

Cita:
Iniciado por Werlisa Ver Mensaje
mi intención es q la imagen de fondo quede fija cuando se clicke en ella y asi sucesivamente en el resto de botones.
Pero esto no aclara nada nuevo, es lo mismo que habías dicho antes. ¿Qué es para ti que quede fija?

¿para siempre?
a:visited {background: url(../img/color_BN.jpg) no-repeat center bottom;}

¿hasta que pulses en otro sitio?
a:focus, a:active {background: url(../img/color_BN.jpg) no-repeat center bottom;}

¿cambio permanente aunque cambies de página?
javascript.
  #14 (permalink)  
Antiguo 16/05/2009, 18:06
Avatar de Werlisa  
Fecha de Ingreso: noviembre-2008
Mensajes: 286
Antigüedad: 9 años
Puntos: 28
Respuesta: Cargar imagen oculta en un a:hover

Se trata de un cambio hasta q se pulse en otro sitio asi q con "a:focus" me has respondido la questión Mikmoro...muchas gracias!!

Al igual gracias Raenk y Kseso?, con vuestra ayuda puedo terminar el proyecto q habia iniciado tal y como tenia pensado.

Saludos
  #15 (permalink)  
Antiguo 17/05/2009, 15:06
Avatar de Werlisa  
Fecha de Ingreso: noviembre-2008
Mensajes: 286
Antigüedad: 9 años
Puntos: 28
Respuesta: Cargar imagen oculta en un a:hover

"El codigo expuesto soluciona el problema...al final voy a aprender y todo!!"

Pues va a ser q aun tengo una ultima duda. El resultado con vuestras indicaciones es el correcto pero no no se como hacer para el resto de botones, cuando introduzco el codigo para el siguiente boton, en este caso ".serv", el resultado es q el boton "servicios" aparece duplicado y desaparece el de "empresa"...como hago?

<style type="text/css">

.menu a {
display:block;
border:none;
background-position:left top;
background-repeat:no-repeat;
width:65px;
height:14px;
}
.menu a{ background: url(images/verde-empresa.gif); }
.menu a:hover{ background: url(images/negro-empresa.gif); }
.menu a:active {background: url(images/negro-empresa.gif);}

.serv a {
display:block;
border:none;
background-position:left top;
background-repeat:no-repeat;
width:75px;
height:14px;
}
.serv a{ background: url(images/verde-servicios.gif); }
.serv a:hover{ background: url(images/negro-servicios.gif); }
.serv a:active {background: url(images/negro-servicios.gif);}

</style>

<div class="menu">
<a href="javascript:loadintoIframe('myframe', 'empresa.html')" style="text-decoration: none"></a></div>

<div class="serv">
<a href="javascript:loadintoIframe('myframe', 'servicios.html')" style="text-decoration: none"></a></div>

Gracias de nuevo

Última edición por Werlisa; 18/05/2009 a las 03:50
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.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:27.