html 이미지맵 쉽게 생성하는 방법

하나의 이미지에 특정부분 링크를 설정하려면 이미지맵(image map)을 사용해야합니다.

드림위버 프로그램을 사용했을때는 이미지맵 기능이 있어서 쉽게 설정을 했지만,

요즘에는 드림위버를 잘 사용하지않기때문에 이미지맵이 필요할때는 아래 사이트를 주로 사용해서 좌표값을 구합니다.

 

https://www.image-map.net/

Free Online Image Map Generator

1. 초록색버튼 두개 중 하나를 선택하시어 사용하시면 되는데,

select image frome my pc는 내 pc에 저장된 이미지를 불러오는 것이고,

load image frome website는 웹사이트에 업로드된 이미지를 불러오는 것입니다.

 

저는 pc에 저장된 미리 만들어둔 이미지를 불러오겠습니다~

2.이미지를 선택하고 버튼을 누르면 가운데에 불러온 이미지가 노출이되고,

링크를 걸 부분을 마우스로 클릭해서 영역을 잡아주면 됩니다.

shape 부분을 보시면 3가지가 있는데,

Rect 는 사각형 , Poly 는 다각형 , Circle는 원형으로 영역을 잡아준다고 보면 됩니다.

 

영역을 잡고 하단의 Show Me The Code! 버튼을 누릅니다.

 

3. 코드생성 버튼을 누르면 완성된 소스가 나오는데 복사해서 사용하시면 됩니다 :-)

 

※이미지소스에 있는 usemap="#image-map" 이 부분 네임을 변경할 시 꼭 하단의 <map name="image-map"> 부분도 동일하게 맞춰줘야합니다.