이미지의 맵 - 1
※ 이미지 맵의 정의
이미지 맵이란 하나의 이미지의 일부분에 링크를 시키는 것을 말합니다. 그러니깐 지금까지는 이미지를 링크로 이용할 때는 그냥 이미지 전체가 링크 되었잖아요^^ 근데 이미지맵은 하나의 커다란 이미지에 영역을 나누어서 여러 개의 링크를 시킬 수 있는 방법이죠^^ 일단 예제를 하나 볼까요?
|
| ||
| 위에 이미지가 보이시죠? 광수가 무언가 열심히 생각을 하고 있는데요..^^ 옆에 이미지에 마우스를 대보면 링크가 되어 있는 곳이 있을 것입니다. 그런데 지금까지는 다르게 이미지 전체가 하나로 링크되어 있는 것이 아니라 부분 부분 링크가 되어 있다는 것을 알 수 있을 것입니다. ^^ 에궁 -_-;; 어디가 링크되어 있는 줄 모르겠다구요? 에궁 잘 좀 찾아보세용~~~ | ||
| 어때요? 확인해보시니깐 이미지맵이란게 어떤 건지 알겠죠? ^^ 그럼 이제 본격적으로 이미지 맵에 대해서 배워보도록 하겠습니다. | ||
※이미지 맵의 형태
이미지 맵의 형태는 4가지로 나누어 집니다. 사각형(rect) , 원형(circle) , 다각형(poly), 기본형(default)으로 나누어 지는데 단순히 이미지 맵의 모양에 따라 분류된 것이지만 좌표값을 구할때는 형태마다 각각 그 좌표값을 구하는 방법이 다르답니다.
※ 이미지 맵 태그 ( <map></map> )
이미지 맵을 만들 때 사용하는 태그는 당근 이미지와 링크를 사용하기 때문에 이미지태그와 링크태그가 사용됩니다. 단 이미지태그(img태그)는 그대로 사용되는데...링크태그는 <a>태그가 아니라 <area>태그를 사용합니다. 일단 이미지 맵이 어떤 태그에 의해서 어떻게 만들어 지는지 그 구조를 살펴보도록 하겠습니다.^^
| <img src="이미지주소" usemap="#맵이름"> | ① 이미지 태그 부분. |
| <map name="맵이름"> | ② 이미지 맵 태그 시작부분. |
| <area shape="맵종류" coords="좌표값" href="링크될 주소"> | ③ 맵 종류, 좌표값, 링크될 곳 설 정 부분. |
| </map> | ④ 이미지 맵 태그 끝 부분. |
① 이미지 태그 부분
이미지 맵이 사용될 이미지가 불러주는 곳입니다. 주의 할 점은 뒤에 usemap="#맵이름" 속성을 반드시 넣어주어야 한다는 것입니다. 맵이름은 여러 분 맘대로 정해서 넣어 주시면 됩니다. 단, 맵이름은 항상 같아야 하며, 가급적이면 영문소문자로 정해주시기 바랍니다. 웹페이지 파일명 만들때도 마찬가지인데.... 한글로 해도 되긴 되는데 인터넷이란게 원래 영문권 나라에서 만들어진 것이기에 한글로 해놓으면 브라우저가 가끔식 인식을 못하는 경우가 있기 때문입니다.
② 이미지 맵 태그 시작부분
본격적으로 이미지 맵 태그가 시작되는 부분입니다. 이미지 맵 태그는 <map></map> 입니다. 이 부분에서는 위에 ①부분에서 지정해주었던 맵이름을 name="맵이름" 으로 넣어 줍니다. 이건 이미지와 이미지 맵태그를 서로 연결시켜주는 역할을 하기 때문에 아주 중요합니다. 반드시 같은 맵이름을 넣어주어야 하고요... 주의할 점은 "#" 표시를 빼준다는 것입니다.
다음 페이지에서 계속 설명드리도록 하겠습니다....... go! go!
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
