更改mouseover上映射圖像熱點的背景

Question

我有一個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.gif的一個副本，名爲map_over.gif，它以不同的顏色呈現。我想要做的是將map.gif的可點擊熱點區域內的區域更改爲鼠標懸停時的map_over.gif。有關如何使用CSS或Javascript完成此任務的任何建議？提前致謝。

Answer 1

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; 
} 

應該做的伎倆。您也可以使用background-image：url（「/ images/map2.gif」） - 背景一次提供更多選項，如背景重複，背景位置等。

至於任何有關CSS的問題，我可以推薦http://www.css4you.de/borderproperty.html作爲一個很好的參考網站和很好的例子。