이미지 맵을 지정하는 영역의 모양이 사각형일 경우, 원형일 경우, 다각형일 경우에 따라 coords속성의 좌표값이 달라진다.

 

**이미지 맵을 지정하는 영역의 링크 모양이 사각형일 경우**

형식

<area shape="rect" coords="좌측상단의 가로좌표, 좌측상단의 세로좌표,우측하단의 가로좌표,우측하단의 세로좌표" href="링크하여 이동하게 되는 html문서의 파일명">

 


<area shape="rect" coords="x1,y1,x2,y2" href="링크할 주소">

 

**이미지 맵을 지정하는 영역의 링크 모양이 원형일 경우**

형식

<area shape="circle" coords="원중심의 가로좌표,원중심의 세로좌표,원의 반지름" href="링크하여 이동하게 되는 html문서의 파일명">


<area shape="rect" coords="x1,y1,x2,R" href="링크할 주소">
 
**이미지 맵을 지정하는 영역의 링크 모양이 원형일 경우**
형식
<area shape="poly" coords="다각형 꼭지점의 가로좌표1, 다각형 꼭지점의 세로좌표1,다각형 꼭지점의 가로좌표2, 다각형 꼭지점의 세로좌표2,다각형 꼭지점의 가로좌표3, 다각형 꼭지점의 세로좌표3,다각형 꼭지점의 가로좌표4, 다각형 꼭지점의 세로좌표4,..."
href="링크하여 이동하게 되는 html문서의 파일명">

 
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5" href="링크할 주소">
 
좌표값은 포토샵, 페인트샵, 그림판을 이용하여 값을 읽을 수 있다.
 

 





부분적인 링크는 map 태그를 사용합니다.

img 태그의  usemap 속성의 값을 map의 name속성 값에 #을 붙여서 넣어줍니다.

area태그로 링크를 걸 그림의 범위를 설정해 줍니다.

href속성에 링크를 걸 URL(주소)를 넣어줍니다.

범위는 픽셀단위의 왼쪽위로부터의 좌표이고

앞에 둘은 왼쪽위 모서리 좌표

뒤에 둘은 오른쪽아래 모서리 좌표 입니다.

 

추가로 area태그의 alt 속성에 값을 넣어주면 해당 범위에 마우스오버시 속성 값이

나타납니다.

 

<img src="test.gif" border="0" usemap="#Map">
<map name="Map">

<area shape="rect" alt="클전서버" coords="18,93,104,125" href="http://suddenattack.netmarble.net/channel/GameExecute.Asp?game=suddenattack&ServerIP=220.95.226.133&ServerPort=12000">

<area shape="rect" coords="16,129,131,157" href="">

<area shape="rect" coords="18,160,255,195" href="">

</map>
이 게시물을..
profile