CSS를 사용하여 이미지 맵에서 마우스 오버 효과를 어떻게 얻을 수 있습니까?

CSS를 사용하여 이미지 맵 마우스오버 스타일링

대화형 웹페이지를 만들 때 클릭 가능한 영역이 있는 이미지를 포함해야 하는 경우가 많습니다. 일반적으로 이는 이미지 맵을 사용하여 수행됩니다. 그러나 추가 상호 작용을 제공하기 위해 마우스 오버 시 이러한 영역의 스타일을 지정하는 것은 어려운 것으로 입증되었습니다.

과거에는 CSS를 사용하여 이러한 영역의 스타일을 지정하려고 시도했지만 제공된 예에서 알 수 있듯이 제한적인 성공을 거두었습니다.

<img src="/static/imghwm/default1.png" data-src="{main_photo}" class="lazy" alt="locations map" usemap="#location-map">
<map name="location-map">
    <area shape="rect" coords="208,230,290,245" href="%7Bsite_url%7Dlocations/grand_bay_al">
    <area shape="rect" coords="307,214,364,226" href="%7Bsite_url%7Dlocations/mobile_al">
    <area shape="rect" coords="317,276,375,290" href="%7Bsite_url%7Dlocations/loxley_al">
</map>

area { border: 1px solid #d5d5d5; }

CSS 전용 솔루션

다행히도 CSS만 사용하는 간단한 해결 방법이 있습니다.

<div class="area">
<pre class="brush:php;toolbar:false">.area {
    background: #fff;
    display: block;
    height: 475px;
    opacity: 0;
    position: absolute;
    width: 320px;
}
#area2 {
    left: 320px;
}
#area1:hover, #area2:hover {
    opacity: 0.2;
}

이 접근 방식에서는 투명 블록은 이미지 위에 배치되며 각 블록은 클릭 가능한 영역을 나타냅니다. 불투명도를 기본적으로 0으로 설정하고 마우스 오버 시 0.2로 늘리면 미묘한 마우스오버 효과를 얻을 수 있습니다.