IE6/7 링크 겹치는 + 텍스트 들여 쓰기 내가 2 개 연결이</p> <p>...

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

"보이지 않는"(*) 범주 링크와 그림 링크를 겹치게하십시오. 그게 내가 위치를 사용한 이유입니다 : 절대; 파이어 폭스에서 정말 좋았어.하지만 IE6/7에서 어떻게 해야할지 모르겠다. 내가하는 일과 상관없이, 텍스트 들여 쓰기와 함께 작동하지 않는다 : -9999px .. 내가이 텍스트를 주석으로 달아 볼 수 있다면 그리고 나는 그것을 클릭 할 수있다. 그러나 그렇지 않으면 할 수 없다. A 너비와 높이 선언을 시도했습니다!

(*)이 링크에는 텍스트가 있어야하기 때문에 "보이지 않음"이라고 말하지만, -9999px로 들여 쓰기 때문에 볼 수 없어야합니다.

Answer 1

당신이 원하는 것과 구식 이미지 맵처럼 들리 네요. 이와 같이 겹치는 링크 된 항목은 거의 좋은 아이디어가 아닙니다.

내가들은 것은 당신이 이미지를 가지고 있다는 것입니다. 이미지의 일부 (그림 부분)는 설명 페이지로 연결됩니다. 다른 부분 (텍스트 부분)은 카테고리의 다른 URL로 연결됩니다.

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

불꽃 놀이/드림위버 같은 곳에서하는 일은 상당히 쉽습니다. 그러나 당신을 heres 문서를 좋은 구식 텍스트 편집기를 탈출하려는 경우 : 이미지가 인쇄 된이 문자열을 가지고 있기 때문에 이유입니다

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