基于图像映射的Javascript事件传播

我正在制作一张世界地图的图像地图，在地图的不同部分移动鼠标 世界应该突出这一部分

我通过将不同区域的图像加载到一个（最初）空的“div”中，并使用css和绝对定位将它们定位在世界地图的顶部来实现这一点。它工作得很好，只是在某些情况下，我放置在世界地图上的图像的透明部分覆盖了另一个区域，从而阻止鼠标悬停事件通过布局/突出显示图像到达图像地图

是否有任何方法可以将事件传递到图像地图，或者我应该采取完全不同的方法

任何帮助都将不胜感激

这里有一些代码来说明我在做什么。 首先，您会看到javascript代码，该代码将“div”的内部HTML代码替换为需要加载以突出显示特定区域的图像的代码

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

功能突出显示\地图\区域（区域）
{
交换机（区域）
{
案例1：
document.getElementById（“标记”）.innerHTML=''
// ...
打破
//然后所有其他的案件陈述。。。
}
}

下面是我如何加载图像地图（带有世界地图的图像）

这是它自己的地图

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

我刚才创建的

为每个区域图像创建三种状态-默认、鼠标悬停和活动。 使用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      
        };                                       
    }
}

函数mapAnimation（）{
var map_images=$$（“#mapDiv img”）；
对于（var i=0；i

谢谢！这个解决方案比我拥有的要好。我还能够通过改变图像的顺序，使小图像不被大图像覆盖，从而做出很大的改进。这种事情很容易被透明图像忽略。

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