Collegamento IE6 / 7 sovrapposto + rientro testo
-
06-07-2019 - |
Domanda
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.
Soluzione
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: