jquery 图像映射 - 如何更改背景精灵图像的位置?
jquery image map - How can I change background sprite image position?
我在一个页面上使用图像映射,我想将其绑定到一个无序列表中,并根据他们点击的热点更改精灵背景图像的位置(我希望我解释得当):
<map name="image-map">
<area id="hometownnorth" title="HometownNorth" shape="poly" coords="71,140,71,124" href="#" alt="HometownNorth">
</map>
<div>
<ul>
<li><a href="#" class="HomeTownNorth"> </a></li>
</ul>
</div>
a.hometownnorth { height:50px; width:325px; background: url(/resources/images/logo.jpg) 0px -6px no-repeat;}
所以对于这个例子,当用户点击区域#hometownnorth
时,它会将背景位置更改为-324px -6px
您可以将点击事件附加到图像映射内的区域。
这是一个工作示例:
(我只将可点击区域设置为左上角的 50X50 矩形)
$('#hometownnorth').click(function(e) {
e.preventDefault();
$('#image1').css('backgroundPosition', '-50px -50px');
});
img#image1 {
background: url(http://www.w3schools.com/images/colorpicker.png) no-repeat top left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image1" src="#" width="150" height="150" alt="Planets" usemap="#map1" />
<map name="map1">
<area id="hometownnorth" title="HometownNorth" shape="rect" coords="0,0,50,50" href="#asd" alt="HometownNorth" />
</map>
我在一个页面上使用图像映射,我想将其绑定到一个无序列表中,并根据他们点击的热点更改精灵背景图像的位置(我希望我解释得当):
<map name="image-map">
<area id="hometownnorth" title="HometownNorth" shape="poly" coords="71,140,71,124" href="#" alt="HometownNorth">
</map>
<div>
<ul>
<li><a href="#" class="HomeTownNorth"> </a></li>
</ul>
</div>
a.hometownnorth { height:50px; width:325px; background: url(/resources/images/logo.jpg) 0px -6px no-repeat;}
所以对于这个例子,当用户点击区域#hometownnorth
时,它会将背景位置更改为-324px -6px
您可以将点击事件附加到图像映射内的区域。 这是一个工作示例:
(我只将可点击区域设置为左上角的 50X50 矩形)
$('#hometownnorth').click(function(e) {
e.preventDefault();
$('#image1').css('backgroundPosition', '-50px -50px');
});
img#image1 {
background: url(http://www.w3schools.com/images/colorpicker.png) no-repeat top left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image1" src="#" width="150" height="150" alt="Planets" usemap="#map1" />
<map name="map1">
<area id="hometownnorth" title="HometownNorth" shape="rect" coords="0,0,50,50" href="#asd" alt="HometownNorth" />
</map>