IE6 / 7 ligação sobreposição + text-indent

Question

Eu preciso de um pouco de orientação aqui ...

Eu tenho 2 links:

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

O 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 é o próximo:

O link img é um retrato de um item. e esta foto foi impressa sobre ele a categoria onde os itens pertence. Por exemplo: módulo de memória RAM DDR tem a imagem e a string "<< RAM módulos" impresso nele. A ideia deste é que quando você clique esta cadeia leva-o a esta categoria de este item e você pode ver todos os produtos contidos nele; mas se você clicar na imagem do produto que você vai acabar na página de descrição do produto. o que eu preciso é o seguinte:

Sobreposição do "invisível" (*) link de categoria e respectivo link. Essa é a razão pela qual eu usei posição: absoluto; No Firefox realmente grande .. mas eu não consigo descobrir como fazer isso no IE6 / 7. Não importa o que eu faço ele não funciona com o text-indent: -9999px .. se eu comentar este o texto se torna visível e I pode clicar nele .. mas não pode de outra forma. Eu tentei mesmo declarando a largura A e altura !!

(*) Eu digo "invisível" porque este link deve ter o texto .. mas você não deve ser capaz de vê-lo porque ele está recuado -9999px.

Answer 1

Parece-me que você quer e mapa moda antiga imagem. Sobreposição de itens vinculados como isso raramente é uma boa idéia.

O que eu ouço é que você tem uma imagem. Parte da imagem (a parte pic) links para a página de descrição. A outra parte (a parte do texto) links para outro URL de categorias.

De qualquer ao vivo com uma imagem acima e um link de texto abaixo, ou usar a tag

É bastante fácil de fazê-lo em algo como fogos de artifício / dreamweaver. No entanto, se você quiser sair um bom heres editor de texto antiquado documentação:

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