Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.85/125: Рейтинг темы: голосов - 125, средняя оценка - 4.85
Особый статус
742 / 144 / 5
Регистрация: 16.07.2009
Сообщений: 2,157
Записей в блоге: 1
1

сделать кнопку , которая изменяется при наведении и принимает прежний вид при уходе с кнопки

18.02.2010, 16:31. Показов 26009. Ответов 15
Метки нет (Все метки)

Ребята, теперь я буду вас расспрашивать о вебе постоянно. Прошу ответить - надо сделать кнопку , которая изменяется при наведении и принимает прежний вид при уходе с кнопки, и изменяется при нажатии, НО СРАЗУ ПОСЛЕ НАЖАТИЯ возвращается в вид при наведении. Ребята, как єто сделать, помогите, у меня Дреамваевер.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.02.2010, 16:31
Ответы с готовыми решениями:

Изменить вид кнопки при наведении курсора
Помогите чайнику.

Событие при наведении/уходе со ссылки
Кто подскажет код что-бы при наведение на ссылку изображение менялась, а при убирании указателя,...

При наведении курсора на окно программы он принимает вид "Система занята"
Доброго времени суток. Я недавно изучаю асм по книге Владислава Пирогова "Ассемблер для Windows" 4...

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

15
701 / 573 / 59
Регистрация: 18.11.2008
Сообщений: 2,147
18.02.2010, 17:26 2
может css подойдет?:
PHP
1
2
3
4
5
6
7
8
9
.button {
  // обычное состояние
}
.button:hover {
  // состояние при наведении
}
.button:active {
  // состояние при нажатии
}
3
Особый статус
742 / 144 / 5
Регистрация: 16.07.2009
Сообщений: 2,157
Записей в блоге: 1
18.02.2010, 17:33  [ТС] 3
Извините, но я не умею работать с кодом. Куда єто надо вставить, подскажите!....
А если я правильно понимаю смісл кода, то тоже самое - картинка, другая при наведении, другая при нажатии - я уже сделал, но после нажатия кнопка не возвращается в состояние при наведении, а остаётся в состоянии нажатой.
0
701 / 573 / 59
Регистрация: 18.11.2008
Сообщений: 2,147
19.02.2010, 08:12 4
Цитата Сообщение от Proffessional Посмотреть сообщение
Куда єто надо вставить, подскажите
это вставляется в css теги (<STYLE></STYLE>) либо в выносится в отдельный css-файл

Цитата Сообщение от Proffessional Посмотреть сообщение
А если я правильно понимаю смісл кода, то тоже самое - картинка, другая при наведении, другая при нажатии - я уже сделал, но после нажатия кнопка не возвращается в состояние при наведении, а остаётся в состоянии нажатой
покажи код что ты уже сделал, посмотрим что там не так
1
1 / 1 / 0
Регистрация: 06.02.2010
Сообщений: 45
19.02.2010, 16:58 5
А можно сделать тоже самое с тегом intup
Вот типо:
HTML5
1
2
3
<form action="Куда нибуть" method="POST">
<p><input name="submit_button" type="submit" value="Как то назвать"></p>
</form>
И также сделать как ты сказал.
1
44 / 44 / 11
Регистрация: 10.06.2009
Сообщений: 311
Записей в блоге: 2
22.02.2010, 20:18 6
alёxa,

HTML5
1
2
3
<form action="teh.html">
<input name="submit_button" type="button" value="RU">
</form>
По идее, при нажатии кнопка должен осуществляться переход по ссылке, но переход не происходит. Подскажите, пожалуйста, почему...
0
Особый статус
742 / 144 / 5
Регистрация: 16.07.2009
Сообщений: 2,157
Записей в блоге: 1
22.02.2010, 20:47  [ТС] 7
Должен быть приблизительно такой код
HTML5
1
2
3
  <form name="form1" method="post" action="http://example.com.ua/">
    <input type="submit" name="Submit" value="Наш сайт">
  </form>
Если сравнить, то правильно будет
HTML5
1
2
3
 <form name="form1" method="post" action="teh.html">
    <input type="submit" name="Submit batton" value="RU">
  </form>
Вы просто перепутали последовательность операторов, в такой мешаниние, извините, конечно, браузер не разберётся.

Добавлено через 9 минут
Благодарен за помощь, разобрался. Теперь вопрос такой
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function() {
 
        function Animator(node, initialOpacity, speed) {
                this.node = node;
                this.opacity = this.initialOpacity = initialOpacity;
                this.speed = speed;
                this.flagIn = false;
        }
        
        Animator.prototype = {
                bind: function(type, listener) {
                        if(this.node.addEventListener) this.node.addEventListener(type, listener, false);
                        //@cc_on this.node.attachEvent('on' + type, listener);
                },
                process: function(type1, type2) {
                        var _this = this;
                        this.bind(type1, function() {
                                _this.flagIn = true;
                                _this.fadeIn();
                        });
                        this.bind(type2, function() {
                                _this.flagIn = false;
                                _this.fadeOut();
                        });
                },
                setOpacity: function() {
                        this.node.style.opacity = this.opacity;
                        //@cc_on if(@_jscript_version < 5.8) this.node.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (this.opacity * 100) + ')';
                },
                fadeIn: function() {
                        var _this = this;
                        setTimeout(function() {
                                if(_this.opacity < 1 && _this.flagIn) {
                                        _this.setOpacity(_this.opacity += 0.1);
                                        _this.fadeIn();
                                }
                        }, this.speed);
                },
                fadeOut: function() {
                        var _this = this;
                        setTimeout(function() {
                                if(_this.opacity > _this.initialOpacity) {
                                        _this.setOpacity(_this.opacity -= 0.1);
                                        _this.fadeOut();
                                }
                        }, this.speed);
                }
        };
        
        new Animator(document.getElementById('animated'), 0.2, 50).process('mouseover', 'mouseout');
        new Animator(document.getElementById('ani1'), 0.2, 50).process('mouseover', 'mouseout');
 
        
};
</script>
<style type="text/css">
#animated {
opacity: 0.1;
}
body {
    background-image: url(file:///E|/Andrew/background.png);
    background-repeat: repeat-x;
}
</style>
<!--[if IE]>
<style type="text/css">
#animated {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=05);
}
</style>
<![endif]-->
</head>
 
<body>
<div align="center"><img src="/logo.png" width="728" height="200" align="absmiddle"><img src="some.png" alt="" name="ani1" width="150" height="250" align="right" class="animated" id="ani1" /><img src="file:///E|/Andrew/some.jpg" alt="" width="150" height="250" align="left" id="animated" />
</div>
<div align="justify"></div>
</body>
</html>
всё вроде, нормально, но картинка logo.png несмотря на наличие по адресу, не отображается. Что делать? И ещё вот эта картинка здесь
HTML5
1
<img src="file:///E|/Andrew/some.jpg" alt="" width="150" height="250" align="left" id="animated" />
при загрузке в отличии от первой не становится прозрачной. Что делать?
1
44 / 44 / 11
Регистрация: 10.06.2009
Сообщений: 311
Записей в блоге: 2
22.02.2010, 20:56 8
Уихахаха!!!.. Спасибо Вам громаднейшее просто!!!... Но теперь интересует вопрос: как поставить вместо стандартного цвета кнопки картинку?)
Не помогли:
CSS
1
2
3
4
5
.ru
{
margin-left:90%;
background-image:url(img\ru.jpg);
}
HTML5
1
2
3
 <form class=ru name="form1" method="post" action="teh.html">
    <input type="submit" name="Submit batton" value="RU">
  </form>
HTML5
1
2
3
 <form name="form1" method="post" action="teh.html">
    <input type="submit" name="Submit batton" value="RU"><img src="img\ru.jpg">
  </form>
может если знаете, подскажите, пожалуйста ..

Добавлено через 7 минут


HTML5
1
2
3
4
body {
    background-image: url(file:///E|/Andrew/background.png);
    background-repeat: repeat-x;
}
Не проще картинку просто перенести в папку с исходным файлом?.. Адрес такой длины писать не потребуется. Ну по крайней мере, как делает большинство, в папке с исходником создаётся папка "img" и адрес тогда будет выглядеть как "img\название_рисунка". Просто совет


HTML5
1
<img src="/logo.png"
уберите косою черту перед названием рисунка. Возможно она лишняя =) Ведь в следующих src адрес написан без неё

HTML5
1
<img src="file:///E|/Andrew/some.jpg" alt="" width="150" height="250" align="left" id="animated" />
при загрузке в отличии от первой не становится прозрачной. Что делать?
А тут я лично помочь ничем не могу, т.к. с JavaScript пока не дружу.. Я знаю, что с помощью фильтров можно сделать картинку прозрачной, но Опера не видит фильтров
1
Особый статус
742 / 144 / 5
Регистрация: 16.07.2009
Сообщений: 2,157
Записей в блоге: 1
22.02.2010, 21:10  [ТС] 9
Убрал черту, и рисунок вообще пропал. В dreamweaver он виден, в firefox нет. Может переместить код в другое место?

Исправил, адрес был не верный, теперь работает. Спасибо!
0
44 / 44 / 11
Регистрация: 10.06.2009
Сообщений: 311
Записей в блоге: 2
22.02.2010, 21:18 10
Ну место кода нормальное.. Рисунок по идее должен быть.

Интересует параметр его как
HTML5
1
align="absmiddle"
Если не ошибаюсь, то он выравнивает рисунок по центру?.. нельзя ли его заменить на "center" =).. Снова совет просто
1
Особый статус
742 / 144 / 5
Регистрация: 16.07.2009
Сообщений: 2,157
Записей в блоге: 1
22.02.2010, 21:24  [ТС] 11
Можно. Я уже справился, спасибо, обращайтесь!
0
44 / 44 / 11
Регистрация: 10.06.2009
Сообщений: 311
Записей в блоге: 2
22.02.2010, 21:28 12
Но теперь интересует вопрос: как поставить вместо стандартного цвета кнопки картинку?)
Не помогли:
CSS
1
2
3
4
5
.ru
{
margin-left:90%;
background-image:url(img\ru.jpg);
}
HTML5
1
2
3
 <form class=ru name="form1" method="post" action="teh.html">
    <input type="submit" name="Submit batton" value="RU">
  </form>
и

HTML5
1
2
3
<form name="form1" method="post" action="teh.html">
    <input type="submit" name="Submit batton" value="RU"><img src="img\ru.jpg">
  </form>
может если знаете, подскажите, пожалуйста ..
0
Особый статус
742 / 144 / 5
Регистрация: 16.07.2009
Сообщений: 2,157
Записей в блоге: 1
23.02.2010, 08:27  [ТС] 13
Знаете, у меня тоже такая проблема. И делаю я сайт, кстати, для Одесской компании. Разберусь отвечу а пока тоже жду.
0
701 / 573 / 59
Регистрация: 18.11.2008
Сообщений: 2,147
23.02.2010, 08:38 14
Цитата Сообщение от KaRaNTiN Посмотреть сообщение
как поставить вместо стандартного цвета кнопки картинку?)
класс нужно задавать не для формы, а для кнопки (т.е. для input)

Добавлено через 1 минуту
Цитата Сообщение от KaRaNTiN Посмотреть сообщение
background-image:url(img\ru.jpg);
и слеш тут желателен другой:
background-image:url(img/ru.jpg);
2
Особый статус
742 / 144 / 5
Регистрация: 16.07.2009
Сообщений: 2,157
Записей в блоге: 1
23.02.2010, 09:38  [ТС] 15
пробую....

Добавлено через 10 минут
Всё сделал, вот код, однако, не работает.
HTML5
1
2
3
<form action="http://asi_znatok.livejournal.com/" method="get" name="form1" >
  <input type="submit" name="Submit" value="Кнопка" background-image:url"(\logo.png)">
</form>
Добавлено через 26 минут
И так пробовал
HTML5
1
2
3
<form action="http://Asi_znatok.livejournal.com/" method="post" name="form1" >
  <input name="Submit" value="кнопка" type=image src="/space.png">
</form>
отсюда http://www.chem.msu.su/rus/wwwbook/faqs.html не работает, только текст остался.
0
701 / 573 / 59
Регистрация: 18.11.2008
Сообщений: 2,147
23.02.2010, 11:14 16
HTML5
1
<input style="background-image: url(logo.png);">
а еще не забываем задавать самостоятельно ширину и высоту для кнопки, ибо размеры кнопки и картинки вероятнее всего будут разными
2
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
23.02.2010, 11:14

Как сделать кнопку прозрачной при наведении?
Я прописываю для кнопки прозрачный цвет при наведении: this.btn.BackColor =...

Сделать, чтобы при наведении на кнопку, она наполовину меняла цвет
Всем привет. Можете помочь, как можно сделать, чтобы при наведении на кнопку, она наполовину меняла...

Как сделать, чтобы кнопки увеличивались при наведении курсора?
Здравствуйте! Скажите пожалуйста как сделать чтобы кнопки увеличивались как на этом сайте...

Создать свой компонент(кнопку) которая при наведении на него указателя мыши совершает прыжки верх и вниз
Кнопка должна не бегать а прыгать верх вниз(когда ты навел курсор на нее, а после того как ты...


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

Или воспользуйтесь поиском по форуму:
16
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.