HTML 이미지 맵 만들기
이미지맵이란?
:: 문서 내 이미지의 일부 범위만 지정해서 링크를 거는 것.
:: 하나의 이미지의 서로 다른 범위에 서로 다른 링크를 거는 것도 가능하다.
<map> 태그 (MDN)
:: 이미지 맵을 만들때 사용되는 태그
:: map태그의 name 속성과 img 태그의 usemap속성으로 서로 연결한다.
:: id 속성을 사용했다면 name 속성의 값과 id 속성의 값은 서로 같아야 한다.
ex) <map name="m1"> ... </map> <img href="..." usemap="m1">
<area> 태그 (MDN)
:: 이미지맵에서 이미지 내의 범위를 지정하고 링크를 걸 때 사용하는 태그.
:: a태그에 shape 속성과 coords 속성이 추가된 태그라고 생각하면 된다.
-- 범위 지정시 웹페이지 내에서의 이미지로 지정해야한다.
-- 이미지를 확대 혹은 축소했을 경우 좌표가 달라짐에 주의할 것.
:::: shape속성 과 그에 따른 coords 속성
-- 지정할 범위의 모양을 정한다. 정수로만 적어야하며 단위는 px이다.
-- rect : 사각형 모양. 좌상단의 점과 우하단의 점을 지정한다. // coord 형식 : x1,y1,x2,y2
-- circle : 원모양. 원의 중심과 반지름을 지정한다. // coord 형식 : x1,x2,r
-- poly : 다각형 모양. 다각형의 꼭지점쌍을 지정한다. 삼각형이랑 좌표쌍 3개, 5각형이라면 좌표쌍 5개가 필요하다.
-- default : 전체 지정. 이미지 전체를 선택할 때 사용한다. shape속성이 default일 경우 coords 속성은 사용되지 않는다.
-- default가 없다면 이미지의 다른 부분에는 링크가 생기지 않는다.
예시는 깃허브-페이지로 올림.
소스는 페이지 내에서 소스보기를 누르거나 아래의 깃허브에서 볼 수 있다.
ps. 이걸 통해서 포인트 앤 클릭 게임을 만들 수 있을 것 같아서 iframe과 결합한 예제를 짜뒀다.
썸네일용