글
이미지맵
안녕하세요?
오늘은 이미지맵을 공부해보겠습니다. 이미지맵은 풀이하면 그림지도이지요. 그림을 지도라고 생각하고 지정한 위치를 눌렀을때 그 위치에 해당하는 명령을 실행하는 것입니다. 다음 예를 보시죠.
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<!-- img를 지정하고 usemap="#planetmap"이라고 이미지를 이미지맵으로 사용하게다고 얘기합니다.-->
<map name="planetmap">
<!-- map태그로 이미지맵을 설정합니다 -->
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<!-- shape="rect"는 사각형 영역을 얘기합니다. 그래서 coords즉 좌표 (0,0)-(82,126)의 사각형영역을 눌렀을때 alt설명은 Sun이라는 풍선도움말을 보여주고 href="sun.htm" 링크를 sun.htm으로 해서 클릭했을때 sun.htm파일이 읽어지도록 하는 것입니다. -->
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<!-- shape="circle"은 원모양의 영역으로 중심 90,58 반지름 3인 지점을 클릭하면 mercur.htm파일로 이동을 하게 됩니다. -->
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
<!-- 위와 마찬가지입니다. -->
</map>
</body>
</html>
주석을 보시면 이해가 되시지요? 직접 실행해 보시면 더 이해가 빠를것입니다. 이 소스를 실행하시려면 planets.gif파일과 sun.htm, mercur.htm, venis.htm 파일이 필요합니다.
<planets.gif> 입니다.
sun,,mercur,venis.htm 파일은 직접 작성해서 해보세요~
그럼 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| HTML CSS JQUERY JAVASCRIPT 괜찮은 사이트 발견!! (0) | 2015.04.16 |
|---|---|
| Table frame속성 (0) | 2012.01.03 |
| html style background-color (0) | 2011.12.25 |
| HTML style-1 (0) | 2011.12.22 |
| 인용문 <blockquote> <q> (0) | 2011.12.18 |
