代码之家 › 专栏 › 技术社区 › Liam Joshua

带有精灵的可点击图像

css-sprites anchor html

1

Liam Joshua · 技术社区 · 12 年前

所以我的页面上有一系列可点击的图片。我试图通过生成一个包含我需要的所有图像的单个图像来优化这一点,我打算使用精灵来选择我想要的图像。不过,我很难找到向精灵添加锚点标签的最佳方式?

所以我想要一个支持精灵的可点击HTML元素,最好不用JavaScript。我可以使用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>

以及其他几个。似乎没有办法同时使用精灵/背景图像和锚点标签。我说得对吗? 有什么建议吗?

3 回复 | 直到 12 年前

1

4

darma 12 年前

好的,那么:

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

2

yunzen 12 年前

像这样?

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

3

1

Harry dbr 10 年前

难道谷歌不认为屏幕外的文字是垃圾邮件吗?我想出了一个修改方案。我把链接放在另一个元素中,在本例中是一个表。我在元素和链接中添加了背景图像类,如下所示:

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>

它完美地渲染了表格中的图像并点击!