태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

2007.08.20 10:34
※이미지 맵의 형태
사각형(rect) , 원형(circle) , 다각형(poly), 기본형(default)
좌표값을 구할때는 형태마다 각각 그 좌표값을 구하는 방법이 다르다.

 


※ 이미지 맵 태그 ( <map></map> )
 링크태그는 <a>태그가 아니라 <area>태그를 사용합니다.

 
 


<img src="이미지주소" usemap="#맵이름">    ① 이미지 태그 부분.  
<map name="맵이름">      ② 이미지 맵 태그 시작부분.
<area shape="맵종류" coords="좌표값" href="링크될 주소"> ③ 맵 종류, 좌표값, 링크될 곳 설정 부분.
</map>        ④ 이미지 맵 태그 끝 부분.

 


 ① 이미지 태그 부분
 사용될 이미지가 불러주는 곳. 주의 할 점은 뒤에 usemap="#맵이름" 속성을 반드시 넣어주어야 한다는 것. 맵이름은 임의로. 단, 맵이름은 항상 같아야 하며, 가급적이면 영문소문자.

 ② 이미지 맵 태그 시작부분
 이미지 맵 태그는 <map></map> 입니다. 이 부분에서는 위에 ①부분에서 지정해주었던 맵이름을 name="맵이름" 으로 넣어 줍니다.
 주의할 점은 "#" 표시를 빼준다는 것입니다.

 ③ 맵 종류/좌표값/링크주소 설정 부분
  이미지 맵의 형태와 좌표값 / 링크될 주소를 지정

 

 

 

 ▷ 맵 형태 설정
 shape 속성을 사용해 설정 ex) 사각형 맵의 경우 shape="rect", 원형의 경우는 shape="circle"
 

 


 ▷ 좌표값 구하기
 coords 속성을 사용해 설정
 
  ♠ 사각형(rect) 이미지 맵
  사각형 이미지 맵의 좌표값은 4개의 값을 가지게 됩니다. 사각형 왼쪽 상단 꼭지점의 좌표 x1,y1 과 오른쪽 하단 꼭지점 좌표 x2,y2 의 좌표값 설정. <area shape="rect" coords="x1,y1,x2,y2">

 ♠ 원형(circle) 이미지 맵
  원형 이미지 맵의 좌표값은 3개의 값을 가지게 됩니다. 원의 중심부분의 x1,y1 좌표값과 원의 반지름 R 값을 적어주면 되는 거죠.<area shape="circle" coords="x1,y1,R">

 ♠ 다각형(poly) 이미지 맵
  꼭지점 갯수의 두배수의 좌표값을 가진다. ex)5각형 <area shape="polygon" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5">

 

 

 


 ♠ 실제 좌표값 구하기
  좌표값을 구할때 좌표지점의 수치는 해당 이미지의 크기 안에서 구해진다. 즉, 130x60 크기의 이미지가 있다고 한다면 (단위는 pixels) 좌표값은 130x60 크기 안에서 정해지는 것이다.
 ㉠ 그림판 이용하기
  윈도우에 보시면 [시작] -] [프로그램] -] [보조프로그램] -] [그림판] 이 있습니다. 그림판의 메뉴바에서 [파일] -] [열기] 를 선택해서 여러분께서 이미지 맵을 설정해주고 픈 이미지를 불러옵니다. 그리곤 이미지 위에 마우스 포인터를 올려보세요. 그러면 현재 마우스 지점에 대한 x , y 좌표값이 그림판 하단에 나타나게 됩니다.
 
 ㉡ 포토샵 이용하기
  이미지 맵이 사용될 이미지 위에 마우스 포인터를 올리면 [Show info] 창에서 좌표값이 나타난다.기본단위 centimeters. 가운데 + 표시를 마우스로 클릭하면 단위를 Pexels 로 바꿀 수가 있다. 포토샵의 사각형 선택툴을 이용해 이미지 맵을 설정할 부분을 선택해서 해당 꼭지점의 좌표값을 구하면 더 쉽게 이미지 맵의 좌표값을 구할 수 있다.


 

 ♠ 링크될 주소 설정
  <area shape="circle" coords="23,41,15" href="http://www.sp.or.kr"> 이런식으로 해주시면 됩니다.
 
 ④ 이미지 맵 태그 끝 부분
 </map>

'웹표준 > Html' 카테고리의 다른 글

Tag 몇개  (0) 2007.09.19
기본 Tag  (0) 2007.08.24
구글 검색기 달기  (0) 2007.08.21
이미지맵  (0) 2007.08.20
scroll-bar 디자인  (0) 2007.08.14
embed  (0) 2007.08.14
Posted by 고시랑

티스토리 툴바