Mouseover和Mouseout JavaScript無法正常工作？

Question

這是我當前的代碼：

<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”。

Answer 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>

Answer 2

你需要：

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

Answer 3

試試這個代碼：

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

使用這個新的。

問候

Mouseover和Mouseout JavaScript無法正常工作？

問題描述

3 個解決方案

解決方案1
1 已采納 2012-10-01 03:26:59

解決方案2
0 2012-10-01 03:05:52

解決方案3
0 2012-10-01 03:11:24

Mouseover和Mouseout JavaScript無法正常工作？

問題描述

3 個解決方案

解決方案1 1 已采納 2012-10-01 03:26:59

解決方案2 0 2012-10-01 03:05:52

解決方案3 0 2012-10-01 03:11:24

解決方案1
1 已采納 2012-10-01 03:26:59

解決方案2
0 2012-10-01 03:05:52

解決方案3
0 2012-10-01 03:11:24