> 웹 프론트엔드 > CSS 튜토리얼 > 이미지 맵에서 마우스 오버 효과의 스타일을 지정하는 데 CSS를 사용할 수 있습니까?

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

Susan Sarandon
풀어 주다: 2024-11-08 04:04:02
원래의
923명이 탐색했습니다.

Can CSS Be Used to Style Mouseover Effects on Image Maps?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿