我正在开发我的第一个真正的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);
}
);
});
}
});
答案 0 :(得分:0)
我也在做类似的项目。这是我的代码和解释。
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(根据区域)我可以用绝对位置设置它们。不要忘记添加指针事件:无;你的绝对元素,以便没有适用于这些元素的事件。否则会出现眨眼问题。我希望它会对你有所帮助。
常规汽车图片。 Regular car-image
悬挂汽车层(具有绝对位置的汽车层图像)。 On-hover of the car tier(car tier image with absolute position