Enrique Rodriguez Vallejo escribió: > Buenas a todos. > > En el trabajo esta mañana nos hemos encontrado con una "desagradable" > sorpresa. > > Normalmente para el reemplazo de texto por imágenes, utilizo la siguiente > técnica: > > Marcado > <a href="http://www.google.es"; title="enlace a google" > class="googleLink">Enlace a Google</a> > > CSS > .googleLink { > display: block; > width: 150px; > height: 25px; > background: url(googleBtn.gif) 0 0 no-repeat; > text-indent: -9999px; > } > > Hasta aquí todo perfecto, pero en IE al pasar el ratón sobre el enlace, éste > parpadea, con el consiguiente descontento de diseñador y cliente. He > intentado solucionarlo de mil maneras diferentes, entre ellas esta > http://www.fivesevensix.com/studies/ie6flicker/ que parece tener gran > aceptación, pero o yo estoy haciendo algo mal, o no me valen esos ejemplos. > > ¿Alguien sabe como evitar eficientemente el parpadeo en enlaces que llevan > el texto sustituido por una imagen con CSS?. > > P.S: Hay una solución consistente en tocar el .htaccess pero esta no me > vale, ya que en este caso no puedo tocar ese archivo del servidor.
Hola, Tengo entendido que esto pasa porque ie6 no guarda en la caché las imágenes css y las tiene que cargar cada vez, con el consiguiente retraso que provoca el parpadeo, yo lo soluciono de una forma no muy elegante, pero que me funciona, y es añadiendo la clase al elemento contenedor del enlace, y después añadiéndole los estados a y a:hover, el truco esta en ponerle a la clase en estado normal la misma imagen de fondo que al a:hover, de esa forma, en realidad no evitas realmente el parpadeo, pero lo solucionas visualmente, porque mientras parpadea se está viendo el estado normal, no el a, ni el a:hover, no se si me he explicado bien, así que pego el código que siempre resulta más clarito: HTML <div class="googleLink"> <a href="http://www.google.es"; title="enlace a google">Enlace a Google</a></div> CSS .googleLink { display: block; width: 150px; height: 25px; background: url(googleBtn[estado hover].gif) 0 0 no-repeat; } .googleLink a{ display: block; width: 150px; height: 25px; background: url(googleBtn.gif) 0 0 no-repeat; text-indent: -9999px; } .googleLink a:hover{ display: block; width: 150px; height: 25px; background: url(googleBtn[estado hover].gif) 0 0 no-repeat; text-indent: -9999px; } El único detalle-pega es que el estado normal no tiene el text-indent negativo, con lo cual, si no hay enlace, no puedes usar esta clase. nota: el código css que he pegado, no lo he probado, probablemente haya que hacer algunos ajustes, pero es solamente para transmitir la idea. Saludos Rafa biosfera 4 desarrollo web | asesoramiento musical | open source c/ Andrés Segovia 3 1ºB 28230 Las Rozas de Madrid tel. 916375147 fax. 916375147 http://www.biosfera4.com [EMAIL PROTECTED] _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
