Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Как сделать вместо кнопки submit картинку?

11K
27 сентября 2007 года
Tanger
53 / / 22.08.2007
Я незнаю как заменить кнопку submit картинкой (png или gif).
Кто знает пожалуйста скажите.
1.9K
27 сентября 2007 года
InterWen
331 / / 16.09.2006
Цитата: Tanger
Я незнаю как заменить кнопку submit картинкой (png или gif).
Кто знает пожалуйста скажите.



Кажется можно написать так:

 
Код:
<input type="image" src="picture.jpg" name="submit">
251
27 сентября 2007 года
SkyMаn
1.7K / / 31.07.2007
а можно и так:
 
Код:
<a class="btnOk" href="#" title=""
  onClick="javascript: document.getElementById('frmMain').submit;
   return false;">

    <img src="/images/btnOk.png" alt="" />
     Отправить
</a>
12
28 сентября 2007 года
alekciy
3.0K / / 13.12.2005
Цитата: InterWen
Кажется можно написать так:

[HTML]<input type="image" src="picture.jpg" name="submit">[/HTML]


Нельзя. У тебя в type уже указано, что это картинка, а не submit кнопка. Без JS обработчика как нормальный вариант не прокатит.

92
28 сентября 2007 года
Тень Пса
2.2K / / 19.10.2006
alekciy, а может ты чего путаешь? ))) всё нормально сабмитится... только еще X,Y клика передаёт.
1.9K
28 сентября 2007 года
InterWen
331 / / 16.09.2006
2 alekciy

Я же не брался утверждать, что это по спецификации :) С виду слишком нелогично, но с другой стороны есть вполне известные сайты [COLOR="Gray"](не буду тыкать пальцем :-)[/COLOR], где подобный вариант уже длительное время используется именно без ЖС обработчиков, и, само собой, работает, как того ожидали верстальщики, на стороне IE, Mozilla клиентов.


Хотя, чего дальше гадать...

http://www.w3.org/TR/html4/interact/forms.html#input-control-types

submit - Creates a submit button.

image - Creates a graphical submit button. The value of the src attribute specifies the URI of the image that will decorate the button. For accessibility reasons, authors should provide alternate text for the image via the alt attribute.


Решать топикстартеру.
[COLOR="DimGray"]Стоит заметить, что на данный момент, для большинства случаев я и сам использую вариант предложенный SkyM@n'ом
[COLOR="Gray"]Но топик то привязан к разделу HTML, вот и даю советы "в лоб" :D [/COLOR][/COLOR]
15
28 сентября 2007 года
shaelf
2.7K / / 04.05.2005
Не, лучше через <input type="image" /> просто он отрабатывает так же и на enter. Вот только про различные alt and title не забываем господа, а то ведь есть люди и без картинок :)
11K
28 сентября 2007 года
Tanger
53 / / 22.08.2007
Большое спасибо!
8.4K
01 октября 2007 года
assume
74 / / 22.02.2006
CSS
 
Код:
form button
  { padding:0;border:none;background:transparent; }
form button img
  { display:block; }

HTML:
 
Код:
<form action=".">
    <div>
      <button type="reset"><img src="reset.gif" alt="reset"/></button>
      <button type="submit"><img src="submit.gif" alt="submit"/></button>
          <button type="button"><img src="button.gif" alt="button"/></button>
    </div>
      </form>

DTD:
Код:
<!ENTITY % button.content
   "(#PCDATA | p | %heading; | div | %lists; | %blocktext; |
    table | %special; | %fontstyle; | %phrase; | %misc;)*">
....
<!ELEMENT button %button.content;>  <!-- push button -->
<!ATTLIST button
  %attrs;
  %focus;
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED
  type        (button|submit|reset) "submit"
  disabled    (disabled)     #IMPLIED
  >
12
01 октября 2007 года
alekciy
3.0K / / 13.12.2005
А действительно, готовые примеры из HTML спецы все как-то уже и позабыли! :D
77K
18 ноября 2011 года
ulot3049
1 / / 18.11.2011
Через image - не всегда помогает, вобще просмотрел много вариантов, нашел на одном блоге подборку в трех вариантах для решения задачи: "как сделать submit картинкой".
Самый реальный способ это с помощью css :
Цитата:
.submit {
background: transparent url(‘путь к картинке’) no-repeat center top;
border: 0;
margin: 0;
padding:0;
width: 100px; // длина кнопки
height: 25px; // высота кнопки
text-indent: -1000em; // убираем текст
cursor: pointer;
cursor: hand;
}

87K
14 ноября 2012 года
xIxDIABLOxIx
1 / / 14.11.2012
вопрос мне надо место кнопки Button 1 поставить картинку чтобы когда на неё нажимали она имела теже самые свойства что Button1 тобеж серенький прямоугольник на котором написано Button стал картинкой

Знаете кого-то, кто может ответить? Поделитесь с ним ссылкой.

Ваш ответ

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог