CODEWITHSUNDEEP
htmlcss
MarksCode
MarksCode

Reputation: 8604

Make each part of picture a button

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:

flairs

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.

Upvotes: 3

Views: 147

Answers (1)

Anthony Astige
Anthony Astige

Reputation: 1969

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

Upvotes: 3

Related Questions