1

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

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

JS代码：

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

代码：

#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 事件调用为 early，或将 mouseleave 事件调用为 early（任您选择，两者都不起作用）。它有时也不是很敏感，但这与我真正关心的问题不同，因为它在鼠标移动时似乎一个接一个地触发 mouseover 和 mouseout 事件。有没有办法让这不那么混乱？

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

4

2 回答 2

2

我在你的函数中设置了一个断点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通过它看到元素。您可以通过制作图像的副本并使图像映射透明（但 z-index 比 div 高）来做到这一点。基本上，你有 3 层：最下面一层是可见图像；第二个是您的div元素，最上面的一个是图像映射（但完全透明）。标记是这样的：

    <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两个图像放在一起。您会注意到第一个没有图像映射。这不是必需的。这只是为了展示：这是您可以看到的背景图像。第二个是图像映射，但opacity:0使其不可见，并z-index:1000确保它始终位于顶部，即使您稍后由于鼠标悬停事件添加 div 也是如此。所以图像映射仍然具有最高优先级，但它不会隐藏实际图像或将在其后面渲染的 div。

工作示例：

http://jsfiddle.net/eZTV3/

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

于 2012-08-28T10:25:16.237 回答
1

我已将以下内容添加到 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/

hth。

于 2012-08-28T04:32:28.680 回答