与精灵可点击图片(Clickable image with sprites)

所以，我有我的第一个系列的可点击的图像。 我试着通过生成包含我需要的所有图像的单个图像优化这一点，我打算用精灵选择一个我想要的。 我无法找出对锚标签添加到虽然精灵的最好方法？

所以，我支持精灵，最好不使用JavaScript可点击HTML元素后我。 我可以使用JavaScript，但我宁愿避免它做。

好了，下面是我的代码，想要什么就有什么：

.touringEscorted {
    height:125px;
    width: 214px;
    background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
    background-position: 0 0;
}

.touringNew {
    height:125px;
    width: 214px;
    background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
    background-position: -10px 0;
}

我试过了

<a href="#"><div class="touringEscorted"></a>

和

<a href="#" class="touringEscorted">&nbsp;</a>

和其他几个人。 似乎没有办法同时使用精灵/背景图片和锚标记。 我对吗？ 有什么建议么？

Answer 1:

好吧 ：

<a href="#" class="touringEscorted"></a>

应该工作，但添加display:block; 到CSS：

.touringEscorted {
    height:125px;
    width: 214px;
    background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
    background-position: 0 0;
    display:block;
}

Answer 2:

像这样？

<a class="sprite sprite1" href="javascript:;">Link Text</a>

---

sprite {
  display: block;
  background: url(path/to/image/file.ext);
  text-indent: -9999px;
}
sprite1 {
  width: WWpx;
  height: HHpx;
  background-position: -NNpx - MMpx;
}

Answer 3:

没有谷歌考虑关闭屏幕文字垃圾？ 我想出了一个修改。 我把链接的另一个元素，在这种情况下表。 我加了背景图片类的元素，像这样的链接：

CSS代码：

.sprite{ 
    background: url('images/sprite.png') no-repeat top left; 
}   
.sprite.termite { 
    background-position: 0px -499px; 
    width: 150px; height: 113px;
    display: block;
} 

HTML代码：

<td class="td sprite termite">
    <a href="termite-photos.html" title="termite control" class="sprite termite"></a>
</td>

它使得图像中的表格完全和点击！

文章来源: Clickable image with sprites