使用 jquery 悬停地图区域精灵 [英] Hover map area sprite with jquery
本文介绍了使用 jquery 悬停地图区域精灵的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发我的第一个实际的 wordpress 站点，但在使用某些 jquery 时遇到了一些麻烦.我真的希望有人能帮助我.
所以我想做的是根据当前悬停的地图区域定位我的 div 背景.
我在这里找到了一个例子:http://ubytujnaslovensku.sk/sk/
我得到了什么:HTML:
<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="业务单位" alt="业务单位" shape="poly" coords="230,108,271,91,265,319,228,340" href="#"><area title="业务功能" alt="业务功能" shape="poly" coords="275,89,313,73,305,294,268,317" href="#"><area title="潜在合作伙伴" alt="潜在合作伙伴" shape="poly" coords="315,71,351,55,342,272,308,292" href="#"></地图>CSS
#front-cubus-wrapper{宽度:355px；高度:365px；位置:相对；}#front-cubus{宽度:355px；高度:365px；位置:绝对；背景图像:url(图像/洞察力改进_website_cubus_index.png)；z-索引:1；}#front-cubus-hover{宽度:355px；高度:365px；位置:绝对；背景图像:url(图像/洞察力改进_website_cubus_index_hover.png)；背景重复:不重复；z-索引:2；}#front-cubus-wrapper img{位置:绝对；宽度:355px；高度:365px；z-索引:3；}查询:
jQuery(document).ready(function($){var default_value = $("#front-cubus-hover").css("background-position");if (default_value === "0px 0px") {$('#map area').each(function() {$(this).hover(功能() {var yposition = -1*365*($(this).index()+1);$("#front-cubus-hover").css("background-position","0 "+yposition+"px");},功能() {$("#front-cubus-hover").css("background-position",default_value);});});}}); 解决方案
我也在做类似的项目.这是我的代码和解释.
HTML
<img src="images/car.jpg" alt="car" usemap="#carmap" width="1100px" height="700px"/><地图名称=汽车地图"><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"></地图><div class="door1"></div><div class="door2"></div>CSS
img{位置:相对；}div.door1{宽度:200px；高度:150px；位置:绝对；顶部:0；左:0；显示:无；背景:蓝色；指针事件:无；}div.door2{宽度:180px；高度:300px；位置:绝对；左:453px；顶部:404px；背景: url("images/tire-modified.jpg") 无重复左上角；指针事件:无；边界半径:50%；}jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></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();});});因此，首先我将图像设置为相对位置，并在图像上使用两个区域进行映射.现在，在地图悬停部分，我绑定了 mouseenter 和 mouseleave 事件，以便我可以设置我的其他 div(根据区域)我可以将它们设置为绝对位置.不要忘记添加指针事件:无；到您的绝对元素，以便没有任何事件适用于这些元素.否则会出现闪烁问题.希望对你有帮助.
常规汽车图像.普通汽车图片
汽车层的悬停(具有绝对位置的汽车层图像).汽车层的悬停(具有绝对位置的汽车层图像
I'm working on my first actual wordpress site and i'm having some troubles with some jquery. I really hope that someone can help me out here.
So what i want to do is to position my div background depending on the map area currently hovered.
I found an example here: http://ubytujnaslovensku.sk/sk/
What i got: 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);
}
);
});
}
});
解决方案
I am also working on similar project. Here is my code with explanation.
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>
So, first I set the image with position relative and map with two areas on image. Now, on that map hover part I bind mouseenter and mouseleave events so that I can set my other divs(according to areas) I can set them with position absolute. Don't forget to add pointer-events:none; to your absolute elements so that none of the events applicable to those elements. Otherwise the blinking problem will be there. I hope it will be helpful to you.
Regular car-image. Regular car-image
On-hover of the car tier(car tier image with absolute position). On-hover of the car tier(car tier image with absolute position
这篇关于使用 jquery 悬停地图区域精灵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
