Question

这个是一个棘手的问题，我感觉它缺乏关于这些图像地图如何工作的知识。反正..

此处显示的问题http://luff.redlinestaging.com/index.php?option=com_content&view=article&id=35

JS CODE：

jQuery(document).ready( function() {
    jQuery.get('map.php?country=canada', function(output) {
        jQuery('#map').html( output );
        addClickMap();
    });
}); 

function showState(e) {
    //console.log( jQuery(this).is(':hidden' ) );
    var title = jQuery(this).attr( 'title' );
    var stateClass = '.' + title;
    jQuery(stateClass).addClass( 'hover' );
}

function hideState(e) {
    //console.log( jQuery(this).is(':hidden' ) );
    var title = jQuery(this).attr( 'title' );
    var stateClass = '.' + title;
    jQuery(stateClass).removeClass( 'hover' );
}

function addClickMap() {
    if( jQuery('#canada') ) {       
        jQuery('#canada area').each( function() {
            //jQuery(this).hoverIntent( showState, hideNav );
            jQuery(this).mouseenter( showState );
            jQuery(this).mouseleave( hideState );
            jQuery(this).click( function( e ) {
                e.preventDefault();
            });
        });
    }
}

CSS代码：

#map {
    width:100%;
}

.map {
    width:100%;
    height:100%;
    position:relative;
}

area {
    position:absolute;
    top:0px;
    left:0px;
    z-index: 1001;
    display:block;
    visibility:visible;
}

.canada {
    background-image:url(/map/map_canada.png);
    background-repeat:no-repeat;
}

.hover {
    display:block !important;
}   

.state {
    position:absolute;
    z-index:2;
    top:0px;
    left:0px;
    display:none;
}

.AB {
    top:375px;
    left:342px; 
}

.BC {
    top: 308px;
    left: 236px;
}

.SK {
    top: 394px;
    left: 406px;
}

.NB {
    top: 550px;
    left: 784px;
}

.MB {
    top: 405px;
    left: 486px;
}

.NT {
    top:198px;
    left: 321px; 
}

.NL {
    top: 380px; 
    left: 765px;
}  

.NU {
    top:-4px;
    left: 397px;
} 

.ON {
    top: 456px;
    left: 535px;
} 

.PE { 
    top: 532px;
    left: 820px;
}

.NS {
    top: 551px;
    left: 811px;
}

.QC {
    top: 364px; 
    left: 655px;
}

.YT {
    top:180px;
    left:243px;
}

Generated HTML dump from PHP for Canada:



    <div class="map canada"> 
        <img src="/map/map_canada.png" usemap="#canada" class="map_canada"/>
                <div class="state AB" style="background-image:url(/map/icons/AB.png); width:107px; height:182px; background-repeat:no-repeat;">
        </div>
            <div class="state BC" style="background-image:url(/map/icons/BC.png); width:143px; height:239px; background-repeat:no-repeat;">
        </div>
            <div class="state MB" style="background-image:url(/map/icons/MB.png); width:112px; height:170px; background-repeat:no-repeat;">
        </div>
            <div class="state NB" style="background-image:url(/map/icons/NB.png); width:56px; height:55px; background-repeat:no-repeat;">
        </div>
            <div class="state NL" style="background-image:url(/map/icons/NL.png); width:170px; height:164px; background-repeat:no-repeat;">
        </div>
            <div class="state NT" style="background-image:url(/map/icons/NT.png); width:189px; height:218px; background-repeat:no-repeat;">
        </div>
            <div class="state NS" style="background-image:url(/map/icons/NS.png); width:83px; height:68px; background-repeat:no-repeat;">
        </div>
            <div class="state NU" style="background-image:url(/map/icons/NU.png); width:372px; height:425px; background-repeat:no-repeat;">
        </div>
            <div class="state ON" style="background-image:url(/map/icons/ON.png); width:207px; height:217px; background-repeat:no-repeat;">
        </div>
            <div class="state PE" style="background-image:url(/map/icons/PE.png); width:39px; height:42px; background-repeat:no-repeat;">
        </div>
            <div class="state QC" style="background-image:url(/map/icons/QC.png); width:216px; height:259px; background-repeat:no-repeat;">
        </div>
            <div class="state SK" style="background-image:url(/map/icons/SK.png); width:97px; height:176px; background-repeat:no-repeat;">
        </div>
            <div class="state YT" style="background-image:url(/map/icons/YT.png); width:118px; height:189px; background-repeat:no-repeat;">
        </div>
        </div>
    <map id="canada" name="canada">
        <area shape="poly" coords="410,552,446,401,500,413,485,568," href="#" title="SK" />
        <area shape="poly" coords="488,568,503,413,552,419,596,463,545,519,542,572," href="#" alt="" title="MB" />
        <area shape="poly" coords="597,466,548,524,546,569,590,589,608,575,641,599,687,629,666,668,700,651,738,619,673,642,691,602,686,589,680,535,655,515,653,485,627,481," href="#" alt="" title="ON" />
    </map>

正如你所看到的那样，它鼠标移动很好，但是将mouseout事件调用到早期，或者将mouseleave事件调用到早期（选择你的选择，都不起作用）。它有时也不是很敏感，但这是一个与我真正关心的问题不同的问题，因为它在鼠标移动时似乎正好发出了鼠标移动和鼠标移动事件。有没有办法让这不那么混乱？

如果无法做到这一点，那么你认为最好的方法是什么？ a）简化设计并使用maphilight b）编写一些非常复杂的功能，根据鼠标位置检测鼠标悬停？我们可能希望将来将自定义图像设计放入每个州/省，因此需要进行完整的图像显示。

Answer 1

我在hideState函数中设置了断点并查看了这些属性：

e.target
e.relatedTarget

第一个是触发事件的元素。正如预期的那样，这就是该地区。对于鼠标进入/退出事件，第二个是鼠标移入的区域。在这种情况下，它是：

<div class="state SK hover" 
    style="background-image:url(/map/icons/SK.png); 
     width:97px; height:176px; background-repeat:no-repeat;">
</div>

所以你有一系列矩形DIV叠加在图像映射的顶部。当您显示DIV时，在鼠标所在的同一区域，它将成为最顶层，因此鼠标退出area并进入导致您遇到问题的div。

为了解决这个问题，您需要确保imagemap始终是最顶层，但您仍然可以通过它看到div元素。您可以通过制作图像的副本，并使图像图像透明（但具有比div更高的z-index）来完成此操作。基本上，你有3层：底层是可见图像;第二个是你的div元素，最上面一个是imagemap（但是完全透明）。标记是这样的：

    <img src="http://luff.redlinestaging.com/map/map_canada.png" 
        class="map_canada" 
        style="position: absolute; left: 0; top: 0">

    <img src="http://luff.redlinestaging.com/map/map_canada.png" 
        usemap="#canada" 
        class="map_canada" 
        style="z-index: 1000; opacity: 0; position: absolute; left: 0; top: 0;">

需要position: absolute才能将两张图片叠加在一起。你会注意到第一个没有imagemap。这不是必需的。这只是为了展示：这是你可以看到的背景图片。第二个是图像映射，但opacity:0使其不可见，z-index:1000确保它始终位于顶部，即使您稍后因鼠标悬停事件而添加div也是如此。因此，imagemap仍然具有最高优先级，但它不会隐藏实际图像或将在其后面呈现的div。

工作示例：

http://jsfiddle.net/eZTV3/

另一种方法是使用ImageMapster这是一个jquery插件为您执行此操作，而无需为每个区域管理备用图像。也就是说，您可以为它提供一个替代图像，它将使用每个相应区域的数据来填充高光。网站上的第一个演示显示了这一点。

Answer 2

我已将以下内容添加到SK：

.SK:hover {
    display:block !important;
    background-image:url("http://luff.redlinestaging.com/map/icons/SK.png"); 
    width:97px; 
    height:176px; 
    background-repeat:no-repeat;
}

如果你查看我的样本，你会发现SK没有这个问题。

http://jsfiddle.net/webwarrior/d2nNN/10/

我仍在试图找出原因......

也许CSS悬停可能最终足够，但加载速度可能会很慢。当我尝试删除Javascript时，CSS悬停没有做任何事情。

这里的“ON”状态也很好用：

http://jsfiddle.net/webwarrior/d2nNN/13/

第h

图像映射奇怪

2 个答案: