마우스 오버시 매핑 된 이미지 핫 스폿의 배경 변경

3 개의 다각형 이미지 맵이 있습니다. 실제 이미지 핫스팟은 여러 곡선과 가장자리로 구성된 복잡한 모양입니다.마우스 오버시 매핑 된 이미지 핫 스폿의 배경 변경

<img src="/images/map.gif" alt="HTML Map" 
     border="0" usemap="#map"/> 

<map name="map"> 
    <area shape="poly" 
      coords="74,0,113,29,98,72,52,72,38,27" 
      href="index.htm" alt="area1" /> 

    <area shape="poly" 
      coords="22,83,126,125" 
      href="index.htm" alt="area2" /> 

    <area shape="poly" 
      coords="73,168,32" 
      href="index.htm" alt="area3" /> 
</map>

다른 색상으로 렌더링 된 map_over.gif라는 map.gif의 복제본을 만들었습니다. 내가하고 싶은 것은 마우스를 올리면 map.gif의 클릭 가능한 핫스팟 내에서 영역을 map_over.gif로 변경하는 것입니다. 내가 CSS 또는 자바 스크립트로 이것을 어떻게 달성 할 수 있는지에 대한 제안은 무엇입니까? 미리 감사드립니다.

출처

2012-08-24 dcd0181

a 쉽습니다.

HTML :

<img src="/images/map.gif" alt="HTML Map" border="0" usemap="#map" id="mappedImage" />

CSS :

img#mappedImage:hover { 
    background: url("/images/map2.gif") no-repeat scroll 0 0 transparent; 
}

트릭을 할해야합니다. 배경 이미지 : url ("/ images/map2.gif")도 사용할 수 있습니다. 배경은 배경 반복, 배경 위치 등과 같이 한 번에 더 많은 옵션을 제공합니다.

CSS에 대한 질문은 좋은 예로서 좋은 참고 사이트 인 http://www.css4you.de/borderproperty.html을 추천한다.

출처

2012-08-24 19:22:28

감사합니다. 그것은 그 트릭을 만들었고, 그렇게 간단한 것이 전혀 모릅니다. – dcd0181

당신은 환영합니다. 그러나 대답을 체크하십시오 :) –

마우스 오버시 매핑 된 이미지 핫 스폿의 배경 변경

답변

관련 문제