form button
{ padding:0;border:none;background:transparent; }
form button img
{ display:block; }
Как сделать вместо кнопки submit картинку?
Я незнаю как заменить кнопку submit картинкой (png или gif).
Кто знает пожалуйста скажите.
Кто знает пожалуйста скажите.
Цитата: Tanger
Я незнаю как заменить кнопку submit картинкой (png или gif).
Кто знает пожалуйста скажите.
Кто знает пожалуйста скажите.
Кажется можно написать так:
Код:
<input type="image" src="picture.jpg" name="submit">
а можно и так:
Код:
<a class="btnOk" href="#" title=""
onClick="javascript: document.getElementById('frmMain').submit;
return false;">
<img src="/images/btnOk.png" alt="" />
Отправить
</a>
onClick="javascript: document.getElementById('frmMain').submit;
return false;">
<img src="/images/btnOk.png" alt="" />
Отправить
</a>
Цитата: InterWen
Кажется можно написать так:
[HTML]<input type="image" src="picture.jpg" name="submit">[/HTML]
[HTML]<input type="image" src="picture.jpg" name="submit">[/HTML]
Нельзя. У тебя в type уже указано, что это картинка, а не submit кнопка. Без JS обработчика как нормальный вариант не прокатит.
alekciy, а может ты чего путаешь? ))) всё нормально сабмитится... только еще X,Y клика передаёт.
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]
Я же не брался утверждать, что это по спецификации :) С виду слишком нелогично, но с другой стороны есть вполне известные сайты [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]
Не, лучше через <input type="image" /> просто он отрабатывает так же и на enter. Вот только про различные alt and title не забываем господа, а то ведь есть люди и без картинок :)
Большое спасибо!
CSS
HTML:
DTD:
Код:
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>
<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
>
"(#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
>
А действительно, готовые примеры из HTML спецы все как-то уже и позабыли! :D
Через image - не всегда помогает, вобще просмотрел много вариантов, нашел на одном блоге подборку в трех вариантах для решения задачи: "как сделать submit картинкой".
Самый реальный способ это с помощью css :
Самый реальный способ это с помощью 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;
}
background: transparent url(‘путь к картинке’) no-repeat center top;
border: 0;
margin: 0;
padding:0;
width: 100px; // длина кнопки
height: 25px; // высота кнопки
text-indent: -1000em; // убираем текст
cursor: pointer;
cursor: hand;
}
вопрос мне надо место кнопки Button 1 поставить картинку чтобы когда на неё нажимали она имела теже самые свойства что Button1 тобеж серенький прямоугольник на котором написано Button стал картинкой