Наведите указатель мыши на область справки с jquery

Question

Я работаю над своим первым фактическим сайтом 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); 
     } 
    ); 
}); 
} 
}); 

Answer 1

I Я также работаю над аналогичным проектом. Вот мой код с объяснением.

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 (в соответствии с областями), я могу установить их с абсолютной позицией. Не забудьте добавить указатели-события: none; к вашим абсолютным элементам, чтобы ни одно из событий, применимых к этим элементам. В противном случае проблема с миганием будет. Надеюсь, это будет полезно для вас.

Обычный автомобиль-изображение. Regular car-image

Наклонный уровень автомобиля (изображение уровня автомобиля с абсолютным положением). On-hover of the car tier(car tier image with absolute position