이미지를 원하는 곳에 위치시킬수 있습니다.(Master) |
 No, 8 이름: Master 홈페이지: http://my.dreamwiz.com/monocafe/ 2005/3/18(금) 조회: 9647 | |
 이미지맵 만들기 <head><title> 이미지맵 만들기 </title> </head> <body> <img src="map.jpg" width="450" height="60" border="0" usemap="#image"> <map name="image"> <area shape="rect" coords="70,25,145,50" href="http://www.naver.com" title="네이버"> <area shape="rect" coords="150,25,220,50" href="http://www.simmani.com" title="심마니"> <area shape="circle" coords="265,35,25" href="http://www.empas.com" title="엠파스"> <area shape="poly" coords="345,10,310,30,325,55,370,55,385,30" href="http://www.hanmir.com" title="한미르"> </map> </body> </html> 소스에서 <img>태그의 속성으로 usemap이 쓰인걸 볼수있습니다. usemap 이란 <img>태그의 src로 불러온 map.jpg를 이미지맵으로 쓴다는 뜻이며 그 이름을 정해주는 겁니다. 이름은 어떤걸 써도 상관없으며 앞에 샵(#)을 붙입니다. 아래 그림은 위의 소스로 이미지맵을 만들었을때 영역(빨간색)과 좌표(노란색)입니다. 영역은 브라우저 상에 나타나지 않습니다. 나머지 속성과 속성값들에 대해 알아보도록하겠습니다. name <map>태그에 쓰이는 속성으로 <img>태그에서 정해준 이름을 가진 이미지를 맵으로 사용한다는 뜻입니다. href 영역으로 지정한 곳을 클릭했을때 출력될 문서나 사이트의 경로를 정합니다. coords 영역의 좌표값을 결정하며, 영역의 모양에 따라 그값의 갯수가 다릅니다. title 영역을 지정한 곳에 마우스를 댈때 나타나는 설명입니다. <img>태그의 alt 속성과 같은 역할을 합니다. shape 영역의 모양을 결정하며 속성값으로 rect(직사각형), circle(원), poly(다각형) 이 있습니다. 각 모양마다 좌표가 어떻게 배열되는지 알아보겠습니다. rect 네개의 값을 갖는데 직사각형의 왼쪽위 꼭지점의 X, Y값과 오른쪽 아래 꼭지점의 X, Y값의 순서로 정렬됩니다. circle 세개의 값을 가지며 순서대로 원 중심점의 X, Y값과 원의 반지름 값입니다. poly 다각형 각 꼭지점의 X, Y값입니다. 위 그림에선 오각형이니까 꼭지점이 다섯개고 열개의 값을 가지고 있습니다. |
     |