Сделайте каждую часть изображения кнопкой

Question

Я делаю usercript для игры, которая позволяет игроку выбрать чутье из меню. У меня есть картина, которая содержит каждый чутье, который выглядит следующим образом:

Без разделения каждого чутье в свой собственный образ, как я могу сделать слой кнопок на верхней части каждого чутье в своего рода ГРИД как мода? Таким образом, когда пользователь нажимает кнопку поверх чутья, я могу узнать, какая кнопка была нажата, и получить необходимую информацию, чтобы выбрать ее.

Я думаю о том, чтобы поместить изображение в тег <img> и сделать таблицу, которая находится прямо над изображением, но я беспокоюсь о том, как правильно выстроить таблицу.

Answer 1

Это звучит, как вы хотите использовать спрайт Map

Быстрый пример

срывать только часть изображения, которую вы хотите из него.

CSS как этого

#home { 
    width: 46px; 
    height: 44px; 
    background: url(img_navsprites.gif) 0 0; 
} 

HTML, как этот

<div id="home"></div> 

Вы определите КАС идентификатор или класс для каждого изображения в img_navsprites.gif

Сниженного примера CSS

Таким образом мы уменьшаем необходимый CSS (за счет более подробного html). Bootstrap делает подобные вещи с глификонами.

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> 

Источник

CSS Image Sprites