HTML 이미지 맵

<map> 태그는 이미지의 특정 영역을 클릭할 수 있는 부분을 지정한다.

 

<img src="이미지 주소" alt="이미지 대체 텍스트" usemap="#id">

	<map name="id">
		<area shape="rect" coords="22,22, 150, 150" href="링크주소">
		<area shape="circle" coords="260, 223, 77" href="링크주소">
	</map>

 

이지미 맵을 쓰려면 먼저 img 태그 안에 usemap 아이디를 만들어야 한다. id는 #id로 만들면 된다.

예를 들어 #nilgi 이런씩으로 자기 마음대로 #이름을 쓰면 된단다. 오호~ okok.

 

그리고 <map>~</map> 쓰면 된다.

map에 usemap id를 정의하고.

<area> 태그로 영역을 지정하고 링크 태그 주소를 걸면 된다.

area 태그도 닫는 태그가 없다.

 

shape와 coords는 맵 영역의 모양과 크기를 정의한다.

rect : 사각형 / coords : 사각형 크기의 왼쪽 위 시작 점과 오른쪽 아래 끝점.

 

circle : 원형 / coords : 원의 중심 좌표와 반경 지정.

 

이거는 티스토리에서 쓰기 좀 힘들 것 같다. 그지?