[Javascript / 자바스크립트] 강좌 #22 - Image Map ( 이미지 맵 )

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #22 - Image Map ( 이미지 맵 )

케이치 2015. 8. 5. 17:16

자바스크립트 이미지 맵

이미지 맵이란 뭘까요?

아래 예제는 이미지의 특정 영역에 마우스를 올려놓으면 특정 기능이 실행이 되고 클릭을 하면 특정 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

저작자표시 비영리 변경금지