링크는 <a href="#"><img src="주소"></a> 이렇게걸수도있고
이미지맵으로 걸 수도 있습니다.
이미지맵
1. 이미지 준비
(더보기 부분을 클릭하면 naver 로 가게 만들어보겠습니다.)
<imagemap.png>
2. 먼저 이미지를 넣어줍니다.
<img src="imagemap.png" usemap="#map" alt="imagemap">
<img src="이미지 주소" usemap="#맵이름" alt="이미지설명">
3.이미지맵을 넣습니다.
<map name="map">
<area shape="rect" coords="139,138,275,182" href="http://naver.com" target="_blank">
</map>
<map name-"맵 이름(2번에서설정한)">
<area shape="링크모양 rect/circle/poly중1개" coords="시작좌표,끝좌표" href="링크주소" target="_blank/_parent/_self/_top중1개">
</map>
링크모양 : rect 네모 / circle 동그라미 / poly 다각형
target : _blank 새창 / _self 자기자신 창에서 링크로 변환 / _top / _parent
4.coords 구하는법
그림판으로 이미지를 불러온 후 링크될 곳의 시작부분과 끝부분의 좌표를 마우스를 이동해서 알아냅니다.
(왼쪽 밑에좌표가나타납니다.)
1번좌표를 먼저 입력하고 그 다음에 2번좌표를 입력합니다.
5. 고럼 요렇게 완료!
<body>
<img src="imagemap.png" usemap="#map" alt="imagemap">
<map name="map">
<area shape="rect" coords="139,138,275,182" href="http://naver.com" target="_blank">
</map>
</body>
[출처] [이미지맵] 이미지맵 이용해서 쉽게 링크걸기|작성자 lovelyh
[출처] [이미지맵] 이미지맵 이용해서 쉽게 링크걸기|작성자 lovelyh
'Programming > HTML/CSS' 카테고리의 다른 글
| text-overflow - 긴 문장 줄여주는 CSS 스타일링 (0) | 2014.09.01 |
|---|---|
| HTML STYLE CSS 인쇄시 페이지 기본 여백 설정하기. (0) | 2014.04.03 |
| 테이블 틀 고정 (0) | 2014.03.05 |
| 안드로이드 div 안에 overflow scroll 먹이기 (2) | 2013.04.19 |
| HTML5 audio api (0) | 2013.04.09 |
