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

이미지 지도는 이미지에서 클릭 가능한 영역을 묘사하는 데 사용됩니다. 기본적으로 일반 기하학적 모양으로 나타나는 이러한 영역의 스타일을 지정하면 시각적인 대화형 인터페이스 역할을 할 수 있습니다. 웹사이트 미학에 없어서는 안 될 도구인 CSS를 사용하면 이것이 가능한지 궁금할 수도 있습니다. CSS는 이미지 맵 영역의 스타일을 직접 지정할 수 없지만 원하는 효과를 얻을 수 있는 영리한 해결 방법이 있습니다.

CSS 전용 솔루션:

CSS를 통해 이미지 맵을 조작하는 대안 이미지 위에 클릭 가능한 요소(예: 블록)를 겹쳐 놓는 것입니다. 마우스 오버 시 불투명도 조정과 함께 이러한 요소를 지도 영역과 정확하게 정렬하여 배치하면 이미지 지도 자체의 스타일을 지정하는 시각적 효과를 흉내낼 수 있습니다. 이 접근 방식은 구현을 단순화하고 CSS의 강력한 기능을 더욱 활용합니다.

예:

이 예에서는 두 개의 a 블록이 절대적으로 배치되고 처음에는 불투명도가 0으로 지정되어 보이지 않게 렌더링됩니다. . 이 영역 위로 마우스를 가져가면 불투명도가 0.2로 설정되어 미묘한 오버레이 효과가 나타납니다. 이미지는 배경에 남아 있습니다.