0

これが私の現在のコードです：

<html>
<head>
<title>Imagemap</title>
<script>
    function swapImageIn(id){
    document.getElementById(id).src='\\C:\Users\idb\Desktop\Websitefinal\usa.png';
    }
    function swapImageOut(id){
    document.getElementById(id).src='\\C:\Users\idb\Desktop\Websitefinal\worldmap_load.png';
    }
</script>
</head>
<body>

<div>
   <img src="\\C:\Users\idb\Desktop\Websitefinal\worldmap_load.png" id="main" alt="" usemap="#worldmap_load" style="border-style:none" />
</div>

<div>
<map id="worldmap_load" name="worldmap_load">
<area shape="poly" alt="USA" coords="77,49,109,23,86,11,0,34,0,78" nohref="nohref" title="USA" onMouseOver="swapImageIn('main')" onmouseout="swapImageOut('main')" />
</map>
</div>

</body>
</html>

mouseover イベントと mouseout イベントを機能させようとしています。それらは現在機能しません。助言がありますか？

編集 - マップの領域にマウスを合わせると、画像が変わります。ただし、イベント「onMouseOver」には到達しません。

4

3 に答える 3

1

これはここで機能します。問題があるのはファイルパスだと思います。(スラッシュを使用)

<!DOCTYPE html>
<html>
<head>
<script>
function swapImageIn(tgtIdStr)
{
    document.getElementById(tgtIdStr).src = "C:/xampp/htdocs/enhzflep/img/img1.png";
}
function swapImageOut(tgtIdStr)
{
    document.getElementById(tgtIdStr).src = "C:/xampp/htdocs/enhzflep/img/img2.png";
}

</script>
</head>
<body>
    <div>
       <img src="file.png" width='200' height='200' id="main" alt="" usemap="#worldmap_load" style="border-style:none" />
    </div>

    <div>
        <map id="worldmap_load" name="worldmap_load">
        <area shape="poly" alt="USA" coords="77,49,109,23,86,11,0,34,0,78" title="USA" onmouseover="swapImageIn('main')" onmouseout="swapImageOut('main')" />
        </map>
    </div>
</body>
</html>
于 2012-10-01T03:26:59.000 に答える
0

必要なもの:

function swapImageIn(id){
    return function() {
    document.getElementById(id).src='\\C:\Users\idb\Desktop\Websitefinal\usa.png';
    }
}
function swapImageOut(id){
    return function() {
    document.getElementById(id).src='\\C:\Users\idb\Desktop\Websitefinal\worldmap_load.png';
    }
}

そしてonmouseoutあるべきですonMouseOut

于 2012-10-01T03:05:52.543 に答える
0

このコードを試してください：

<script>
    function swapImageIn(id){
    document.getElementById(id).src='C:/Users/idb/Desktop/Websitefinal/usa.png';
    }
    function swapImageOut(id){
    document.getElementById(id).src='C:/Users/idb/Desktop/Websitefinal/worldmap_load.png';
    }
</script>

この新しいものを使用してください。

よろしく

于 2012-10-01T03:11:24.773 に答える