Home/ Questions/Q 8610083
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T04:02:41+00:00

Here is my current code: <html> <head> <title>Imagemap</title> <script> function swapImageIn(id){ document.getElementById(id).src=’\\C:\Users\idb\Desktop\Websitefinal\usa.png’; } function

  • 0

Here is my current code:

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

I am trying to get the mouseover event and mouseout event to work. They do not currently work. Any suggestions?

Edit-
When the area of a map is moused over I want an image to change. The event “onMouseOver” is never reached, however.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This works here. I reckon it’s the filepath that’s a problem. (Use forward slashes)

    <!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>
    • 0