3

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またはJavascriptでこれをどのように達成できるかについての提案はありますか？前もって感謝します。

4

1 に答える 1

4

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") も使用できます。background は、background-repeat、background-position などのオプションを一度に提供します。

css に関する質問については、 http: //www.css4you.de/borderproperty.html を良い参考サイトとしてお勧めします。

于 2012-08-24T19:22:28.903 に答える