Collegamento IE6 / 7 sovrapposto + rientro testo

Question

Ho bisogno di una piccola guida qui ...

Ho 2 collegamenti:

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

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

questo è il prossimo:

Il collegamento img è un'immagine di un elemento. e questa immagine ha stampato su di essa la categoria di appartenenza degli articoli. Ad esempio: il modulo RAM DDR ha l'immagine e la stringa & Quot; & Lt; & Lt; MODULI RAM & Quot; stampato su di esso. L'idea è che quando si fa clic su questa stringa, si accede a questa categoria di questo articolo e si possono vedere TUTTI i prodotti in esso contenuti; ma se fai clic sull'immagine del prodotto, finirai nella pagina di descrizione del prodotto. quello di cui ho bisogno è il seguente:

Sovrappone il collegamento " invisibile " (*) e il collegamento immagine. Questo è il motivo per cui l'ho usato posizione: assoluta; Su Firefox è davvero fantastico .. ma non riesco a capire come farlo su IE6 / 7. Non importa quello che faccio Non funziona con il rientro del testo: -9999px .. se lo commento il testo diventa visibile e Posso cliccarci sopra .. ma non posso altrimenti. Ho provato anche a dichiarare la larghezza e l'altezza !!

(*) Dico " invisibile " perché questo link dovrebbe avere il testo .. ma non dovresti riuscire a vederlo perché è indentato -9999px.

Answer 1

Mi sembra che tu voglia e una mappa di immagini vecchio stile. Sovrapporre elementi collegati come questo raramente è una buona idea.

Quello che sento è che hai un'immagine. Parte dell'immagine (la parte della foto) si collega alla pagina della descrizione. L'altra parte (la parte di testo) si collega a un altro URL di categorie.

Vivi con 1 immagine in alto e un link di testo in basso, oppure usa < mappa > tag per dividere l'immagine.

È abbastanza facile farlo in qualcosa come fuochi d'artificio / dreamweaver. Tuttavia, se si desidera interrompere un buon vecchio editor di testo, ecco la documentazione:

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