Make each part of picture a button - html

Question

I'm making a userscript for a game that allows a player to choose a flair from a menu. I have a picture that contains each flair that looks like this:
Without separating each flair into its own image, how can I make a layer of buttons on top of each flair in a sort of grid-like fashion? That way when the user presses the button on top of a flair, I can know which button was pressed and get the necessary information to select it.
I'm thinking of putting the picture in an <img> tag and making a table that lies right over the image, but I'm worried about how to line up the table correctly.

Answer 1

It sounds like you want to use a sprite map
Quick example
Pluck the only part of the image that you want out of it.
CSS like this
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
HTML like this
<div id="home"></div>
You'll define a css id or class for each image in img_navsprites.gif
Reduced CSS example
This way we reduce the required CSS (at the cost of more verbose html). Bootstrap does similar things with glyphicons.
CSS
.sprite {
// Assuming equal width and height of all sprites in the map
width: 46px;
height: 44px;
background: url(img_navsprites.gif);
}
.sprite-first {
background-position: 0 47px;
}
.sprite-second {
background-position: 0 93px;
}
.sprite-third{
background-position: 0 139px;
}
HTML
<span class="sprite sprite-second"></span>
Source
CSS Image Sprites