Кнопка поиска

[Dayks]

Здравствуйте.

Мне необходимо чтобы поиск производился по нажатию на кнопку в виде картинки + чтоб при наведении на эту картинку курсора она менялась на другую.

Чтоб заменить кнопку "Искать" на картинку я в html прописал код:

<input type="image" src="wp-content/themes/MyTheme/images/search.png" name="submit" class="searchbutton" />

C помощью css знаю только как изменить фон класса searchbutton при наведении (псевдокласс hover), но при такой реализации он размещен под картинкой, прописанной в html, то есть то, что она меняется не видно.

Так как сделать чтоб заменялась?

Спасибо за ответ.

P.S. Сайт размещен на локале.

Edited August 14, 2011 by Dayks

[Nekromancer]

Либо берёшь кнопку типо submit, убираешь ей стандартные стили, по умолчанию фоном вешаешь первую картинку. При наведении заменяешь на другую. Либо твой пример и через скрипт.

[Dayks]

Если у кнопки типа submit убрать свойство value, то появляется надпись "Отправить". Я так понял это стандартное значение свойства value. Ну а заполнять его так же не вариант, так как текст идет поверх кнопки поиска. А как сделать чтоб надпись не отображалась вообще не пойму.

[Int]

возьми <button></button>

[yacor]

  On 8/14/2011 at 6:42 PM, Dayks said:

Если у кнопки типа submit убрать свойство value, то появляется надпись "Отправить". Я так понял это стандартное значение свойства value. Ну а заполнять его так же не вариант, так как текст идет поверх кнопки поиска. А как сделать чтоб надпись не отображалась вообще не пойму.

value=""

[Dayks]

  On 8/14/2011 at 8:14 PM, yacor said:

value=""

не вариант, та же фигня со словом ОТПРАВИТЬ

  On 8/14/2011 at 7:37 PM, Int said:

возьми <button></button>

помогло, спасибо

[Dayks]

Рано радоваться начал... при использовании input все красиво - строка ввода поискового запроса идет строго на одном уровне с кнопкой поиска, но как только заменяю на <button></button> сразу же все летит к чертям - в опере поле ввода смещается ниже кнопки, в хроме и ФФ выше (в ФФ больше вверх чем в хроме), в ИЕ тоже ниже. Вобщем поправить ситуацию позиционированием невозможно. Ребят, помогите наконец-таки решить проблемку...

вот куски кода если что:

html

<div id="searchback">
	<div id="searchbar">
		<form method="get" action="<?php bloginfo('url'); ?>/" class="searchform" style="float: right;">
			<fieldset>
				<input type="text" value="<?php the_search_query(); ?>" name="s" class="searchterm" />
				<input type="submit" value="Искать!" class="searchbutton" />
			</fieldset>
		</form>
	</div>
</div>

css

#searchback {
	border-bottom-right-radius: 7px;
	-moz-border-bottom-right-radius: 7px;
	border-bottom-left-radius: 7px;
	-moz-border-bottom-left-radius: 7px;
	float:right;
	width:310px;
	height:40px;
	background-color:#5b5b5b;
}

#searchbar {
	margin-top:5px;
	height:30px;
	float: right;
	margin-right:24px;
	display: inline;
	font-size: 0.7em;
	border:1px solid red;
}

.searchform {
	display: inline;
	vertical-align: middle;
}

.searchform fieldset {
	display: inline;
	vertical-align: middle;
}

.searchform label {
	display: inline;
	vertical-align: middle;
}

.searchform input {
	display: inline;
	vertical-align: middle;
}

.searchform .searchterm {
	width: 200px;
	padding: 3px;
	color: #999;
	background: #fff;
	border: 1px solid #ccc;
}

.searchform .searchterm:focus {
	background: #fffff9;
}

.searchbutton {
	background:url(images/search.png) no-repeat;
	cursor: pointer;
	font-size: 0.9em;
	height: 30px;
	width: 30px;
}

.searchform .searchbutton:hover {
	background: url(images/search_focus.png) no-repeat;
}

при этом коде я вижу следущее

черный блок - это searchback, внутри красной рамки searchbar, кнопку вы и сами видите

Edited August 15, 2011 by Dayks

[Nekromancer]

Ну поставь в валуе пробел и всё ок будет

[SelenIT]

Как вариант — подложить под <input type="image"> фон-подложку с состоянием при наведении, а сам input по :hover делать полностью прозрачным . Но, имхо, это крайний выход "от бедности"...