Распространение событий Javascript с помощью карты изображений

Question

Я делаю карту изображения карты мира, на которой наведем указатель мыши на разные части Мир должен выделить эту часть мира.

Я делаю это, загружая изображения разных регионов в (изначально) пустое 'div' и размещая их поверх карты мира с помощью css и абсолютного позиционирования. Это работает хорошо, за исключением того, что прозрачные части изображений, которые я кладу на карту мира, в некоторых случаях покрывают другую область, которая не дает указателю мыши проходить через проходящее / выделенное изображение на карту изображения.

Есть ли какой-нибудь способ передать события на карту изображения или я должен использовать совершенно другой подход?

Любая помощь будет принята с благодарностью.

Вот код, показывающий, что я делаю. Сначала вы видите код javascript, который заменяет внутренний HTML-код div'а кодом для изображения, которое необходимо загрузить, чтобы выделить конкретный регион

<script type="text/javascript">

function highlight_map_area(area)
{
switch(area)
{
    case 1:
        document.getElementById("marker").innerHTML='<img src="/media/img/world_map/canada.png" style="position:absolute; z-index:1; left:53px; top:1px;">'
        // ...
        break;
    // Then all the other case statements ...
}
}
</script>

Вот как я загружаю изображение карты (с изображением карты мира)

<div style="position:relative; float:left; margin:10px;">
   <img src=/media/img/world_map/world_map.png width ="699" height ="357" usemap="#world_map">
   <div id="marker">
   </div>
</div>

А вот и сама карта

<map name="world_map">
   <area shape ="rect" coords ="0,0,210,80" onMouseOver="highlight_map_area(1)" alt="Canada" />
   <!-- All the other regions to be selectable... -->
   <area shape ="rect" coords ="563,240,698,356" onMouseOver="highlight_map_area(8)" alt="Australia and South Pacific" />
</map>

Answer 1

Я создал похожее приложение некоторое время назад http://bit.ly/a3BJqA.

Создание трех состояний для каждого изображения региона - по умолчанию, при наведении курсора и в активном состоянии. Используйте css для управления положением каждого региона на карте.

<div id="mapDiv">
    <img src="img_src" name="img1" title="Northern Cape" id="img1">
    <img src="img_src" name="img2" title="Northern Cape" id="img2">
    <img src="img_src" name="img3" title="Northern Cape" id="img3">
    <img src="img_src" name="img4" title="Northern Cape" id="img4">
    <img src="img_src" name="img5" title="Northern Cape" id="img5">
    <img src="img_src" name="img6" title="Northern Cape" id="img5">
    <!-- More images -->
</div>

JavaScript будет выглядеть как функция ниже.

function mapAnimation() {
    var map_images = $$('#mapDiv img'); 

    for (var i = 0; i < map_images.length; i++) {   
        map_images[i].onmouseover = function(){ 
           // mouseover image                     
        };
        map_images[i].onmouseout = function(){                                      
             // default image  
        };
        map_images[i].onclick = function(){ 
           // active image and more actions      
        };                                       
    }
}