목차
접기
728x90
반응형
이미지 px 좌표 자동 계산 링크 : http://maschek.hu/imagemap/imgmap/
이미지맵 좌표 유동적으로 적용하기.
이미지맵의 coords는 고정적인 px로 동적인 화면을 구현할 때는 유동적으로 크기가 줄어들지 않는다.
이를 해결하기 위한 방법
rwdImageMaps 라이브러리 활용하기.
rwdImageMaps 라이브러리 Github : https://github.com/stowball/jQuery-rwdImageMaps
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
</head>
<body>
<div class="first">
<div class="second con">
<!-- 이미지맵 시작 -->
<img src="logic.PNG" usemap="#imgmap1" />
<map id="imgmap1" name="imgmap1">
<area shape="rect" coords="46,640,1194,858" href="https://www.google.com" target="_blank" />
</map>
<!-- 이미지맵 끝 -->
</div>
</div>
<script type="text/javascript">
// rwdImageMaps로 이미지맵 동적 할당하도록 설정
$('img[usemap]').rwdImageMaps();
</script>
</body>
</html>.first > .second > img {
width: 100%;
}- jQuery를 사용하기 위한 script와 rwdImageMaps 라이브러리를 사용하기 위한 script 총 2개를 head 태그 안에 넣어준다.
- 위의 코드대로 img, map, area 태그를 입력해준다.
- map의 id속성은 입력하지 않아도 된다. (id 속성을 입력하고 name 속성을 입력하지 않으면 그건 안된다.)
name 속성은 필히 img의
usemap과 같은 이름으로 작성해야 한다.
jQuery 라이브러리를 입력해준다.
css의 경우, img를 너비를 정해둔 div 태그 안에 100% 비율로 채우기 위해 css를 위와 같이 작성했다.
이상 😎
728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| 특정 영역을 제외한 선택자를 클릭하는 이벤트 (0) | 2021.04.17 |
|---|---|
| html iframe 사용 방법(유튜브 영상 재생) (0) | 2021.04.14 |
| [ CSS ] opacity, rgba 차이 (0) | 2020.10.21 |
| [ CSS ] box-shadow 속성 사용법 (기초) (0) | 2020.10.16 |
| [ CSS ] box-sizing(border-box, content-box) (0) | 2020.10.16 |