HTML/Javascriptリージョン上に画像を重ねる

Question

私はページ上に画像を持っており、その画像に対応する画像マップを持っています。また、対応する2つの画像があります。画像マップの特定の領域がマウスオーバーされたときに、その画像上にオーバーレイする。どのように私はそれをやって行くだろうか、これは私がCSSで達成することができるか、それともJavaScriptが必要でしょうか？

Answer 1

あなたは、すべてのブラウザがの擬似クラスをサポートしているわけではないので、JavaScriptが必要だと思います。<a>以外の要素については、擬似クラスを使用してください。あなたは最小限のJavascriptでそれを行うことができるはずです。

：あなたはオーバーレイ画像（image2.png）を有効にするために、あなたの画像の左上にある100ピクセルの四角形（image1.png）で100マウスオーバーする場合は、例えば、 http://www.w3schools.com/tags/tag_map.asp

：<map>タグを参照してください。

<script type="text/javascript"> 
    function area1_mouseover() { 
     document.getElementById('image2').style.visibility = 'visible'; 
    } 
    function area1_mouseout() { 
     document.getElementById('image2').style.visibility = 'hidden'; 
    } 
</script> 
<img src="image2.png" id="image2" style="position: absolute; visibility: hidden; z-index: 2;" usemap="#my_map" /> 
<img src="image1.png" id="image1" usemap="#my_map" /> 
<map name="my_map"> 
    <area shape="rect" coords="0,0,100,100" onmouseover="area1_mouseover();" onmouseout="area1_mouseout();" /> 
</map> 

編集：地図をすべての画像に適用すると、すべて同じサイズなので、問題を解決するはずです。