이미지맵 설정하기, map 태그 사용법
아래의 광고페이지에서 입사지원서를 다운받는 링크를 걸기 위해 html 태그를 아주 오랜만에 찾아보았다. 1차로 아는 지인에게 만들어 달라고 했지만, 수정을 하고 싶은데 금전적 보상도 못하는 입장에 그냥 내가 한번 찾아 보았다. 참 알고보면 쉽지만, 모르면 정말 막막한 세상이다.
간단하게 말한다면 아래 입사지원서를 다운 받기 위해 링크를 만드는 방법은 이미지의 일부분의 좌표를 설정하고, 그 좌표를 클릭하면 링크가 열리도록 하는 방법이다.
이미지는 2차원이다. 2차원은 x축과 y축을 이용하여 모양을 만들 수 있다. 그 좌표의 시작점은 왼쪽, 상단에서 시작하기 때문에 왼쪽 위 가장 구석의 좌표는 x1,y1으로 표시 할 수 있다.
그렇다면 자신이 원하는 링크의 모양을 네모로 한다는 가정을 한다면 원하는 링크의 왼쪽상단 과 오른쪽 하단의 좌표를 표시하면 되는것이다. 그러니 좌표값는 x??,y??,x??,y?? 으로 표시 할 수 있다.
그런데 이 이미지의 좌표값은 내가 원한다고 보여주지 않는다. 이 좌표를 보기 위해선 알씨를 이용하거나 포토샵을 이용하는 방법이 있다.
알씨 하단 상태바를 보면 이미지의 어느 부위에 마우스 포인트를 올려 놓으면 x,y의 좌표값이 표시된다.
포토샵에서 F8키를 누르면 IMFO 부분에 좌표값이 나온다. 단, 설정을 픽셀단위로 하고 보아야 원하는 x,y의 좌표값을 알 수 있다.
그렇다면 이제 html 태그에 어떻게 적용되는지 알아야 한다.
적용 유형은 크게 3가지가 있는데 사각형, 원형, 다각형으로 나눌 수 있다.
유형의 구분
사각형 shape=”rect”
원형 shape=”circle”
다각형 shape=”poly”
사각형 형태로 링크를 위해선 아래의 테그를 적용하면 된다.
<html>
<head>
<title>예제</title>
</head>
<body>
<img src="이미지경로" usemap="#이름">
<map name="이름">
<area shape="rect" coords="x1,y1,x2,y2" href="링크주소">
</map>
</body>
</html>
원형일 경우에는 한지점의 좌표와 그 둘레의 반지름을 입력하면 된다.
<html>
<head>
<title>예제</title>
</head>
<body>
<img src="이미지경로" usemap="#이름1">
<map name="이름1">
<area shape="circle" coords="x1,y1,r" href="링크주소">
</map>
</body>
</html>
다각형인 경우에는 그 꼭지점의 좌표를 입력하면 된다. 좌표의 숫자에 따라 원하는 만큼의 다각형 모양을 만들 수 있다.
<html>
<head>
<title>예제</title>
</head>
<body>
<img src="이미지경로" usemap="#이름2">
<map name="이름2">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5" href="링크주소">
</map>
</body>
</html>
난 사각형 모양을 사용할 예정이지만, 원형, 다각형도 있다고 하니 전체적인 디자인을 바꾸고 싶지만, 다른 할 일도 많고 원하는 디자인으로 하려니 map 테그 외에 또 다른걸 배워야 하는 구나 쩝
'궁금한것들' 카테고리의 다른 글
| 구글(Google) 검색(search) 사용 팁! 쌍따옴표 " ~ " (0) | 2014.08.07 |
|---|---|
| 제 11호 태풍 할롱(HALOMG) 경로, 나크리를 따라서 (0) | 2014.08.04 |
| 태풍 12호 나크리 예상경로 (0) | 2014.07.31 |
| 구글 검색(구글링) 사용 팁! "Defind:" (0) | 2014.07.31 |
| 인류의 미래 화성 이주 프로젝트 (0) | 2014.07.28 |
| SKT 휴대폰인증보호 서비스 (0) | 2014.06.25 |
| [주간운세] 2013년 1월 21일 ~ 2013년 1월 28일 (0) | 2013.01.28 |
| 그녀는 참 이뻐, 그녀는 참 착해보여..타이푼 - 솔비 (0) | 2013.01.22 |
| 한번쯤 우리 집 전기요금은 어떤지 확인을... (0) | 2013.01.17 |
| 허윤미 아시아 모델 시상식 인기상 (0) | 2013.01.16 |
