티스토리 뷰
728x90
반응형
사파리 브라우저에서 이미지맵이 동작하는 않은 경우가 있습니다.
이 예제는 자바스크립트를 통하여 이미지맵이 등록된 이미지의 속성을 변경합니다.
이 예제는 이미지맵을 위한 엘리먼트를 문서에 write 합니다.
위의 두 예제를 실행시키면
IE를 비롯한 다른 브라우저에서는 이미지 맵이 잘 동작하는데
유독 사파리에서만 이미지맵이 동작하지 않는 것을 볼 수 있습니다.
예제를 통해 말씀드리고자 하는 내용은
사파리는 javascript로 작성된 이미지맵이 정상적으로 동작하지 않습니다.
순수 HTML로만 코딩하시면 됩니다.
<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
반응형
'WEB2.0 > 웹표준' 카테고리의 다른 글
input type="text"에 text-align:right 적용시 마우스 커서가 사라질때 (0) | 2010.05.11 |
---|---|
웹페이지 인쇄하기, IE6을 버려라 (2) | 2010.04.12 |
웹접근성 품질마크 인증 유료화를 바라보며 (3) | 2010.03.24 |
프린트시 이용되는 IE용 이벤트 (0) | 2010.02.04 |
이미지에 툴팁 보이지 않게 하는 방법 (2) | 2010.01.13 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 웹표준
- 벤처
- 구글
- 앱
- 소프트웨어
- php
- 아이디어
- 아이폰
- 경진대회
- CSS
- 네이버
- 창업
- 자바스크립트
- 애플
- 공모전
- 어플리케이션
- 대학생
- 안드로이드
- 트위터
- android
- 모바일
- JavaScript
- 스마트폰
- Apple
- 앱스토어
- 게임
- AWS
- iPhone
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함