JS onclick问题调用css精灵的图片

JS onclick issue to call images of css sprites

本文关键字：精灵 css onclick 问题 调用 JS      更新时间：2023-09-26

我创建了一个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精灵的一个图像的示例调用是：<i class="sprite sprite-sb31-choco"></i>

谢谢你的帮助。顺致敬意，Amir

如果我正确理解你的问题，那么你似乎是在错误地处理问题。您需要的是图像映射。这样你就可以一次加载整个图像，并映射要点击的图像部分，然后做一些事情。

<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>
相关文章：