Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.76/21: Рейтинг темы: голосов - 21, средняя оценка - 4.76
4 / 4 / 5
Регистрация: 09.08.2012
Сообщений: 225

Смена изображения посредствами CSS для кнопки отправки формы

12.09.2012, 03:35. Показов 4312. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Бьюсь над следующим:

А именно надо сделать так, чтобы кнопка при наведении менялась на стиль который я установил посредствами CSS , эта кнопка отправки формы не могу понять как это организовать

CSS
1
2
3
4
.button a, .tm div { font-size:11px; text-decoration:none; font-weight:bold; text-shadow:#FFF 0px 1px 0px; line-height:27px; text-align:center;}
.button a { width:155px; height:28px; color:#000000; display:block; background: url(images/button.gif) top left repeat; 
border:1px solid #D6D7D9;}
.button a:hover, .tm div { background: url(images/button_active.gif) top left repeat; color:#280092; }
HTML5
1
<input type=image  src="images/signup.gif"  value="Login" class=button>
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
12.09.2012, 03:35
Ответы с готовыми решениями:

Смена изображения по нажатию кнопки
Добрый день. Помогите пожалуста новечку. Нужно по нажатию кнопки менять катинку типа отжата картинка погашеного светодиода нажата картинка...

Смена класса css изображения в зависимости от разрешения экрана
Всем привет! Не получается решить следующую проблему: Есть изображение в записи на Wordpress. Нужно чтобы при просмотре с компьютера к...

Стилизация кнопки отправки формы
Вот есть 2 кнопки, одна пересылает по ссылке и имеет класс CSS(вроде так оно называется), в общем у неё картинка вместо кнопки, и она...

8
Почетный модератор
12274 / 5340 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
12.09.2012, 09:04
CSS
1
2
input.button {background: #ccc}
input.button:hover {background: red}
1
4 / 4 / 5
Регистрация: 09.08.2012
Сообщений: 225
12.09.2012, 19:23  [ТС]
Cпасиб! выручил все работает как часы

Цитата Сообщение от Taatshi Посмотреть сообщение
CSS
1
2
input.button {background: #ccc}
input.button:hover {background: red}
Добавлено через 6 минут
А допустим кнопка не отправляет форму, а при нажатии переходит на ссылку, где ссылку вставить в html в кнопке тела чтобы это работало?
0
Почетный модератор
12274 / 5340 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
12.09.2012, 19:29
Здесь главное использовать :hover - это класс при наведении мышки. Его можно прикрутить к чему угодно - к кнопке, к ссылке, к картинке... все равно, к чему. Вот по необходимости и смотрите.

Или уточните вопрос... не совсем поняла про ссылку и кнопку.
0
4 / 4 / 5
Регистрация: 09.08.2012
Сообщений: 225
12.09.2012, 19:50  [ТС]
Сейчас посмотрел впринципе я сделал так в теле кнопки которая интерисует добавил:

HTML5
1
onclick="location.href='signup.php'"
пока устраивает! подругому не знаю.

Цитата Сообщение от Taatshi Посмотреть сообщение
Здесь главное использовать :hover - это класс при наведении мышки. Его можно прикрутить к чему угодно - к кнопке, к ссылке, к картинке... все равно, к чему. Вот по необходимости и смотрите.

Или уточните вопрос... не совсем поняла про ссылку и кнопку.
0
 Аватар для alpex
603 / 578 / 103
Регистрация: 16.07.2012
Сообщений: 1,762
13.09.2012, 09:49
что бы кнопка отправляла на сервер данные нужно в форме,в которой находится кнопка, прописать путь к файлу, примерно так
HTML5
1
2
3
<form action='signup.php'>
<input type=image  src="images/signup.gif"  value="Login" class=button>
</form>
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
13.09.2012, 12:27
belltone, Что бы не мучить себя с JS (on click) актуальнее было бы использовать стили...
и получить вот нечто такое...

HTML CODE
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
31
32
33
34
35
36
37
38
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
 
<body>
<style>
div.buttons a{
    padding: 3px 5px;
    color: #000;
    background: #CCC;
    border: 2px groove #333;
    text-decoration: none;
    border-radius: 4px;
}
div.buttons a:hover{
    border: 2px inset #333;
    box-shadow: inset 1px -1px 1px #666;
}
div.buttons a:active {
    position: relative;
    bottom: -1px;
    padding: 4px 4px 2px 6px;
    border: 2px outset #333;
    box-shadow: inset 2px 2px 2px #666;
}
</style>
 
<div class="buttons">
    <a href="#">Я вовсе не кнопка</a>
    <a href="#"><b>Я тоже не кнопка</b></a> 
    <a href="#"> и я ... </a> 
</div>
 
</body>
</html>


Пример можно посмотреть тут
0
4 / 4 / 5
Регистрация: 09.08.2012
Сообщений: 225
16.09.2012, 02:06  [ТС]
Попробуем и так думаю лучьше, а вот как сделать это на другие элементы думаю не буду создавать отдельную тему вот пример:


для стрелки стиль. или chechbox и radiobutton где можно про это прочесть как делать такие штуки?
0
Почетный модератор
12274 / 5340 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
16.09.2012, 03:37
Все же создаем отдельную тему соответственно правилам форума: Один вопрос - одна тема.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
16.09.2012, 03:37
Помогаю со студенческими работами здесь

Смена изображения при нажатии на кнопки
Доброе утро\День\Вечер! Есть проблема( Есть несколько кнопок и один Image1, как реализовать так что бы при нажатии на например на первую...

Отправки формы с изображением вместо кнопки
Как сделать так чтоб отправить изображения как кнопку Submit? &lt;form action=&quot;index.php&quot; method=&quot;POST&quot;&gt; &lt;input...

свойство border-color у кнопки отправки формы
:wall: есть форма регистрации, все нормально работает) Но, когда любое поле ввода активно, т.е например при вводе логина, рамка кнопки...

Смена фонового изображения формы
Доброе время суток..) Буду очень признателен, если подскажете... У меня в ресурсах проекта есть картинка. Как сделать, что бы при...

Запрет повторного нажатия кнопки при отправки формы
Здравствуйте При отправки формы, пользователь успевает нажать кнопку несколько раз. Нужно - чтобы копка блокировалась в тот момент, когда...


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

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru