이미지 맵에서 마우스 오버 효과의 스타일을 지정하는 데 CSS를 사용할 수 있습니까?

CSS를 사용하여 이미지 맵에서 마우스오버 효과의 스타일을 지정할 수 있나요?

링크가 포함된 이미지가 포함된 웹페이지를 만들려면 이미지 지도. 그러나 마우스 오버 시 영역 모양의 스타일을 지정하여 상호작용성을 추가하면 사용자 경험이 향상될 수 있습니다. CSS를 사용하여 이것이 가능합니까?

다음 코드를 고려해 보겠습니다.

<img src="{main_photo}" alt="locations map" usemap="#location-map" />
<map name="location-map">
    <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" />
    <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" />
    <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" />
</map>

area { border: 1px solid #d5d5d5; }

시도에도 불구하고 이 코드는 마우스 오버 시 영역 모양의 스타일을 지정하지 못합니다.

CSS 전용 솔루션:

이미지 맵 접근 방식을 사용하는 대신 CSS의 :hover 의사 클래스를 사용하는 대체 방법을 사용할 수 있습니다. 예는 다음과 같습니다.

<div class="area"></div>
<div class="area"></div>
<img src="image.jpg" />

.area {
    background: #fff;
    display: block;
    height: [desired height];
    opacity: 0;
    position: absolute;
    width: [desired width];
}
.area:hover {
    opacity: 0.2;
}

설명:

• 이미지는 맨 아래 레이어에 배치됩니다.
• 두 개의 div 요소는 불투명도가 0인 이미지 위에 절대 위치합니다.
• 이 div 요소 위로 마우스를 가져가면 불투명도가 0.2로 증가하여 뒤에 있는 내용이 드러납니다.

이 방법은 CSS를 사용하여 이미지의 특정 영역에 마우스 오버 효과를 추가하는 간단하고 우아한 방법을 제공합니다.

위 내용은 이미지 맵에서 마우스 오버 효과의 스타일을 지정하는 데 CSS를 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!