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>

使用这个新的。

问候

鼠标悬停和mouseout javascript无法正常工作？

3 个答案: