Liaison IE6 / 7 superposée + retrait du texte

Question

J'ai besoin d'un peu d'aide ici ...

J'ai 2 liens:

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

Le 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*/
 }

c'est la suivante:

Le lien img est une image d'un élément. et cette image a imprimé sur elle la catégorie où les articles appartiennent. Par exemple: le module RAM DDR contient l'image et la chaîne & Quot; & Lt; & Lt; RAM MODULES & Quot; imprimé dessus. L'idée de ceci est que lorsque vous cliquez sur cette chaîne, cela vous amène à cette catégorie de cet article et vous pouvez voir TOUS les produits qu'il contient. mais si vous cliquez sur l'image du produit, vous vous retrouverez dans la page de description du produit. ce dont j'ai besoin est la suivante:

Superposez le lien de catégorie & "invisible &" (*) et le lien de l’image. C'est la raison pour laquelle j'ai utilisé position: absolue; Sur Firefox c'est vraiment génial .. mais je n'arrive pas à comprendre comment faire cela sur IE6 / 7. Peu importe ce que je fais Cela ne fonctionne pas avec l'indentation du texte: -9999px .. si je commente cela, le texte devient visible et Je peux cliquer dessus, mais je ne peux pas autrement. J'ai même essayé de déclarer la largeur et la hauteur A

.

(*) Je dis & "invisible &"; car ce lien devrait avoir le texte .. mais vous ne devriez pas pouvoir le voir car il est en retrait -9999px.

Answer 1

Cela me semble comme vous le souhaitez et une carte d’image à l’ancienne. Le chevauchement d’éléments liés comme celui-ci est rarement une bonne idée.

Ce que j’entends, c’est que vous avez une image. Une partie de l'image (la partie pic) renvoie à la page de description. L’autre partie (la partie texte) renvoie à une autre URL de catégories.

Soit vivre avec 1 image ci-dessus et un lien texte ci-dessous, ou utilisez le < map > balise pour séparer l'image.

Il est assez facile de le faire dans quelque chose comme Fireworks / Dreamweaver. Toutefois, si vous souhaitez sortir un bon éditeur de texte à l'ancienne, voici la documentation:

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