I am trying to create a semblance of an interactive map, so that when I hover over a selected part of the map, the picture changes:

<body> <script language='javascript'> function changeImage1() { document.map.src = 'map_dfo.png'; } function changeImage2() { document.map.src = 'rus_map.png'; } </script> <img src="rus_map.png" alt="карта россии" usemap="#map" border="0" /> <map name="map"> <area shape="poly" coords="344,147,355,144," href="#" onmouseover='changeImage1()' onmouseout='changeImage2()'>

If you use a script without a <map> , but only with a picture, everything works perfectly. Even if in the script instead of document.map.src ... to substitute document.write ("") - it also works perfectly - when you hover the cursor, the inscription is displayed.

Dear forum users! Tell me, please, what is the error? Why doesn't the map change?

  • TypeError: document.map is undefined - karmadro4

2 answers 2

maybe all due to the fact that you are trying to assign the address of the image map? try this:

  1. set id to image

      <img id="map" src="rus_map.png" alt="карта россии" usemap="#map" border="0" />

  2. change in function:

     function changeImage1() { document.getElementById('map').src = 'map_dfo.png'; }

    Ready-made interactive SVG maps of Russia are on http://fla-shop.com.ru

    • The question is not limited to maps of Russia. - VladD