<이미지 맵> | |
|
왼쪽에 있는 그림이 바로 이미지 맵을 적용한 그림입니다. 한번 그림위에서 마우스 커서를 이리저리 움직여 보세요. 뭐가 달라지는게 느껴지나요? 어느 부분에 가면.. 손가락모양이 표시되는게 보이시죠? 네~! 바로 이 부분이 링크된 곳입니다. 제가 이곳에 10군데를 링크시켜 놓았는데요. 이렇게 한 이미지 안에 여러개의 링크를 만드는 방법을 "이미지 맵"이라고 한답니다.^^* 바로 이해가 되시죠? |
| 우리는 앞에서 IMG 태그의 여러가지 사용방법을 알아보았습니다. 보시다시피 그렇게 어렵지는 않죠? 이번시간에는 IMG태그의 좀 더 특이한 기능을 알아보려고 하는데요. 바로 이미지 맵(Image Map)입니다. 이미지 맵은 링크의 한 파트입니다. 일반적인 Hyperlink의 경우, 글자나 이미지에 링크를 거는 것이지만 이미지 맵에서는 삽입된 이미지의 일부분에 링크를 걸 수 있어 한 이미지의 부분마다 다른 링크를 줄 수 있다는 점이 아주 특이하답니다. 이미지 맵을 만들때 사용하는 태그는 이미지와 링크를 사용하기때문에 당연히 '이미지태그'와 '링크태그'가 사용됩니다. 단, 이미지태그는 그대로 사용하고, 링크태그는 (a)가 아니라 (area)태그를 사용한다는 점이 약간 다릅니다. |
|
이미지 맵 속성 |
이미지 맵의 형태와 좌표 |
좌표를 지정하는 방법 |
| ||||
|
||||||||
|
|
그럼 실제로 이미지 맵의 핵심인 "Area"태그의 속성에 대해서 알아보겠습니다. "Shape"속성은 이미지 맵을 어떤 모양으로 만들 것인가를 설정하는 것입니다. 이미지 맵은 그림의 특정부분에 링크를 거는 것이므로 이러한 모양(Shape)에는 "Circle(원)","Rect(사각형)", "Polygon(다각형)"이 있습니다. 또한 이러한 여러가지 모양의 맵 위에 어떤 위치에 그려 넣을 것인가를 결정해야 하는데, 이 속성이 바로 "Coords"입니다. Coords속성은 그 맵이 위치할 이미지 안의 좌표값을 설정합니다. 이 Coords속성은 맵이 어떤 형태냐에 따라 속성 값을 가지는 형태가 아래와 같이 조금씩 다릅니다.
|
||||||||
| SHAPE="CIRCLE" | |
|
|
| SHAPE="RECT" | |
|
|
| SHAPE="POLYGON" | |
|
|
| 제가 예전에 이미지맵을 공부할 때, 이 좌표를 지정하는 방법이 어려웠었습니다. 그림의 크기에 맞추어 대충의 x,y좌표를 잡으면 어디에서건 링크가 되겠지만... 구체적으로 내가 원하는 부분에 정확하게 맞추는 방법을 몰랐었는데 오늘에서야 알게되었습니다. 제가 아래의 예를 들어 설명해 드리겠습니다. 좌표를 지정하는 방법은 다 똑같으니 이곳에서는 "Circle"의 예를 들겠습니다. |
" 전지현의 얼굴 부분에 링크를 시켜보겠습니다." | ||
 (그림의 크기 width=385 height=300) |
|
|
|
||
|
|
||
|
|
|
