X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Имитация нажатия кнопки
Chezy
Chezy
Topic Starter сообщение 2.2.2010, 19:29; Ответить: Chezy
Сообщение #1


При нажатии на картинку-ссылку, она просто обводится, можно ли имитировать физическое нажатие (вдавливание либо затемнение), и как? Заранее спасибо..
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Htmlmaster
Htmlmaster
сообщение 2.2.2010, 19:38; Ответить: Htmlmaster
Сообщение #2


а не дадумались использовать border d в графическом редакторе
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Chezy
Chezy
Topic Starter сообщение 2.2.2010, 19:46; Ответить: Chezy
Сообщение #3


хм.. я не в графическом работаю, а сама - в блокноте) есть смысл перейти на графический?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Htmlmaster
Htmlmaster
сообщение 2.2.2010, 19:58; Ответить: Htmlmaster
Сообщение #4


я имел ввиду:делать кнопки в граф редакторе:nea:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Chezy
Chezy
Topic Starter сообщение 2.2.2010, 20:01; Ответить: Chezy
Сообщение #5


значит я немного не понимаю( сделала их в фотошопе, как картинки.. есть редакторы для создания именно кнопок? извиняюсь, если кажусь глупой) объясните, пожалуйста)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
сообщение 2.2.2010, 20:08; Ответить: locky-yotu
Сообщение #6


Htmlmaster, не грубите девушке.
Chezy,обычно делается так:
Делается контейнер (div) c overflow:hidden. В нем располагается картинка, заключенная в тег <a>. Эта картинка должна состоять из 3х частей: нормальное состояние кнопки, при наведении и при нажатии.
Пусть наша кнопка имеет высоту 159 пикселей. Тогда div должен быть высотой 159/3 = 53px.

Ну и пишем такой код:

<style>
.my_button {width:865px;height:53px;overflow:hidden;}
</style>
<div class="my_button">
<a href="#"><img src="images/btn.jpg" alt="" onmouseover="this.style.marginTop='-53px'" onmousedown="this.style.marginTop='-106px'" onmouseout="this.style.marginTop='0'" onmouseup="this.style.marginTop='-53px'" /></a>
</div>
Картинку прилагаю для ознакомления))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Htmlmaster
Htmlmaster
сообщение 2.2.2010, 20:08; Ответить: Htmlmaster
Сообщение #7


нет, очень хорошо использовать flash там такое есть, создаёте клавишу в обычном состоянии, в нажатом состояние, а потом с помощью javascript, привязываете их к событию, чтобы картинки менялись
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Chezy
Chezy
Topic Starter сообщение 2.2.2010, 20:11; Ответить: Chezy
Сообщение #8


Спасибо большое) вроде пока понятно.. сейчас попробую)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Htmlmaster
Htmlmaster
сообщение 2.2.2010, 20:13; Ответить: Htmlmaster
Сообщение #9


извините:niasilil:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AndreySmith
AndreySmith
сообщение 2.2.2010, 20:27; Ответить: AndreySmith
Сообщение #10


Обводится она наверное в firefox? Нужно прописать свойства чтобы картинки-ссылки не обводились, и не подчеркивались.


А то что вы ходите сделать нужно прописывать с помощью псевдоклассовЖ
a:link - просто ссылка
a:hover - дейтвие при наведении мышки на ссылку
a:active - нажатая ссылка
a:visited - посещенная ссылка

Для действия a:hover, к пример можно сделать чтоб кнопка становилась светлее или темнее. Если вы нарисовали кнопку, то можно сделать ролловер. C помощью css. сделать чтобы фоновая картинка сменалась при наведении мышки на другую фоновую картинку. Есть маленький минус этого способа - нужно сделать прелоад картинок. Но это мелочь.
Можно сделать одну длинную картинку и просто при наведении мышки менять ее позицию - тогда не нужно делать прелоад)

С помощью css много способов сделать такие кнопки. пользуйтесь поиском на форуме;)


Можно сделать так:

<a href="http://site.com" title="site.com">
<img src=" rollOver.png" height="" width="" alt=""
onmouseover="this.src='img/rollOn.png'" - это картинка которая появится при наведении
onmouseout="this.src='img/rollOver.png'" – она появится когда Вы уберете мышку.
onmousedown="this.src='img/press.png'" /></a> - она появится при нажатии на мышку (когда она зажата)


onclick="" – картинка появляется после того как мышку отпустили. (т.е. после клика).

Это как альтернатива, пример кнопки. Тут ненадо делать фон. Т.е. без css, и если картинки прозрачные, то легче пофиксить прозрачность картинок для ie6.


Т.е. для каждого события (нажатие, наведение...) нужно сделать свою картинку, все они должны быть одинакового размера. Не обязательно делать картинки на все события, можно только для одного - в зависимости от дизайна.

Успехов :goodpost:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Имитация работы залог успеха?
15 metvekot 1175 15.3.2024, 10:37
автор: Skyworker
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыНадо поменять картинки кнопки и всё прочее.
Сделать круто, чтобы не стыдно за сайт
0 atavisma 2975 6.4.2017, 19:04
автор: atavisma
Открытая тема (нет новых ответов) Добавить к коду кнопки функцию Canvas
0 Anshag 5059 25.11.2015, 12:41
автор: -Anshag-
Открытая тема (нет новых ответов) DLE: нужно продублировать кнопки "скачать"
4 Вентилятор 2295 8.8.2015, 16:41
автор: Hamster69
Открытая тема (нет новых ответов) Пагинация, как добавить кнопки вперед и назад?
0 SlippingForest 5926 1.2.2015, 22:16
автор: -SlippingForest-


 



RSS Текстовая версия Сейчас: 29.3.2024, 0:48
Дизайн