[펌글]Html - Image Map 이미지맵 태그_좌표값 읽기(coords)
Posted 12 23, 2008 10:48, Filed under: Language/Html## 기본 형식 ##
<img src="bannerImage.gif" usemap="#ImageMap1">
<map name="ImageMap1">
<area shape="rect" coords="26, 161, 195, 195" href="http://develop.sunshiny.co.kr" alt="페이지 이동하기">
</map>
-------------------------------------------------------------
이미지 맵을 지정하는 영역의 모양이 사각형일 경우, 원형일 경우, 다각형일 경우에 따라 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 속성에 값을 넣어주면 해당 범위에 마우스오버시 속성 값이 나타납니다.
출처 페이지에는 이미지와 자세한 설명이 있습니다.
출처 : http://gabriel2007.hosting.paran.com/zbxe/7293
"Language / Html" 분류의 다른 글
| HTML Codes (0) | 2009/12/16 |
| 검색 로봇 제어 (0) | 2009/05/28 |
| Javascript - form 타겟을이용 값을 팝업창으로 넘기기 (0) | 2009/01/08 |
| Div 태그 속성 (0) | 2008/12/25 |
| Html - 페이지 중앙에 해당 링크페이지 레이어 넣기 - div, iframe 태그를 이용 (0) | 2008/12/25 |
Trackback URL : http://develop.sunshiny.co.kr/trackback/58