[HTML] 이미지맵 태그(map, area ) 사용 방법, 쉽게 만들어주는 사이트

이미지맵 태그(map,area)

이미지맵 태그, 즉 html에서의 map태그는 이미지맵을 만드는 태그입니다.

간단하게 이미지파일(jpg, png)에 링크를 걸어주는 태그라고 생각하시면 됩니다 :)

사실, 요즘에는 잘 사용안하는 태그이기도 하고 사용성이 많지는 않지만,

지도같은 복잡한 이미지에는 여전히 잘 사용하고 있기 때문에 알아두면 좋겠습니다.

 

이미지맵 태그 사용법

이미지맵의 태그의 기본 구조는 아래와 같습니다.

<img src="imgmap.gif" alt="imgmap.gif" usemap="#ex" border="0">
	<map name="ex">
 		<area shape="rect" coords="42,41,154,66" href="/01/homepage.php" target="_blank">
 		<area shape="rect" coords="42,76,152,100" href="/03/html.php" target="_blank">
	</map>

1. 이미지의 usemap="이름"과 map name="이름"을 통일하게 지정해줍니다.

2. shape="속성값"은 영역의 모양을 의미합니다.

- react : 직사각형

- circle : 원형 모양

- poly : 형 영역

- default : 전체 영역

3. coords="정의"는 영역의 좌표를 의미합니다.

4. 링크가 없을땐 nohref 로 정의해줍니다.

 

 

 

---

이미지맵 태그 쉽게 만들어 주는 사이트

이미지맵태그의 좌표를 찾는 방법을 여러가지가 있지만 링크요소가 많으면 상당히 노가다이기 때문에,

간단하게 좌표값을 알려주는 사이트를 소개시켜드리겠습니다.

 

www.image-map.net/

바로 image-map 사이트입니다.

상단의 링크로 이동한 뒤

PC에 있는 이미지를 가져올 것 인지, 웹사이트에서 이미지를 가져올건지에 따라 버튼을 눌러줍니다.

저는 PC에 있는 이미지를 가져올 것이기 때문에 'Select Image from my PC' 를 선택해주었습니다.

 

지도 이미지 : 서울정책아카이브

저는 강서구의 이미지 좌표를 가져 올 예정입니다.

shape는 Poly로 선택해주시고, 해당 링크 타이틀, target값을 설정해줍니다.

 

 

그리고 불러온 이미지에 맞게 클릭해주시면 위와 같이 모양이 그려집니다 :)

참 간단하죠!

더 추가해서 작업하실 때는 왼쪽 하단에 있는 Add New Area 버튼으로 추가해주시면 됩니다.

모든 맵 작업이 끝나면 하단에 있는 'Show Me The Code!'버튼을 눌러줍니다.

그럼 위와 같은 팝업창이 뜨며, 바로 사용할 수 있는 html코드가 나옵니다 :)

이렇게 쉽고 간단한 사이트가 무료임에 놀랍네요!

다들 이미지맵태그 작업하실 때 사용해보세요 :)

 

 

[이미지맵 반응형 적용방법]

https://eunyoe.tistory.com/234

이미지맵 반응형 적용 방법