이미지에 링크를 걸어보자

이미지에 링크를 걸어보자

보통 이미지에 <a herf… 와 같이 전체적으로 태그를 거는 경우는
다들 많이 해봤으리라 생각한다.

하지만 만약, 이미지 전체가 아닌 일부분에 링크를 걸고 싶은 경우가 있을 것이다.
그런 경우엔 image map을 쓰면 된다.

<img src="링크 걸 이미지" usemap="#맵이름">
<map name="맵이름">
<area href="링크 걸 주소"
	shape="링크 걸 영역의 형태"
	coords="영역의 좌표값">
</map>

image.jpg에 링크를 걸고싶다면, 우선 img 태그 안에
usemap 이름을 정해준다. 만약 temp라고 이름을 정했다면
map name=”temp”가 될 것이다.

그리고 영역은 rectangle, circle, polygonal이 가능하다.
각각 rect, circle, poly로 넣어주면 된다.

영역은 조금은 귀찮지만 그 영역의 좌표값을 정확히 알아내야 한다.
웹 포토샵 등을 이용하면 쉽게 알아낼 수 있다. 아니면 그림판도 가능하다.

만약 위 이미지에 지원방법 밑에 있는 링크에 image map을 쓰고 싶다면
다음 하단과 같이 코드를 작성하면 된다.

<img src="/image.jpg" usemap="#Map">
<map name="Map">
<area href="http://hgurl.me/ayo " 
	shape="rect" coords="483,1178,618,1192">
</map>