Clickable image with sprites - html

Question

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?
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;
}
I've tried
<div class="touringEscorted">
and
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?

Answer 1

Ok then :
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;
}

Answer 2

Like this?
<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

Doesn't Google consider off screen text as spammy? I came up with a modification. I put the link in another element, in this case a table. I added the background image class in the element and in the link like this:
CSS code:
.sprite{
background: url('images/sprite.png') no-repeat top left;
}
.sprite.termite {
background-position: 0px -499px;
width: 150px; height: 113px;
display: block;
}
HTML code:
<td class="td sprite termite">
</td>
It renders the image in the table perfectly and clicks!