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

#html #forms #button

#HTML #формы #кнопка

Вопрос:

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

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

Ответ №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>

Ответ №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 />