Hola, tengo un enlace con apariencia de botón como éste:
Código PHP:
<a href='../signup/index.php' class='ari12ver' style='display:block; text-align:center; line-height:25px; background-image: url(../compartido/greybuttonbackground.jpg); width:100px; height:25px; font-weight: bold; vertical-align:middle; border-left:1px solid #787878; border-right:1px solid #787878; cursor:pointer;' onMouseOver="this.style.backgroundImage='url(../compartido/greenbuttonbackground.jpg)'; this.style.color='#FFFFFF'" onMouseOut="this.style.backgroundImage='url(../compartido/greybuttonbackground.jpg)'; this.style.color='#348910'"; text-decoration:none />Suscribirse</a>
Vamos que lo que hace es simular un botón (aunque sea un enlace) y que al pasar el ratón por encima cambie el fondo del botón. Sin más.
El tema es que no precarga las imágenes por lo que tarda 1 segundo y pico en hacer el efecto "onMouseOver".
Creo recordar que esto se soluciona con una precarga de la imagen (background-image) no? Cómo se puede hacer?
Por cierto el background-image se repite, es simplemente una línea vertical de 1 pixel de ancho por 25 pixels de alto.