带有图片的可点击图片 [英] Clickable image with sprites

问题描述

因此，我的页面上有一系列可点击的图像.我试图通过生成包含我需要的所有图像的单个图像来优化此效果，我打算使用Sprite来选择所需的图像.我在寻找最好的方法来将锚标签添加到sprite时遇到麻烦吗?

So I've got a series of clickable images in my page. I've tried to optimise this by generating a single image containing all the images I need and I intend to use sprites to select the one I want. I'm having trouble figuring out the best way to add anchor tags to the sprites though?

因此，我追求的是可点击的HTML元素，该元素支持精灵，最好不使用JavaScript.我可以使用JavaScript来做到这一点，但我希望避免使用它.

So I'm after a clickable HTML element that supports sprites, preferably without using JavaScript. I can do it using JavaScript but I'd prefer to avoid it.

好，这是我的代码，是什么

OK, here's my code, what there is:

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

和其他几个.似乎无法同时使用子画面/背景图像和锚标记.我对吗? 有什么建议吗?

and several others. Seems there's no way to use sprites/background images and anchor tags at the same time. Am I right? Any suggestions?

推荐答案

然后:

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

应该可以，但是要在CSS中添加display:block;

Should work, but adding display:block; to the CSS :

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

这篇关于带有图片的可点击图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！