Перекрытие ссылок в IE6 / 7 + текстовый отступ - PullRequest
Новая
       27

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

0 голосов
/ 31 июля 2009

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

У меня есть 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 MODULES». Идея заключается в том, что когда вы нажимаете эту строку, вы переходите в эту категорию этого элемента, и вы видите ВСЕ продукты, содержащиеся в ней; но если вы нажмете на изображение продукта, вы окажетесь на странице описания продукта. мне нужно следующее: </p>

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

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

1 Ответ

1 голос
/ 31 июля 2009

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

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

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

для разделения изображения.

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

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

...