Cargar imagen oculta en un a:hover

[Marti1982]

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.

[kseso?]

Mira este ejemplo de Mikmoro, sólo utiliza una imagen, por lo que no hay demoras
http://www.araudi.net/ejemplos/rollo..._posicion.html

[Marti1982]

Gracias kseso?. Me podrias pasar el enlace del codigo?, es que me has pasado solo el del ejemplo. Muchas gracias

[JavierB]

Hola Marti1982

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

Saludos,

[Marti1982]

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.

[Mikmoro]

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



Saludos.

[Marti1982]

Pues si, asi esta la imagen que he hecho también, una debajo de otra, veo que es el mismo sistema, jeje. Gracias Mikmoro :)

[Werlisa]

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

[Mikmoro]

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.

[Werlisa]

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

[kseso?]

Cuyo autor es quien te ha respondido justo antes

[Raenk]

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

[Mikmoro]

Iniciado por Werlisa

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.

[Werlisa]

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

[Werlisa]

"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