IE6/7 Link überlappende + text-indent

Question

ich hier ein wenig Unterstützung benötigen ...

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

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

ist dies die nächstes:

Der Link img ist ein Bild eines Gegenstandes. und dieses Bild hat darauf die Kategorie gedruckt, zu der die Artikel gehören. Zum Beispiel: DDR-RAM-Modul hat das Bild und die Zeichenfolge "< < RAM-Module" darauf gedruckt. Die Idee davon ist, dass Sie, wenn Sie auf diese Zeichenfolge klicken, zu dieser Kategorie dieses Elements gelangen, und Sie können ALLE darin enthaltenen Produkte sehen; Wenn Sie jedoch auf das Bild des Produkts klicken, werden Sie auf der Produktbeschreibungsseite enden. Was ich brauche, ist folgendes:

Überlappen Sie den Link "unsichtbare" (*) Kategorie und den Bildlink. Das ist der Grund, warum ich Position verwendet habe: absolut; Auf Firefox ist es wirklich toll .. aber ich kann nicht herausfinden, wie dies auf IE6/7 zu tun ist. Egal was ich tue Es funktioniert nicht mit dem Text-Einzug: -9999px .. Wenn ich dies kommentieren wird der Text sichtbar und ich kann darauf klicken .. aber kann nicht anders. Ich habe versucht, sogar die A-Breite und Höhe zu erklären !!

(*) Ich sage "unsichtbar", weil dieser Link den Text haben sollte .. aber Sie sollten nicht in der Lage sein, es zu sehen, weil es eingerückt -9999px ist.

Answer 1

Klingt für mich wie Sie wollen und altmodische Bildkarte. Überlappende verknüpfte Elemente wie diese sind selten eine gute Idee.

Was ich höre ist, dass Sie ein Bild haben. Ein Teil des Bildes (der Bildteil) verlinkt auf die Beschreibungsseite. Der andere Teil (der Textteil) verweist auf eine andere URL von Kategorien.

Entweder leben Sie mit 1 Bild oben und einem Textlink unten, oder verwenden Sie das map> -Tag <, um das Bild zu teilen.

Es ist ziemlich einfach, es in etwas wie Feuerwerk/dreamweaver zu tun. Allerdings, wenn Sie möchten, heres die Dokumentation einen guten altmodischen Text-Editor auszubrechen:

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