Как создать кнопку «Отправить кнопку мыши»?

Question

Я создаю форму контакта HTML, которая использует стандартное изображение для кнопки отправки.

Вот HTML:

<form action="#"> 
    <fieldset> 
     <input type="text" name="name" value="FULL NAME" onfocus="if (this.value=='FULL NAME') this.value='';"/> 
     <input type="text" name="" value="PHONE NUMBER" onfocus="if (this.value=='PHONE NUMBER') this.value='';"/> 
     <input type="text" name="" value="EMAIL" onfocus="if (this.value=='EMAIL') this.value='';"/> 
     <input type="text" name="" value="MOVE DATE" onfocus="if (this.value=='MOVE DATE') this.value='';"/> 
     <input type="text" name="" value="ORIGINATING ADDRESS" onfocus="if (this.value=='ORIGINATING ADDRESS') this.value='';"/> 
     <input type="text" name="" value="DESTINATION ADDRESS" onfocus="if (this.value=='DESTINATION ADDRESS') this.value='';"/> 
     <select name="type"> 
      <option value="Private">Private</option> 
      <option value="Commercial">Commercial</option> 
     </select> 
     <input id="quoteSubmit" type="image" src="_images/btn_submit.png" alt="" /> 
    </fieldset> 
</form> 

Статическая Отправить изображение кнопки в порядке, но я хотел бы изменить его при наведении курсора мыши на btn_submit-over.png.

Мне знакомы с помощью мыши, использующих спрайты css, но они не работают для кнопок отправки. Я был бы признателен за помощь.

Спасибо!

Answer 1

С чистого CSS,

<input type="submit" value="::Submit Query::" id="foo" /> 

... 

    #foo { 
    background-image: url('_images/btn_submit.png'); 
    width: <width here>; 
    height: <height here>; 
    border-style: none; 
    background-color: transparent; 
    text-indent: 480px; /* hack to hide the text */ 
    } 

    #foo:hover { 
    background-image: url('_images/btn_submit-over.png') 
    } 

Если CSS отключен, он вернется к простой кнопке отправки.

Демонстрация: http://jsbin.com/aboxu3/2

Затем можно применить технику CSS спрайтов.

Answer 2

Вы можете сделать это несколькими способами ... с jquery может быть лучшим способом, но так вы это делаете.

Изменить
<input id="quoteSubmit" type="image" src="_images/btn_submit.png" alt="" />

в
<input id="quoteSubmit" type="image" src="_images/btn_submit.png" alt="" onmouseover="javascript:this.src='_images/btn_submit-over.png'" onmouseout="javascript:this.src='_images/btn_submit.png'"/>

Просто из верхней части моей головы, я думаю, что должно работать.

Br, Paul

Answer 3

OldSchool:

 <a href="#" onclick="document.forms[0].submit(); return false" 
onmouseover="document.subBut.src=document.subBut.src.replace('.png','over.png')" 
onmouseout="document.subBut.src=document.subBut.src.replace('over.png','.png')"><img 
name="subBut" src="_images/btn_submit.png" alt="" border="0" /></a> 

Answer 4

Не было бы возможно использовать класс?

<input type="submit" class="submit" .../> 

CSS: 
input.submit:hover{ 
    color: Green; 
} 

или вы могли бы использовать то немного JavaScript для обработки обменивать изображений и вызывать кнопку для вызова представить() (JavaScript: document.theform.submit())

Answer 5

В основном это то, что вы собираетесь делать:

HTML Markup:

<input type="submit" name="Submit" id="submit" value="&nbsp;" /> 

Примечания: Создать идентификатор для CSS. В «Значение» поставьте   (разметка html для пробела), и это сделает значение по умолчанию «значение» пустым.

CSS верстку:

#submit { 
width: 220px; 
height: 50px; 
border: none; 
background: url("images/submit.jpg") no-repeat; 
} 
     #submit:focus { 
     background: url("images/submit_over.jpg") no-repeat;  
     } 

Примечания: Ширина и высота должна быть ширина и высота изображения. Затем добавьте border: none; для удаления отображаемой по умолчанию границы.

Надеюсь, это поможет! Гораздо проще, чем любой из приведенных выше ответов.

Answer 6

Классическое решения (аналогично Митч выше):

Для HTML в форме, добавить «класс»:

<INPUT NAME="submit" class="submit" TYPE="submit" VALUE="Submit"> 

Для CSS, сделать изменение цвета при наведении текста (добавить «ширины :»и„высота“линии, если вам нужно)

.submit { 
text-decoration: none; 
text-align: center; 
border: 1px solid black; 
background-color: #cccccc; 
-moz-border-radius: 5px; /* I hate square buttons for mozilla*/ 
border-radius: 5px; /* I hate square buttons for everybody else*/ 
font-family: Arial,Helvetic1,Geneva,Swiss,SunSans-Regular; 
font-size: 18px; 
color: #0000aa; /* font is blue */ 
} 

.submit:hover { 
color: #ff0000; /* font changes to RED on hover) */ 
}