이미지 파일로 이미지맵 만들기..

 이미지 파일로 이미지맵 만들기..

<img src="../images/abc06.jpg" usemap="#image-map01">

//위와 우선 이미지맵에 사용할 이미지 파일을 준비한다. 또한 이 이미지 파일을 아래와 같이 이미지 영역을 정하여 이미지맴으로 사용하겠다고 정의해 준다.

//아래와 같이 이미지맵으로 사용할 이미지 영역을 지정해 준다. 사각형의 경우 좌상단의 X,Y좌표와 우하단의 X,Y좌표를 알면 된다.

<map name="image-map01"> //위 이미지를 이미지맵으로 사용하겠다는 의미다.

<area shape="rect" coords="49,93,390,246" href="../images/ABC01" target="_blank" value="blur": onfocus="this.blur()":> //이미지파일의 특정 영역을 지정하여 이미지맵을 만든다.

<area shape="rect" coords="435,93,779,246" href="../images/ABC02" target="_blank" value="blur": onfocus="this.blur()":>

<area shape="rect" coords="822,93,1163,246" href="../images/ABC03" target="_blank" value="blur": onfocus="this.blur()":>

...

...

중략

...

</map>

*참조:

좌표 찾는 법: 그림판에서 그림 파일 열기 > 사각형의 경우 좌상단과 우하단의 XY좌표를 찾을 수 있음.

value="blur": 이미지맵 마우스 올렸을 때 선 없애기

onfocus="this.blur()": 이미지맵 클릭 했을 때 선 없애기

포토샵으로 이미지맵 만들기

https://blog.naver.com/parangbee/80112844517