Twitter 부트 스트랩이 내 이미지 맵을 망쳐 놨습니다 - 누구든지이 문제가 있습니까?

우선 - 이것은 처음 질문입니다 (아직 초보자입니다).이 사이트와 내가 여기에서 찾은 모든 도움에 대해 얼마나 고맙게 생각하는지 말할 수 없습니다. 다행히 내가 묻는 모든 질문은 다른 사람을 도울 수 있습니다.Twitter 부트 스트랩이 내 이미지 맵을 망쳐 놨습니다 - 누구든지이 문제가 있습니까?

더 많은 사람들이 더 이상 imagemaps를 사용하지 않는다는 것을 깨달았지만 하나의 트위터 부트 스트랩 (버전 3.0.0)이 내 좌표를 망쳐 놓고 있습니다. 장소. 다음 코드를 사용하여 작동하게 만들 수는 있지만 화면에 맞게 크기를 조정할 필요는 없습니다. 어떤 팁? 여기

<style> 
<!Driving me nuts - without this the imagemap links are in the wrong places - with this it wont resize> 
#img_ID { 
    max-width:none; 
    width:auto; 
    display: inline; 

} 

</style>

내가 오히려 이미지 맵보다 좋습니다 HTML 다음과 동반 CSS와 링크입니다 3 명 div를 만들 것

<div style="width:100%"> 
<img id="img_ID" src="NewMatGuide.png" USEMAP="#map" border="0" class="" width:100% alt=""> 
</div> 
<Map id="map_ID" name="map"> 
    <AREA shape="RECT" COORDS="80,151,258,252" HREF="PlacementResults.php?ChosenArea=A"> 
    <AREA shape="RECT" COORDS="80,328,258,432" HREF="PlacementResults.php?ChosenArea=B"> 
    <AREA shape="RECT" COORDS="80,521,258,620" HREF="PlacementResults.php?ChosenArea=C">

출처

2013-10-23 Addameus

링크가 잘못된 방식에 대해 자세히 알려주십시오. 더 나은, 문제를 보여주는 바이올린을 만드십시오 : http://jsfiddle.net – isherwood

참고 : 이미지 크기를 조정하는 데 어려움을 겪을 것이고 MAP는 여전히 그 코 드가 하드 코드되어있어 이미지와 같이 확장되지 않습니다. –

@ RyanMcDonough가 정확합니다. MAP은 크기 조정 된 이미지와 호환되지 않습니다. 그러나 단지 아이디어 : 하드 코딩 된 선언을 건너 뛰고 대신 jquery를 사용하여 화면에서 크기가 조정 된 이미지 크기를 감지 한 다음 픽셀로 변환 된 백분율로 좌표를 계산합니다. 따라서 위쪽 좌표가 4 % 오른쪽이고 11 %가 아래 인 경우 크기 조정 된 크기를 기준으로 위/아래 픽셀의 수를 (대략) 결정할 수 있습니다. 그것은 픽셀에 정확하지 않을 것이지만 가까이 갈 수 있습니다. 나는 다른 어떤 방법도 볼 수 없다. – PhilNicholas

실제 이미지 맵 코드의 조각이다.

<div id="box_a"> 
    <a class="box_link" href="PlacementResults.php?ChosenArea=A"></a> 
</div> 
<div id="box_b"> 
    <a class="box_link" href="PlacementResults.php?ChosenArea=B"></a> 
</div> 
<div id="box_c"> 
    <a class="box_link" href="PlacementResults.php?ChosenArea=C"></a> 
</div>

좌표를 정의하는 데 백분율을 사용하십시오. X 및 X 좌표가 이미지 맵의 링크와 동일하면 다음 예제 (이미지를 실제로 정확하게 커버하는 다른 % s)가 작동해야합니다.

#box_a, #box_b, #box_c { 
    margin-left: 10%; 
    margin-top: 5%; 
    height: 15%; 
    width: 25%; 
} 
.box_link { 
    display: block; 
    height: 100%; 
    width: 100%; 
}

당신은 div 링크를 만드는 방법에 대한 자세한 내용은 this page을 확인해야합니다. 또한 NewMatGuide.png을 background-image으로 사용하고 #img_ID 크기를 정의하는 것이 좋습니다.

출처

2013-10-23 20:55:51 SwankyLegg

Twitter 부트 스트랩이 내 이미지 맵을 망쳐 놨습니다 - 누구든지이 문제가 있습니까?

답변

관련 문제