공식사이트 & 문서
https://projects.davidlynch.org/maphilight/docs/#maphilight
jQuery maphilight documentation
maphilight applies to images with a 'usemap' attribute, and outlines the areas defined in their map on mouseover. This would hilight every image with a map on the page: $('img[usemap]').maphilight() $.maphilight.defaults The defaults for all uses of maphil
projects.davidlynch.org
데모
https://projects.davidlynch.org/maphilight/docs/demo_usa.html
jQuery maphilight documentation
projects.davidlynch.org
사용법
//특정 영역에만 적용할 경우
$('.mapImg').maphilight()
//모든 맵태그 이미지에 적용할 경우
$('img[usemap]').maphilight()
//options
$('.mapImg').maphilight({
"fill": true,
"fillColor": "000000", // "#"없이 코드만 작성
"fillOpacity" : 0.2
"stroke":true,
"strokeColo"r:"ffaaff",
"strokeOpacity":0.2,
"strokeWidth":1
//...다른 옵션들은 공식사이트에서 확인
})파일
반응형
'웹 개발 > JavaScript' 카테고리의 다른 글
| odometer.js -숫자 카운팅 애니메이션 js 라이브러리 (2) | 2023.05.08 |
|---|---|
| [jquery]rwdImageMaps.js-반응형 이미지 맵 플러그인 (0) | 2023.04.05 |
| [JS]chart.js로 간단한 차트 만들기 (1) | 2022.12.26 |
| [JS]chart.js - 차트만드는 자바스크립트 라이브러리 (0) | 2022.07.12 |
| [JS]three.js - 3D 자바스크립트 라이브러리 (0) | 2022.07.12 |
댓글