Кнопка формы с настраиваемым изображением и текстом

Question

Кнопка формы имеет изображение 170x60 для состояний без нажатия и нажатия. То, что я не могу сделать, это получить текст в кнопке. Я действительно хочу избежать необходимости редактировать изображение и напрямую писать текст. Сейчас я использую:

<input type="image" src="img/button_normal.png" 
width="175" height="60" onmousedown="this.src='img/button_pressed2.png'" 
onmouseup="this.src='img/button_normal.png'"> 

я понял, что это невозможно сделать эту работу с текстом поверх него (насколько я пробовал). Поэтому я попытался использовать <button>, но я не мог заставить его работать.

Я мог бы нанести текст поверх изображения выше, но там, где текст, кнопка нечеткая, что не работает.

Что такое решение этой проблемы?

Answer 1

Так почему бы не просто отредактировать фоновое изображение на обычной кнопке?

<script type="text/javascript" src="picker/js/jquery.js"></script> 
<!-- some time later --> 
<input type="button" src="img/button_normal.png" 
width="175" height="60" value="Some Text" 
onmousedown="$(this).css({'background-image': 'img/button_pressed2.png'});" 
onmouseup="$(this).css({'background-image': 'img/button_normal.png'});"> 

Это должно дать вам возможность поместить изображение в кнопку с наложенным текстом.

Answer 2

Почему бы просто не использовать css и «отправить»?

<input type="submit" class="myButton" value="Label goes here" /> 

Затем в CSS:

input.myButton{ 
    background-image: url('img/button_normal.png'); 
    border-style:none; 
} 
input.myButton:hover{ 
    background-image: url('img/button_pressed2.png'); 
} 
input.myButton:active{ 
    background-image: url('img/button_normal.png'); 
} 

Это будет работать так же хорошо с типом «кнопки», и имеет преимущество по сравнению с версиями Javascript, потому что Javascript не должен быть включен.

Чтобы сделать эту работу должным образом в IE, вы можете использовать this script сделать IE ведут себя :)

Answer 3

<input type="image"> предназначен иметь вид карты изображения, как кнопки. Когда отправлено, он отправляет на серверную сторону параметры name.x и name.y, которые обозначают точное местоположение, в котором клиент нажал на карту изображения.

Вы, очевидно, не хотите этого. Вы просто хотите иметь кнопку с фоном . Для этого вы обычно используете свойство CSS background-image (или, что более удобно, свойство background).

Простой пример:

.mybutton { 
    background-image: url('normal.png'); 
    width: 175px; 
    height: 60px; 
} 
.mybutton.pressed { 
    background-image: url('pressed.png'); 
} 

с нормальной кнопки следующим образом:

<input 
    type="submit" 
    class="mybutton" 
    value="" 
    onmousedown="this.className+=' pressed'" 
    onmouseup="this.className=this.className.replace(' pressed', '')" 
> 

Edit: для downvoters или JS/JQuery nitpickers: IE Ге 7 делает поддержку не:hover ни :active псевзоселекторы на других элементах, кроме элемента a. Вышеупомянутое решение совместимо с crossbrowser.