Замена кнопки формы с изображением и добавление значения сверху

Question

Я не нашел способ сделать это. Что я хочу сделать, это создать свои собственные изображения кнопок (фактически 2 изображения для каждой кнопки для эффектов ролловера), а также добавить заголовок поверх изображения. Первая часть очень проста, но я не могу найти способ для заголовка. Мой проект включает в себя множество кнопок, каждая из которых имеет различное значение, отображаемое сверху (100 кнопок формы - по одной на каждое число 0-99). Так что не стоит создавать 200 изображений, а затем редактировать их, чтобы поместить числа сверху. Что я действительно хотел бы знать, так это то, могу ли я использовать изображение вместо кнопки по умолчанию и добавить значение сверху, как в кнопках формы: тогда я мог бы поместить эту строку в цикл и заполнить свою страницу динамически. Поэтому мне нужно было бы только создать 2 изображения для моих кнопок.

Есть идеи? В любом случае, спасибо.

Answer 1

Вы можете создать CSS, который будет использовать это изображение в качестве фонового изображения и использовать этот CSS с некоторым компонентом, например, тег <a> для отображения текста на нем.

CSS:

.myClass{
  background: url(/iamges/img.png);
  //-- some other css values
}

.myClass:hover{
      background: url(/iamges/img_hover.png);
      //-- some other css values
    }

HTML:

<a onClick="func()" class="myClass">1</a>

Answer 2

Я просто сделал это для проекта несколько дней назад.Вот CSS, пример изображения и HTML-код того, что я сделал.

<style>
.rollover,
.rollover:visited {
    background: #FFF url(http://i.stack.imgur.com/yWGMJ.gif) no-repeat scroll left 0px;
    border: none;
    cursor: pointer;
    width: 64px;
    height: 27px;
}

.rollover:hover {
    background: #FFF url(http://i.stack.imgur.com/yWGMJ.gif) no-repeat scroll left -27px;
}
</style>
<input type="button" class="rollover" name="btn_1" value="1" /><br />
<input type="button" class="rollover" name="btn_2" value="2" /><br />
<input type="button" class="rollover" name="btn_3" value="3" /><br />
<input type="button" class="rollover" name="btn_4" value="4" /><br />