이미지맵에 마우스 오버시 하이라이트 표시 방법
- 설명
- 이미지맵을 이용하여 지도상에 특정 구역을 나누고,
- 마우스오버시 그 구역이 하이라이트되어 표시되는 효과에 관련한 방법입니다. (이미지참조)
- jQuery, maphilight 스크립트를 링크하고,
- 이미지에 이미지맵을 정의하면 끝입니다.
- 참조사이트 : http://davidlynch.org/projects/maphilight/docs/demo_usa.html
- 참조소스 : 아래 소스는 위 참조사이트의 소스 일부를 발췌한 내용입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery maphilight documentation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>
<script type="text/javascript">$(function() {
$('.map').maphilight();
});</script>
</head>
<body>
<h1>The United States of America</h1>
<p>This map generated from <a href="http://en.wikipedia.org/wiki/Image:Map_of_USA_with_state_names.svg">"Map of USA with state names.svg"</a>.</p>
<img class="map" src="demo_usa.png" width="960" height="593" usemap="#usa">
<map name="usa">
이미지 맵 정의
</map>
- 실행 이미지
'홈페이지제작 > 자바스크립트' 카테고리의 다른 글
| jQuery 에서 쿠키 사용 (0) | 2012.08.09 |
|---|---|
| 자바스크립트 iframe 내용에 따라 크기 자동 조절 (3) | 2012.07.15 |
| 자바스크립트 화면의 크기 알아내기, 사용자 모니터의 해상도를 알아내기 (0) | 2012.07.12 |
| jQuery에서 append와 appendTo 의 차이 (0) | 2012.06.18 |
| 숫자 콤마 찍기 (3자리마다) (0) | 2010.10.02 |
