使用 jquery 悬停地图区域精灵

我正在开发我的第一个实际的 WordPress 网站，但我在使用 jquery 时遇到了一些问题。我真的希望有人能在这里帮助我。

所以我想做的是根据当前悬停的地图区域来定位我的 div 背景。

我在这里找到了一个例子：http://ubytujnaslovensku.sk/sk/

我得到了什么： HTML：

<div id="front-cubus-wrapper">
        <div id="front-cubus"></div> 
        <div id="front-cubus-hover" style="background-position: 0px 0px;" ></div> 
        <img alt="cubus" src="/wp-content/uploads/2013/10/cubus_index_blanko.png"  usemap="#map"/>
            <map id="map" name="map">
              <area title="Communication" alt="Communication" shape="poly" coords="119,101,286,34,347,55,180,124" href="#">
              <area title="Governance" alt="Governance" shape="poly" coords="59,79,228,17,281,34,115,99" href="#">
              <area title="Leadership" alt="Leadership" shape="poly" coords="55,78,223,16,173,2,3,58" href="#">
              <area title="Strategy" alt="Strategy" shape="poly" coords="179,127,2,61,6,133,179,207" href="#">
              <area title="Implementation" alt="Implementation" shape="poly" coords="179,212,6,138,9,206,180,286" href="#">
              <area title="Operation" alt="Operation" shape="poly" coords="180,290,9,210,12,278,179,362" href="#">
              <area title="Corporate" alt="Corporate" shape="poly" coords="182,126,225,110,223,341,183,359" href="#">
              <area title="Business units" alt="Business units" shape="poly" coords="230,108,271,91,265,319,228,340" href="#">
              <area title="Business functions" alt="Business functions" shape="poly" coords="275,89,313,73,305,294,268,317" href="#">
              <area title="Potential partner" alt="Potential partner" shape="poly" coords="315,71,351,55,342,272,308,292" href="#">
            </map>
    </div>

CSS

#front-cubus-wrapper{
width:355px;
height:365px;
position:relative;
}

#front-cubus{
width:355px;
height:365px;
position: absolute;
background-image:url(images/insighttoimprove_website_cubus_index.png);
z-index:1;
}

#front-cubus-hover{
width:355px;
height:365px;
position: absolute;
background-image:url(images/insighttoimprove_website_cubus_index_hover.png);
background-repeat:no-repeat;
z-index:2;
}

#front-cubus-wrapper img{
position:absolute;
width:355px;
height:365px;
z-index:3;
}

Jquery:

jQuery(document).ready(function($){

var default_value = $("#front-cubus-hover").css("background-position");
if (default_value === "0px 0px") {
$('#map area').each(function() {

    $(this).hover(
        function() {
            var yposition = -1*365*($(this).index()+1); 
            $("#front-cubus-hover").css("background-position","0 "+yposition+"px"); 
},
        function() {
            $("#front-cubus-hover").css("background-position",default_value);
        }
    );
});
}
});

我也在从事类似的项目。这是我的代码和解释。

HTML

<img src="images/car.jpg" alt="car" usemap="#carmap" width="1100px" height="700px" /> 
<map name="carmap">
    <area shape="rect" coords="0,0,200,150" alt="door" href="#" class="door1">
    <area shape="rect" coords="453,404,533,704" alt="door" href="#" class="door2">
</map>

<div class="door1"></div>

<div class="door2"></div>

CSS

img{
    position: relative;
}

div.door1{
    width: 200px;
    height: 150px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background: blue;
    pointer-events:none;  
}

div.door2{
    width: 180px;
    height: 300px;
    position: absolute;
    left: 453px;
    top: 404px;                
    background: url("images/tire-modified.jpg") no-repeat left top;
    pointer-events:none;  
    border-radius: 50%;
}

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){

        $("div.door1").hide();
        $("area.door1").mouseenter(function(){
            $("div.door1").show();
        });

        $("area.door1").mouseleave(function(){
            $("div.door1").hide();
        });

        $("area.door2").mouseenter(function(){
            $("div.door2").show();
        });

        $("area.door2").mouseleave(function(){
            $("div.door2").hide();
        });

    });
</script>

因此，首先我将图像设置为相对位置，并在图像上设置两个区域的地图。现在，在该地图悬停部分上，我绑定了 mouseenter 和 mouseleave 事件，以便我可以设置其他 div（根据区域），我可以使用绝对位置设置它们。不要忘记添加指针事件：无；到您的绝对元素，以便没有任何事件适用于这些元素。否则就会出现闪烁问题。希望对您有所帮助。

常规汽车图像。常规汽车图像

汽车层悬停（具有绝对位置的汽车层图像）。汽车层悬停（具有绝对位置的汽车层图像