[HTML] 이미지맵 (imagemap) 사용법

이미지맵(imagemap)이란? 

html에서 이미지에 부분적으로 링크를 걸때 사용한다.

예를들면 큰 이미지가 있을때 큰 이미지 전체에 링크를 거는것이 아닌

일정 부분에만 링크를 걸고 싶을때 사용합니다.

 

구조

<img src="경로" usemap="#이미지맵이름">
<map name="이미지맵이름">
    <area shape="rect" coords="좌표주소" href="링크주소" target="_blank">
</map>

위는 이미지맵 구조인데, 주의할 점은 이미지의 usemap과 map태그의 name값을 맞춰 주어야 합니다.

 

 

이미지맵 좌표 얻는 방법

 

저는 이미지맵 해당 사이트를 이용하는데요, 포토샵, 그림판등으로 좌표를 얻을수 있지만 번거롭고 불편하더라구요. 

밑에 사이트로 편하게 좌표를 얻어 올수 있습니다.

http://maschek.hu/imagemap/imgmap/

maschek.hu - Online Image Map Editor

사이트 사용방법

사이트에 접속하시면 위와 같은 화면이 나오는데, 파일선택 하셔서 이미지 선택해주시고, upload 클릭 후 업로드 되면 옆에 accept 클릭하시면 됩니다.

 

잘따라하셨으면, 이미지가 업로드 되서 보이게 되는데요 이제 링크를 걸어줄 좌표를 지정해줍니다.

 

클릭하면 네모칸이 저절로 만들어지는데, 한번더 클릭해서 네모칸을 종료시켜 줍니다.

그이후에 code부분을 클릭하면 밑에 map 부분을 생성해줍니다.

map부분 복사해서 가져옵니다.

 

 

 

<img src="image/jade.jpg" usemap="#imgmap2022930161914">
<map id="imgmap2022930161914" name="imgmap2022930161914">
<area shape="rect" alt="" title="" coords="89,5,294,55" href="" target="" />
<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>

위 처럼 usemap과 name 값을 맞춰주면 이미지맵 끝입니다.!