티스토리 뷰

728x90
반응형
사파리 브라우저에서 이미지맵이 동작하는 않은 경우가 있습니다.


<img id="changeImage" src="1.jpg" border="0" usemap="#Map1" />
<map name="Map1" id="Map1"><area shape="rect" coords="50,100,150,200" href="http://naver.com" /></map>
<map name="Map2" id="Map2"><area shape="rect" coords="0,0,100,150" href="http://google.com" /></map>
<script type="text/javascript">
document.getElementById("changeImage").src = "2.jpg";
document.getElementById("changeImage").useMap = "#Map2";
</script>



이 예제는 자바스크립트를 통하여 이미지맵이 등록된 이미지의 속성을 변경합니다.



<div id="changeImage">
</div>
<script type="text/javascript">
document.getElementById("changeImage").innerHTML = "<img src=\"2.jpg\" border=\"0\" usemap=\"#Map\" /><map name=\"Map\" id=\"Map\"><area shape=\"rect\" coords=\"0,0,100,150\" href=\"http://naver.com\" /></map>";
</script>



이 예제는 이미지맵을 위한 엘리먼트를 문서에 write 합니다.




위의 두 예제를 실행시키면

IE를 비롯한 다른 브라우저에서는 이미지 맵이 잘 동작하는데

유독 사파리에서만 이미지맵이 동작하지 않는 것을 볼 수 있습니다.



예제를 통해 말씀드리고자 하는 내용은

사파리는 javascript로 작성된 이미지맵이 정상적으로 동작하지 않습니다.

순수 HTML로만 코딩하시면 됩니다.
728x90
반응형
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함