Перекрытие ссылок IE6 / 7 + текстовый отступ

Question

Мне нужно небольшое руководство здесь ...

У меня есть 2 ссылки:

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

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

это следующее:

Ссылка img - это изображение элемента. и эта картина напечатала на нем категорию, к которой относятся предметы. Например: модуль DDR RAM имеет изображение и строку & Quot; & Lt; & Lt; МОДУЛИ ОЗУ & Quot; напечатано на нем. Идея заключается в том, что когда вы нажимаете эту строку, вы переходите в эту категорию этого элемента, и вы видите ВСЕ продукты, содержащиеся в ней; но если вы нажмете на изображение продукта, вы окажетесь на странице описания продукта. мне нужно следующее:

Перекрывают ссылку на категорию " invisible " (*) и ссылку на изображение. Вот почему я использовал положение: абсолютное; В Firefox это действительно здорово ... но я не могу понять, как это сделать в IE6 / 7. Независимо от того, что я делаю, он не работает с отступом текста: -9999px .. если я прокомментирую это, текст станет видимым и Я могу нажать на нее .. но не могу иначе. Я пытался даже объявить ширину и высоту A!

(*) Я говорю " невидимый " потому что у этой ссылки должен быть текст ... но вы не сможете его увидеть, потому что с отступом -9999px.

Answer 1

Звучит так, как ты хочешь, и старомодная карта изображений. Перекрывающиеся связанные элементы, как это, редко бывают полезными.

Я слышал, что у тебя есть изображение. Часть изображения (часть изображения) ссылается на страницу описания. Другая часть (текстовая часть) ссылается на другой URL-адрес категорий.

Либо живите с 1 изображением выше и текстовой ссылкой ниже, либо используйте < карта > тег, чтобы разделить изображение.

Это довольно легко сделать в чем-то вроде фейерверка / ткача снов. Однако, если вы хотите создать старый добрый текстовый редактор, посмотрите документацию:

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