이미지 맵이란 뭘까요?
아래 예제는 이미지의 특정 영역에 마우스를 올려놓으면 특정 기능이 실행이 되고 클릭을 하면 특정 URL로 이동시켜주도록 되어있습니다.
소스를 보시면 <map>과 <area>태그가 사용된 것이 보이는군요.
<area>에서는 영역을 지정해주고 영역내에서 일어나는 이벤트에 대해서 어떤 기능을 실행할지 지정해주고 있습니다.
그리고 이 태그들을 <map>태그가 감싸고 있는 형태군요.
실행해보시면 이해가 잘 될겁니다.
<area>태그에서 coords는 영역을 나타내는 포지션을 말합니다.
poly에서는 연속되는 두개의 숫자가 한 점의 위치를 지정해줍니다.
아래 예제에서는 10개의 숫자가 있으니 총 5개의 점으로 표현되겠군요.
rect에서는 사각형을 그리기위한 네개의 숫자가 필요합니다.
가장 왼쪽 아래의 점의 좌표와 그 점의 대각선에 위치한 점의 좌표겠죠.
circle에서는 원을 나타내기위한 세개의 숫자가 있네요.
중심점 좌표(숫자 2개)와 반지름의 값인 것 같네요.
좌표를 하드코딩하지 않는 방법을 생각해서 구현하면 쓸만할 것도 같네요.
<html>
<head>
<title>Using JavaScript Image Map</title>
<script type="text/javascript">
<!--
function showTutorial(name){
document.myform.stage.value = name
}
//-->
</script>
</head>
<body>
<form name="myform">
<input type="text" name="stage" size="20" />
</form>
<!-- Create Mappings -->
<img src="/images/usemap.gif" alt="HTML Map"
border="0" usemap="#tutorials"/>
<map name="tutorials">
<area shape="poly"
coords="74,0,113,29,98,72,52,72,38,27"
href="/perl/index.htm" alt="Perl Tutorial"
target="_self"
onMouseOver="showTutorial('perl')"
onMouseOut="showTutorial('')"/>
<area shape="rect"
coords="22,83,126,125"
href="/html/index.htm" alt="HTML Tutorial"
target="_self"
onMouseOver="showTutorial('html')"
onMouseOut="showTutorial('')"/>
<area shape="circle"
coords="73,168,32"
href="/php/index.htm" alt="PHP Tutorial"
target="_self"
onMouseOver="showTutorial('php')"
onMouseOut="showTutorial('')"/>
</map>
</body>
</html>
실제 동작하는 모습은 tutorialspoint 사이트에서 확인 가능합니다.
Reference : http://www.tutorialspoint.com/javascript/javascript_image_map.htm
| [jQuery] 라디오 버튼/ 체크박스 해제하기 (0) | 2021.01.18 |
|---|---|
| HTML checkbox를 이용한 토글 버튼에 자바스크립트로 기능 넣기 (소스코드포함) (0) | 2019.07.10 |
| [Javascript / 자바스크립트] 강좌 #21 - Navigator ( 브라우저 판별/구분하기 ) (0) | 2015.08.05 |
| [Javascript / 자바스크립트] 강좌 #20 - Multimedia ( 멀티미디어, 음악, 동영상 ) (0) | 2015.08.05 |
| [Javascript / 자바스크립트] 강좌 #19 - Animation ( 애니메이션 ) (0) | 2015.08.05 |