jquery 图像映射 - 如何更改背景精灵图像的位置？

Question

我在一个页面上使用图像映射，我想将其绑定到一个无序列表中，并根据他们点击的热点更改精灵背景图像的位置（我希望我解释得当）：

<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">&nbsp;</a></li>
    </ul>
</div>

a.hometownnorth { height:50px; width:325px; background: url(/resources/images/logo.jpg) 0px -6px no-repeat;}

所以对于这个例子，当用户点击区域#hometownnorth时，它会将背景位置更改为-324px -6px

Answer 1

您可以将点击事件附加到图像映射内的区域。这是一个工作示例：

（我只将可点击区域设置为左上角的 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>

jquery 图像映射 - 如何更改背景精灵图像的位置？

jquery image map - How can I change background sprite image position?

jquery

imagemap