IE6/7 링크 중첩 + 텍스트 표시

Question

여기에 약간의지도가 필요합니다 ...

두 가지 링크가 있습니다.

<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 모듈에는 사진이 있으며 문자열 "<< RAM 모듈"이 인쇄되어 있습니다. 이것의 아이디어는이 문자열을 클릭하면이 항목 의이 범주로 이동하여 포함 된 모든 제품을 볼 수 있다는 것입니다. 그러나 제품 사진을 클릭하면 제품 설명 페이지에서 끝납니다. 내가 필요한 것은 다음과 같습니다.

"Invisible"(*) 범주 링크와 사진 링크를 겹치십시오. 그것이 내가 위치를 사용한 이유입니다 : 절대; Firefox에서 정말 훌륭합니다 .. 그러나 IE6 / 7 에서이 작업을 수행하는 방법을 알 수 없습니다. 클릭 할 수는 있지만 그렇지 않으면 할 수 없습니다. 너비와 높이를 선언 하였다 !!

(*)이 링크에는 텍스트가 있어야하기 때문에 "Invisible"이라고 말합니다. 그러나 -9999px가 들여 쓰기 때문에 볼 수 없습니다.

Answer 1

당신이 원하는 것처럼 들리고 구식 이미지지도. 이와 같은 링크 된 링크 된 항목은 거의 좋은 생각이 아닙니다.

내가 듣는 것은 이미지가 있다는 것입니다. 이미지의 일부 (그림 부분)는 설명 페이지에 링크됩니다. 다른 부분 (텍스트 부분)은 다른 범주의 URL로 연결됩니다.

위의 이미지 1 개와 아래의 텍스트 링크로 라이브하거나 <map> 태그를 사용하여 이미지를 분할하십시오.

불꽃 놀이/Dreamweaver와 같은 일에서는 쉽게 수행하는 것이 매우 쉽습니다. 그러나 좋은 구식 텍스트 편집기를 세우고 싶다면 문서가 다음과 같습니다.

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