이미지맵 태그 사용법
<img src="imgmap.gif" alt="imgmap.gif" usemap="#ex" border="0">
<map name="ex">
<area shape="rect" coords="42,41,154,66" href="/01/homepage.php" target="_blank">
<area shape="rect" coords="42,76,152,100" href="/03/html.php" target="_blank">
</map>
- 이미지의 usemap="이름"과 map name="이름"을 통일하게 지정해 줍니다.
- shape="속성값"은 영역의 모양을 의미합니다.
- react : 직사각형
- circle : 원형 모양
- poly : 형 영역
- default : 전체 영역 - coords="정의"는 영역의 좌표를 의미합니다.
- 링크가 없을 땐 nohref로 정의해 줍니다.
이미지맵 태그 만들어주는 사이트
Free Online Image Map Generator
Easy free online html image map generator. Select an image, click to create your areas and generate html your output!
www.image-map.net
이미지맵 반응형 적용방법
https://github.com/stowball/jQuery-rwdImageMaps
GitHub - stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin
Responsive Image Maps jQuery Plugin. Contribute to stowball/jQuery-rwdImageMaps development by creating an account on GitHub.
github.com
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
</head>
<img src="이미지경로" usemap="#image-map">
<map name="image-map">
<area target="" alt="" title="" href="" coords="23,40,364,159" shape="rect">
<area target="" alt="" title="" href="" coords="393,17,570,186" shape="0">
</map>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
'Programming > HTML & CSS' 카테고리의 다른 글
| [HTML] 의미 없는 텍스트를 만들어 주는 사이트 - 로렘 입숨(Lorem Ipsum) (9) | 2024.11.12 |
|---|---|
| 웹 페이지에 구글 지도 삽입하기 (구글맵 삽입 방법, 구글맵 반응형) (0) | 2024.03.18 |
| [CSS] Background의 모든 것 (image, color, size, repeat, position, attachment) (0) | 2024.03.13 |
| [CSS] 기본 css 초기화 하기 (0) | 2024.02.29 |
| [HTML] HTML 자주쓰는 태그, 마크업 (2) | 2024.02.22 |
