Смена изображения при наведении на кнопку формы <input>

[chillout]

Добрый день!

Подскажите пожалуйста, каким образом можно сделать смену изображения при наведении (hover) на кнопку формы - input.

<input name="search" type="image" src="images/search.gif" class="button" /> 

[tius]

http://htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee

[SelenIT]

Как вариант — по наведению делать кнопку полностью прозрачной (opacity:0), чтобы через нее просвечивала фоновая подложка с нужным рисунком.

[chillout]

http://htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee

Как это делать с тэгом <a> я знаю, а вот с input встрял.

Как вариант — по наведению делать кнопку полностью прозрачной (opacity:0), чтобы через нее просвечивала фоновая подложка с нужным рисунком.

спасибо, попробую.

[tius]

>Как это делать с тэгом <a> я знаю, а вот с input встрял.

Точно так же?

<style type="text/css">
input {
	width: 100px;
	height: 30px;
	background: url('input.png') no-repeat;
	border: none;
}
input:hover {
	background: url('input_hover.png') no-repeat;
}
</style>
<form>
<input name="search" type="button" value="" /> 
</form>

[chillout]

tius, а если я ввожу value="" то появляется текст на кнопке, который мне не нужен.

Edited March 30, 2011 by chillout

[tius]

Не вводите.

[chillout]

Как вариант — по наведению делать кнопку полностью прозрачной (opacity:0), чтобы через нее просвечивала фоновая подложка с нужным рисунком.

Получилось то что нужно, но пришлось задать абсолютное позиционирование и z-index. Может есть какой-то ещё способ?

Не вводите.

я не программист, мне лишь нужно сделать формы, но разве value="" не обязателен?

[tius]

Оставьте значение пустым.

[SelenIT]

пришлось задать абсолютное позиционирование и z-index. Может есть какой-то ещё способ?

Просто обернуть кнопку в <span> с нужной фоновой картинкой оказалось недостаточно?