[Help] как изменить картинку кнопки поиска?

Тема в разделе "Веб-дизайн", создана пользователем SorStep, 24 июл 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. SorStep

    SorStep Постоялец

    Регистр.:
    9 янв 2009
    Сообщения:
    99
    Симпатии:
    24
    скажите как изменить кнопку, а тоесть я хочу чтобы вместо стандартного button была моя картинка в виде кнопки и когда на картинку жмут она выполняет функцыю кнопки.

    Код:
    <div cass="searchForm" align="center"><form onsubmit="this.sfSbm.disabled=true" method="get" style="margin: 0pt;" action="#####"><input name="" maxlength="30" size="100" clss="queryField" type="text"><input class="searchSbmFl" name="sfSbm" value="Поиск" type="submit"></form></div>
    Вот у меня форма поиска я хочу там сменить кнопку на свою картинку.

    Подравьте пожалуйста и укажите где указывать путь к картинке.
    Заранее блогодарен. :)
     
  2. qwyjibo

    qwyjibo Постоялец

    Регистр.:
    27 янв 2009
    Сообщения:
    64
    Симпатии:
    12
    HTML:
    <div cass="searchForm" align="center"><form onsubmit="this.sfSbm.disabled=true" method="get" style="margin: 0pt;" action="#####"><input name="" maxlength="30" size="100" clss="queryField" type="text"><input class="searchSbmFl" name="sfSbm" value="Поиск" type="image" src="image.jpg"></form></div>
    Но там есть какие-то заморочки свои, читай тут например:

    http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html
    http://www.webdevelopersnotes.com/tips/html/using_an_image_as_a_submit_button.php3
     
    SorStep нравится это.
  3. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    При помощи CSS обратись к кнопке по классу .searchSbmFl{background: url (ссылка на картинку);
     
    SorStep нравится это.
  4. SorStep

    SorStep Постоялец

    Регистр.:
    9 янв 2009
    Сообщения:
    99
    Симпатии:
    24
    Спасибо за помощь.
    Вобщем нужно было просто type сменить и добавить scr теперь буду знать. =)

    Код:
    type="image" src="image.jpg">
    :yahoo::ay:
     
  5. dothan

    dothan Писатель

    Регистр.:
    6 авг 2008
    Сообщения:
    6
    Симпатии:
    1
    в таких и других подобных случаях достаточно найти пример на другом сайте и посмотреть как там сделано. через исходный код или (ещё проще) установить фаербаг.

    type="image" не всеми браузерами корректно обрабатывается
    желательно использовать старый добрый type="submit"

    а именно

    Код:
    <fieldset class="upload_butt">
    <input class="btn" type="submit" value="текст кнопки" name="submit_btn"/>
    </fieldset>
    
    и стиль
    Код:
    .upload_butt .btn {
    background-image:url(http://путь к картинке);
    background-repeat:no-repeat;
    
     
Статус темы:
Закрыта.