IE6 / 7 enlace superpuesto + sangría de texto

Question

Necesito un poco de orientación aquí ...

Tengo 2 enlaces:

<div class="tarjBodyHolder">
    <div class="imageHolder">
        <a href="#" onclick="alert('picture link'); return false;">
           <img border="0" src="/picture.jpg" />
        </a>
    </div>
    <div class="linkTransp">
       <a href="#" onclick="alert('family link'); return false;">RAM Moudles</a>
    </div>
</div>

El Css:

.tarjBodyHolder{
    position: relative; 
    clear: both; 
    height: 152px;
 }

.tarjBodyHolder .linkTransp{
     position: absolute; 
     bottom: 0px; 
     left: 0px; 
     width: 120px;
     height: 15px;
     z-index: 6; /*IE bug*/
}
.tarjBodyHolder .linkTransp a {
     display: block;
     text-indent: -9999px; 
     width: 120px; 
     height: 15px;
     overflow: hidden;
     z-index: 6;
 }
 .tarjBodyHolder .imageHolder{
     position: absolute; 
     bottom: 0px; 
     left: 0px;/*IE 7 bug*/
 }

este es el siguiente:

El enlace img es una imagen de un elemento. y esta imagen tiene impresa la categoría a la que pertenecen los artículos. Por ejemplo: el módulo DDR RAM tiene la imagen y la cadena & Quot; & Lt; & Lt; MÓDULOS RAM & Quot; impreso en él. La idea de esto es que cuando hace clic en esta cadena, lo lleva a esta categoría de este artículo y puede ver TODOS los productos que contiene; pero si hace clic en la imagen del producto, terminará en la página de descripción del producto. lo que necesito es lo siguiente:

Superponga el enlace de categoría " invisible " (*) y el enlace de imagen. Esa es la razón por la que he usado posición: absoluta; En Firefox es realmente genial ... pero no puedo entender cómo hacer esto en IE6 / 7. No importa lo que haga. No funciona con la sangría de texto: -9999px ... si comento esto, el texto se hace visible y Puedo hacer clic en él ... pero no puedo de otra manera. ¡He intentado incluso declarar el ancho y alto A!

(*) Digo " invisible " porque este enlace debería tener el texto ... pero no debería poder verlo porque está sangrado -9999px.

Answer 1

Me parece que quieres y un mapa de imágenes antiguo. La superposición de elementos vinculados como este rara vez es una buena idea.

Lo que escucho es que tienes una imagen. Parte de la imagen (la parte de la imagen) está vinculada a la página de descripción. La otra parte (la parte de texto) enlaza con otra URL de categorías.

Viva con 1 imagen arriba y un enlace de texto debajo, o use < mapa > etiqueta para dividir la imagen.

Es bastante fácil hacerlo en algo como fuegos artificiales / dreamweaver. Sin embargo, si desea desarrollar un buen editor de texto antiguo, aquí está la documentación:

http://www.w3schools.com/TAGS/tag_map.asp