Перекрытие ссылок IE6 / 7 + текстовый отступ
-
06-07-2019 - |
Вопрос
Мне нужно небольшое руководство здесь ...
У меня есть 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.
Решение
Звучит так, как ты хочешь, и старомодная карта изображений. Перекрывающиеся связанные элементы, как это, редко бывают полезными.
Я слышал, что у тебя есть изображение. Часть изображения (часть изображения) ссылается на страницу описания. Другая часть (текстовая часть) ссылается на другой URL-адрес категорий.
Либо живите с 1 изображением выше и текстовой ссылкой ниже, либо используйте < карта > тег, чтобы разделить изображение.
Это довольно легко сделать в чем-то вроде фейерверка / ткача снов. Однако, если вы хотите создать старый добрый текстовый редактор, посмотрите документацию: