Clickable image with sprites

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

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

and

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

Answer 1

Ok then :

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

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">
    <a href="termite-photos.html" title="termite control" class="sprite termite"></a>
</td>

It renders the image in the table perfectly and clicks!