AlphaImageLoader en a:hover

derkenuke · #1 (**permalink**) 18/10/2007, 08:24

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">

a {

    display: block;

    margin: 0;

    padding: 5px 5px 5px 8px;

    border: solid 1px #f9f9f9;

    border-left: solid 5px #000;

    border-top: none;

    background-image: none;

    color:#dd0000;

    text-decoration: none;

}

a strong {

    font-family: Arial;

    color: #000;

    text-transform: uppercase;

}

 
a em {

    font-style: normal !important;

    display: block;

    color: #888;

    margin-left: 1.5em;

    line-height: 2em;

}

 
a:hover {

    display: block;

    cursor: pointer;

    padding: 5px 5px 5px 8px;

    /*background-color: #f4f4f4;*/

    border: solid 1px #a1a1a1;

    border-left: solid 5px #aa1f1f;

    border-top: none;

    background-image: url(../img/fondo-menu-negro.png) !important;

    background-image: none;

    background-position: left top;

}

a:hover em {

    color: #000;

}

a:hover strong {

    color: black;

}

 
/* inicio sentencias hover IE */

    a { zoom: 1; }

 
    a:hover {

        filter: progid: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;ntrenos, trabaje 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