학습(공부)하는 블로그 :: '이미지 맵' 태그의 글 목록
 

 

Notice»

Recent Post»

Recent Comment»

Recent Trackback»

03-19 10:55

 

'이미지 맵'에 해당되는 글 1

  1. 2013.02.06 19. 이미지 맵(map) 만들기
 
반응형

1. 이미지 맵의 기본개념


○ 이미지 맵(map)

이미지를 여러 영역으로 나누어 각각에 서로 다른 웹 페이지를 링크시킨 것. 즉 이미지의 특정부분에 링크를 연결시키는 것

- 하나의 이미지에 부분별로 영역을 지정하여 서로 다른 사이트로 링크 시킬 수 있음


○ 이미지 맵의 기본형식


<img src="이미지 주소" usemap="#맵이름"> ①이미지 부분 

<map name="맵이름">             ②이미지 맵 태그 시작부분 

<area shape="맵형태" coords="좌표값" href="링크될 주소"> ③맵 종류,좌표값,링크될 곳 설정부분 

</map> 


①이미지 부분이미지맵이 사용 될 이미지가 불려지는 곳. 주의 할 점은 뒤에 usemap="#맵이름" 속성을 반드시 넣어 주어야 한다. 맵이름은 항상 같아야 하며, 가급적이면 영문 소문자로 정해주는 것이 좋다. 웹페이지의 파일명을 만들 때도 마찬가지로 영문소문자로 정해주시면 좋다. 한글로 해도 되긴 하지만 인터넷이 원래 영문권 나라에서 만들어진 것이기에 한글로 해 놓으면 브라우져가 가끔씩 인식을 못하는 경우가 있기 때문

②이미지 맵 태그 시작부분본격적으로 이미지맵 태그가 시작되는 부분. 여기서 맵이름은 ①부분에서 지정해주었던 맵이름을 넣어주면 됨.('#' 표시는 반드시 빼야됨)

③맵종류,좌표값,링크될 곳 설정부분여기에서는 이미지맵의 형태와 좌표값 링크될 주소를 지정

· 맵의 형태 : "shape" 속성을 사용. 사각형(rect)/원형(circle)/다각형(poly)

· 좌표값 : "coords" 속성을 사용

· 링크될 곳 : 링크될 곳을 설정할 때는 target=_blank 속성을 넣어 새 창에 열리도록 배려



2. 좌표값

 

○ 좌표값 입력하는 법

사각형(rect) : 왼쪽 상단 좌표(x1,y1)과 오른쪽 하단 좌표(x2,y2)를 순서대로 기재

<area shape="rect" coords="x1,y1,x2,y2"> ☜ 이런 형식

원형(circle) : 중심좌표(x1,y1)과 반지름(R)을 순서대로 기재

<area shape="circle" coords="x1,y1,R"> ☜ 이런 형식

다각형(poly) : 왼쪽 상단의 좌표에서 시작해서 시계방향으로 각 꼭지점의 좌표를 순서대로 기재

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5"> ☜ 이런 형식


○ 좌표값 구하는 방법 : 그림판을 활용





반응형

'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

20. 멀티미디어 활용하기  (0) 2013.02.07
18. 폼(form) 만들기(2)  (0) 2013.02.06
17. 폼(form) 만들기(1)  (0) 2013.02.06
16. 인라인 프레임(iframe) 만들기  (0) 2013.02.05
15. 프레임(frame) 만들기(2)  (0) 2013.02.05
: