이미지맵

이미지맵(image map)

이미지맵은 하나의 이미지에 여러개의 링크를 걸때 사용합니다. 이미지맵을 사용하면 HTML 소스가 간단해 지는 장점이 있습니다. <img src="imgmap.gif" alt="imgmap.gif" usemap="#001" border="0"> <map name="001">  <area shape="rect" coords="42,41,154,66" href="/01/homepage.php" target="_blank">  <area shape="rect" coords="42,76,152,100" href="/03/html.php" target="_blank">  <area shape="rect" coords="40,113,150,138" href="/05/html2.php" target="_blank"> </map> 먼저 이미지맵을 적용할 이미지에 usemap 속성을 사용하여 이미지맵의 이름을 지정해 주어야 합니다. <img src="imgmap.gif" alt="imgmap.gif" usemap="#001" border="0"> 001이라는 이름을 가진 이미지맵을 사용하겠다는 의미이니다. 이때 #을 사용함에 주의를 기울여야 합니다. 그리고 나서는 <map>태그를 사용하여 이미지맵을 만듭니다. <map name="001"> ... </map> 이미지맵에서 하이퍼링크의 영역을 지정하기 위해서 <area>태그를 사용합니다. <area>태그의 shape속성은 이미지맵의 형태를 지정합니다. rect(사각형), circle(원형), poly(다각형) 등의 속성값을 가질 수 있습니다. coords속성은 좌표값을 지정합니다. 이미지의 왼쪽 모서리를 기준으로 하이퍼링크 영역의 시작과 끝 부분을 지정합니다. 이 coords속성값을 지정하기가 까다롭습니다. 그래서 이 부분은 텍스트 에디터에서 직접 코딩하지 않고 이미지맵을 생성하는 유틸리티를 사용하는 것이 좋습니다.

이미지맵을 생성할 수 있는 프로그램을 사용하면 이미지상에서 원하는 부분을 하이퍼링크로 쉽게 만들 수 있습니다. * 출처 : homejjang.com   이미지에 사각형,원부분등을 링크를 걸어서 클릭했을때 그 링크대로 이동하게 되는 것을 말합니다.