Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.91/321: Рейтинг темы: голосов - 321, средняя оценка - 4.91
 Аватар для florgas
6 / 5 / 0
Регистрация: 28.09.2010
Сообщений: 366

Кнопка в виде картинки

10.07.2011, 12:38. Показов 63549. Ответов 17
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
А как можно сделать кнопку в виде картинки подскажите плз.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
10.07.2011, 12:38
Ответы с готовыми решениями:

Кнопка в виде стрелки
Нужно сделать кнопку, в виде стрелочки вправо, тоесть правую сторону кнопки "сломать" по центру и этот центр выдвинуть. Возможно ли...

Кнопка в виде трапеции
С CSS знаком недавно, пользуюсь из-за необходимости и погружаться в него не хочется. Есть задача - сделать кнопку нестандартной формы....

Кнопка из картинки
Перелопатив кучу информации я пришел к выводу что конкретного "официального" метода сделать из картинки кликабельную кнопку нет....

17
97 / 36 / 6
Регистрация: 05.07.2011
Сообщений: 382
10.07.2011, 12:44
Код кнопки в студию или саму кнопку !
0
 Аватар для florgas
6 / 5 / 0
Регистрация: 28.09.2010
Сообщений: 366
10.07.2011, 12:53  [ТС]
Какой код? По-моему последняя строка отвечает за передачу сообщения, вот она:
HTML5
1
2
<tr><td colspan="2" align="center"><br /><input type="submit" value="Подать заявку"></td></tr>
</table>
Изображения
 
0
Путешественник вселенной
 Аватар для Просто лис
189 / 161 / 119
Регистрация: 01.03.2011
Сообщений: 664
11.07.2011, 08:38
HTML5
1
2
3
<form action="адрес" method="GET" name="имя">
<input type="image" src="адрес" value="Подать заявку" name="имя">
</form>
В src вставить адрес "регистрации".
1
 Аватар для florgas
6 / 5 / 0
Регистрация: 28.09.2010
Сообщений: 366
11.07.2011, 12:44  [ТС]
А вот этот код куда?
0
Путешественник вселенной
 Аватар для Просто лис
189 / 161 / 119
Регистрация: 01.03.2011
Сообщений: 664
11.07.2011, 13:08
HTML5
1
<form action="адрес" method="GET" name="имя">
Поверх <table>
HTML5
1
</form>
Ниже </table>
HTML5
1
<input type="image" src="адрес" value="Подать заявку" name="имя">
Вместо вашего импута
1
 Аватар для florgas
6 / 5 / 0
Регистрация: 28.09.2010
Сообщений: 366
11.07.2011, 13:19  [ТС]
Адрес это какой адрес?
0
103 / 70 / 5
Регистрация: 09.06.2011
Сообщений: 263
12.07.2011, 01:18
попробуй в тег <input> добавить css стили, в том числе и background-image
0
Путешественник вселенной
 Аватар для Просто лис
189 / 161 / 119
Регистрация: 01.03.2011
Сообщений: 664
12.07.2011, 02:50
florgas, Адрес кнопки "Кнопка.png"
0
9 / 9 / 1
Регистрация: 20.12.2010
Сообщений: 192
12.07.2011, 02:54
Блин а такое ощущение что человек спрашивает про банальную кнопку?
Вроде бы вопрос предельно корректен как сделать кнопку в виде картинки?

Ответ:

HTML5
1
<a href="ссылка на страницу за которую отв. кнопка" target="_blank"><img src="урл вашей кнопки" alt="описание кнопки при наведении"/>
(или вместо /> поставить </img></a> в зависимости от XHTML или HTML соответственно)

ну соответственно _blank отвечает за открытие страницы в новом окне.

Как то так вроде!

А я в продолжении это темы и согласно правилам форума задам свой вопрос в новой теме!
0
 Аватар для florgas
6 / 5 / 0
Регистрация: 28.09.2010
Сообщений: 366
12.07.2011, 08:23  [ТС]
Zilberman, зачем мне твоя кнопка со ссылкой на другую страницу. Я написал что мне нужно.

Вот так мне надо http://piratia.ucoz.es/
Надо чтобы кнопка "Регистрация" выполняла действие кнопки "Подать заявку". Потому что кнопка "Подать заявку стандартная и не красивая.
Как вы видите этот сайт на ucoz'е. Сама эта форма отправки сообщения создана на ucoz'е в разделе почтовые формы, а потом в сам код страницы вставлен лишь один тег, который отвечает за ту форму. Еще раз вот тот код формы и сам код страницы:
Код формы отправки сообщения:
HTML5
1
2
3
4
5
6
<table border="0" width="300px" id="table1" cellspacing="1" cellpadding="2" align="center">
<tr><td width="35%"><font color="FFFFFF">Ваш E-mail</font><font color="red">*</font>:</td><td><input type="text" name="f1" size="30" style="width:190px;" maxlength="70"> </td></tr>
<tr><td><font color="FFFFFF">Ваш пароль</font><font color="red">*</font>:</td><td><input type="password" name="f2" size="30" style="width:190px;" maxlength="70"> </td></tr>
<tr><td><font color="FFFFFF">Анти-спам</font><font color="red">*</font>:</td><td><input type="text" name="f7" size="7" maxlength="5"> $SECURITY_CODE$</td></tr>
<tr><td colspan="2" align="center"><br /><input type="submit" value="Подать заявку"></td></tr>
</table>
Код самой странице:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style type="text/css">.ca2cOca {position:absolute;right:0px;top:0px;} div > table.ca2cOca {position:fixed;}</style> 
<script type="text/javascript">function fa2cOca(a){try{document.getElementById("pa2cOca").style.display=a;}catch(e){}try{document.getElementById("a2cOca").style.display=a;}catch(e){}}function f2a2cOca(){fa2cOca('');} new Image().src = "http://counter.yadro.ru/hit;ucoznet2?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";"+Math.random();</script> <div id="pa2cOca"><table border="0" cellspacing="0" cellpadding="0" class="ca2cOca" id="a2cOca" style="z-index:10000;width:257px"><tr><td valign="top" width="12"><a href="javascript://" onclick="fa2cOca('none');return false;" title="Закрыть"><img alt="" src="http://s105.ucoz.net/img/ma/cv.gif" style="border:0;width:12px;height:54px;"></a></td><td width="245"><script type="text/javascript">var begun_auto_pad = 170744863; var begun_block_id = 170744923; var begun_self_keywords = 'реклама на щитах, сдам квартиру';</script><script src="http://autocontext.begun.ru/autocontext2.js" type="text/javascript"></script></td></tr></table></div><!--/footer--> 
<html> 
<head> 
<SCRIPT LANGUAGE="JavaScript"> 
var div = document.getElementsByTagName('div')[0].style.display='NONE'; 
var div = document.getElementsByTagName('div')[1].style.display='NONE'; 
div.innerHTML = ''; 
</script>
<title>X-security</title> 
<link type="text/css" rel="StyleSheet" href="http://s105.ucoz.net/src/layer1.css" /> 
<script type="text/javascript" src="http://s105.ucoz.net/src/jquery-1.3.2.js"></script><script type="text/javascript" src="http://s105.ucoz.net/src/uwnd.js?2"></script><style type="text/css">.UhideBlock {display:none}</style> 
</head> 
<body> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br>
<br> 
<br> 
<br> 
<body background="http://piratia.ucoz.es/TheBestTpy.png">
<br> 
<br> 
<br> 
$MFORM_1$
$POWERED_BY$
<!-- 0.00532 (s105) -->
(На скрипты в коде самой страницы не обращайте внимания, это я ставил для удаления платной рекламы).
Так вот, как вы видите у меня картинка должна не ссылаться на другую страничку, а должна выполнять действие, только какое я не знаю. Вот поэтому и прошу помочь.
 Комментарий модератора 
Используйте теги соответствующих языков. Тег CODE только если нет нужного языка.
0
9 / 9 / 1
Регистрация: 20.12.2010
Сообщений: 192
13.07.2011, 00:06
А, ну да извините!


А я было подумал вы об этом


А как можно сделать кнопку в виде картинки подскажите плз.
0
 Аватар для webarts
73 / 17 / 0
Регистрация: 23.12.2010
Сообщений: 203
13.07.2011, 00:12
Я всегда судорожно удивляюсь когда спрашивают такую лехкотню. Это лехче лехчего. НАРОД ПЕРЕСТАНЬТЕ ПАРИТЬСЯ В БЛАКНОТАХ И В ДРУГОМ ПОДОБНОМ КОФНЕ, НА ДВОРЕ ДАМНО УЖЕ CS 5 ОН ЖЕ ADOBE DREAMWEAVER!!!! Вы как аскеты и изгои и масохиЗды которые пренебреают техническим прогрессом и варятся в вековом вареве всяких дедовских редакторов
0
 Аватар для florgas
6 / 5 / 0
Регистрация: 28.09.2010
Сообщений: 366
13.07.2011, 08:13  [ТС]
Уважаемый webarts, если для вас это легче легкого, то будьте добры, помогите мне с этим вопросом.
0
13.07.2011, 09:13

Не по теме:

Цитата Сообщение от webarts Посмотреть сообщение
НАРОД ПЕРЕСТАНЬТЕ ПАРИТЬСЯ В БЛАКНОТАХ И В ДРУГОМ ПОДОБНОМ КОФНЕ, НА ДВОРЕ ДАМНО УЖЕ CS 5 ОН ЖЕ ADOBE DREAMWEAVER
Зато мы без проблем даже пальцем на стене код сможем написать, если потребуется. :p Ваш крик души совершенно не понятен. Нравится - пользуйтесь. Кому надо, тот будет пользоваться. Кому не надо - не будет. Не нужно навязывать всем своё мнение.

0
Путешественник вселенной
 Аватар для Просто лис
189 / 161 / 119
Регистрация: 01.03.2011
Сообщений: 664
13.07.2011, 13:44
florgas, я уже давно написал код просто скинь картинку и файл html в отдельную папку и вместо
HTML5
1
<tr><td colspan="2" align="center"><br /><input type="submit" value="Подать заявку"></td></tr>
Вставьте
HTML5
1
<tr><td colspan="2" align="center"><br /><input type="image" src="Кнопка.png" name="bottom" value="Подать заявку"></td></tr>
1
97 / 36 / 6
Регистрация: 05.07.2011
Сообщений: 382
13.07.2011, 14:08
Просто лис, Прав всё нормально получается так.
0
 Аватар для florgas
6 / 5 / 0
Регистрация: 28.09.2010
Сообщений: 366
14.07.2011, 08:08  [ТС]
Ура,
Просто лис, огромное спасибо, все получилось...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
14.07.2011, 08:08
Помогаю со студенческими работами здесь

Кнопка из картинки
Здравствуйте. В инете нет анимаций кнопок во всяком случае в открытом доступе найти не могу. А сам сделать в фотошопе я криворук. Может кто...

Кнопка посередине картинки
Как сделать чтобы в картинке была кнопка как здесь http://new.hexlet.io/

Кнопка зум для картинки
Доброго времени суток ув. форумчане. Возникла такая проблема. Сделал на сайте галерею с миниатюрами...

Кнопка в виде шестиугольника
Всем привет! Передо мной поставлена такая задача: есть соты, нужно сделать так, чтобы при нажатии на отдельную соту менялся цвет этой соты....

Кнопка в виде крестика
Ev_Hyper, в вот еще немного в другой сфере не поможете? Хочу сделать кнопку: просто крестик такой обьемный внутри. У меня есть этот самый...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
18
Ответ Создать тему
Новые блоги и статьи
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru