이미지맵
이미지 맵은 하나의 그림에 부분적으로 링크를 걸어서 각각 다른 경로로
링크시키는 것을 말합니다.
문서안에 있는 그림의 특정 부분에 여러 개의 하이퍼링크를 걸어주는 <map>
태그이며, 이것은 그림의 여러 위치에 링크를 거는 것이기 때문에 이미지파일에
하이퍼링크를 사용하는 것과는 다릅니다.
이미지 맵에서 사용되는 영역(Area)을 정의하는 형태(Shape)의 속성은 다음과 같습니다.
|
shaoe="rdct" |
사각형 |
|
shaoe="circle" |
원 |
|
shaoe="poly" |
다각형 |
예) imgmap.jpg 라는 그림에 3가지의 형태로 이미지 매핑을 시킨 경우
----------------------------------------------------------------------------------------------------------------
소스)
| <img src="images/imgmap.jpg" usemap="#imagemap1"> <map name="imagemap1"> <area shape="rect" coords="189, 167, 393, 271" href="http://pierload.x-y.net" target="_blank"> <area shape="circle" coords="288, 61, 52" href="http://www.naver.com" target="_blank"> <area shape="poly" coords="137, 20, 169, 20, 209, 128, 35, 103, 65, 21" href="http://kr.yahoo.com" target="_blank"> </map> 실행 결과는 태그 연습장에 해 보시기 바랍니다. 기본적으로 사각형 영역을 사용하지만 좌표숫자를 직접 적어서 맞추는 작업은 좌표맞추기가 매우 까다롭기 때문에 나모웹 에디터나 드림위버 같은 웹 에디터 프로그램으로 쉽게 이미지 맵을 만드는 것을 추천합니다. |
