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矩形）

＆＃13;

$('#hometownnorth').click(function(e) {
  e.preventDefault();
  $('#image1').css('backgroundPosition', '-50px -50px');
});

＆＃13;

img#image1 {
  background: url(http://www.w3schools.com/images/colorpicker.png) no-repeat top left;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: