Question

我创建了一个JS，点击图像后执行某个动作。 ATM所有图像都单独加载并使用此功能调用：

var array_colors = [];
$('#input_59_20 > li.active').each(function(index){
    var img = $(this).find('img').attr('src');
    array_colors.push(img);
});`

事情是，由于有很多http请求，页面加载速度相对较慢。因此我决定修改页面来调用1个css精灵而不是50个小图像文件，但是无法弄清楚如何调用通过精灵加载的单个图像。对css sprite的一个图像的示例调用是：<i class="sprite sprite-sb31-choco"></i>

感谢您的帮助。最好的祝福，阿米尔

Answer 1

如果我理解你的问题，那么你似乎正在以错误的方式接近它。你需要的是图像映射。这样您就可以一次性加载整个图像并映射要点击的图像部分并执行某些操作。

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area class="imgClick" shape="rect" coords="0,0,82,126" href="#" alt="Sun">
  <area class="imgClick" shape="circle" coords="90,58,3" href="#" alt="Mercury">
  <area class="imgClick" shape="circle" coords="124,58,8" href="#" alt="Venus">
</map>

由于href属性在区域标记中是必需的，因此您需要执行以下操作以执行重定向以外的操作：

<script>
    $(".imgClick").on("click", function(e){
        e.preventDefault();
        /*
           your code here
        */
    });
</script>

JS onclick问题调用css sprite的图像

1 个答案: