Foros del Web » Creando para Internet » CSS »

AlphaImageLoader en a:hover

Estas en el tema de AlphaImageLoader en a:hover en el foro de CSS en Foros del Web. Hola, voy a postear un código fuente de un menú que he preparado a base de 5 elementos A. Resulta que con IE para poner ...
  #1 (permalink)  
Antiguo 18/10/2007, 08:24
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 4 meses
Puntos: 45
AlphaImageLoader en a:hover

Hola, voy a postear un código fuente de un menú que he preparado a base de 5 elementos A. Resulta que con IE para poner una imagen PNG de fondo en el a:hover he puesto el AlphaImageLoader de rigor, pero cuando se pasa el ratón por encima hay problemas:

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<
head>
<
meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<
meta name="Author" content="derkeNuke" />
<
title>Página nueva</title>
<
style type="text/css">
{
    
displayblock;
    
margin0;
    
padding5px 5px 5px 8px;
    
bordersolid 1px #f9f9f9;
    
border-leftsolid 5px #000;
    
border-topnone;
    
background-imagenone;
    
color:#dd0000;
    
text-decorationnone;
}
a strong {
    
font-familyArial;
    
color#000;
    
text-transformuppercase;
}

a em {
    
font-stylenormal !important;
    
displayblock;
    
color#888;
    
margin-left1.5em;
    
line-height2em;
}

a:hover {
    
displayblock;
    
cursorpointer;
    
padding5px 5px 5px 8px;
    
/*background-color: #f4f4f4;*/
    
bordersolid 1px #a1a1a1;
    
border-leftsolid 5px #aa1f1f;
    
border-topnone;
    
background-imageurl(../img/fondo-menu-negro.png) !important;
    
background-imagenone;
    
background-positionleft top;
}
a:hover em {
    
color#000;
}
a:hover strong {
    
colorblack;
}

/* inicio sentencias hover IE */
    
zoom1; }

    
a:hover {
        
filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fondo-menu-negro.png'sizingMethod='scale');
    }
/* fin sentencias hover IE*/

</style>
</
head>

<
body>


<
a href="acerca-del-estudio.html" accesskey="a" hreflang="es">
    <
strong>Acerca del estudio:</strong>
    <
em>Un acercamiento a nuestra historia y m&eacute;todo de trabajo.</em>
</
a>
<
hr />
<
a href="proyectos.html" accesskey="p" hreflang="es">
    <
strong>Proyectos:</strong>
    <
em>Una sección para observar los trabajos más detalladamente.</em>
</
a>
<
hr />
<
a href="servicios.html" accesskey="s" hreflang="es">
    <
strong>Servicios:</strong>
    <
em>Un detallado esquema de los servicios que podemos proporcionarle al cliente.</em>
</
a>
<
hr />
<
a href="curriculum.html" accesskey="u" hreflang="es">
    <
strong>Currículum:</strong>
    <
em>Una vista rápida a proyectos y expedientes realizados.</em>
</
a>
<
hr />
<
a href="contacto.html" accesskey="c" hreflang="es">
    <
strong>Contacto:</strong>
    <
em>Encu&eacute;ntrenostrabaje con nosotros.</em>
</
a>

</
body>
</
html
Si lo podéis probar en IE6, cuando se pasa el ratón por encima (da igual que la imagen no se vea, se aprecia en el border) el elemento parpadea. Cuando el cursor se mantiene sobre propio texto del enlace no, pero en cuanto se sale del texto (sin salir del elemento A) todo parpadea.

¿Es normal este comportamiento?
¿Alguien puede verificarlo en IE7 a ver si ocurre lo mismo?
¿Hay algún truco que sirva para remediar esto? En javascript sé hacerlo, pero no me gustaría ensuciar la página con eso.


Un saludo
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
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 05:26.