js 이미지맵 & 맵하이라이트

맵하이라이트(maphilight.js)

<script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>

$.fn.maphilight.defaults = {
    fill: true,  //이미지맵 링크에 마우스가 올라오면 색을 넣을 건지 여부
    fillColor: 'ffffff',  // 색상지정
    fillOpacity: .2,  // 투명도 지정 0~1
    stroke: true,    // border를 넣을건지 여부 false로 설정하면 이하 옵션 무시됨
    strokeColor: 'ffffff',  //border 색상
    strokeOpacity: 1,  //border 투명도
    strokeWidth: 1  //border 폭
}
$('img[usemap]').maphilight(); // 위에 설정값 넣고 맵하이라이트 적용해줘야 적용됐다.;

 

탭에 마우스 오버시 이미지맵에 하이라이트 들어오도록

$('.business .tab li').hover(function(){
    let i = $(this).index();
	$('.business map area').eq(i).mouseover();
}, function(){
    $('.business map area').mouseout();
});

---

이미지맵 참고

https://yesm1230.tistory.com/44

[html]이미지맵 img-map