html - При наведении курсора на часть карты должна менятся картинка


0

Пытаюсь создать подобие интерактивной карты, так что бы при наведении курсора на выделенный участок карты, менялась картинка:

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

Если использовать скрипт без <map>, а только с картинкой, все работает идеально. Даже если в скрипте вместо document.map.src... подставить document.write("") - тоже работает идеально - при наведении курсора выводится надпись.

Уважаемые форумчане! Подскажите, пожалуйста, в чем ошибка? Почему картика не меняется?

  •  1559
  •  2
  • 10 янв 2012 2012-01-10 11:53:01
TypeError: document.map is undefined — 10 янв 20122012-01-10 11:55:56.000000

2 ответа

0

Готовые интерактивные SVG карты России есть на http://fla-shop.com.ru

Вопрос не ограничен картами России. — 11 янв 20132013-01-11 15:11:22.000000
1

может быть всё из за того что вы пытаетесь присвоить адрес картинки карте? попробуйте так:

  1. задаем id изображению

     <img id="map" src="rus_map.png" alt="карта россии" usemap="#map" border="0" />
    
  2. меняем в функции:

    function changeImage1() {
        document.getElementById(map).src = map_dfo.png;
    }
    
  • 10 янв 2012 2012-01-10 20:20:18