Новости
Видео
Microsoft
Windows 10
Железо
Программы
Форум

Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » Анимированные кнопки средствами CSS

Ответить
Настройки темы
Анимированные кнопки средствами CSS

Аватара для nogod

Новый участник


Сообщения: 20
Благодарности: 0

Профиль | Отправить PM | Цитировать

Здрасьте, у меня собственно по сабжу вопрос:
есть ли какой-нибудь проверенный способ сделать вышеупомянутые
кнопки?

Вот вымученный мною код:

a {  background-image: url("butt01.jpg"; height: "50px";  width: "100px";}

a:hover { background-image: url("butt02.jpg";}

a>img { background-image: url("butt01.jpg"; position: relative; top: 2px;}

a>img:hover { background-image: url("butt02.jpg";}

Имеется две картинки для кнопки 100х50 и прозрачный гиф. Гиф расширяется до
размеров кнопки, и вставляется между ссылочными тэгами. hover меняет бэкграунд.
Так вот:
в мозилле, эксплорере (шестом, насчёт пятого не знаю), седьмом навигаторе и
седьмой же опере всё более-менее работает нормально.
В шестых же версиях навигатора и оперы не работает вообще!

Вобщем не знаю что делать, может всё уже давно придумали, а я тут велосипед изобретаю.
Хотелось бы узнать.

линк: http://xlam.nm.ru/csstest.html

Отправлено: 01:24, 15-06-2004

 

Аватара для vadimiron

Ветеран


Сообщения: 1864
Благодарности: 120

Профиль | Отправить PM | Цитировать

Мне подобные  RollOver эффекты больше с помощью Javascript делать нравится, а то с CSS не всего можно добится
a:hover не во всех браузерах может background-image поддерживать, так что делай лучше это с помощью Javascript, он должен во всех браузерах поддерживатся

В инете полно статей про это

-------
Fortes fortuna adiuvat

Отправлено: 02:43, 15-06-2004 | #2



Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля.


Аватара для Guest

Guest

Профиль | Цитировать

vadimiron

Не совсем я согласен с тобой.  JavaScript может быть и отключен. Сейчас пошла такая мода (из соображений безопасности наверное). С помощью CSS код лаконичней получается. Плюс к тому нет прелоада картинок и самих картинок меньше надо.
Правда в старых браузерах (я IE3,4 и NN4 имею ввиду) CSS может и не сработать.

nogod

На мой взгляд лучший вариант:
http://www.tanfa.co.uk/css/examples/...no-preload.asp

Отправлено: 13:27, 15-06-2004 | #3


Новый участник


Сообщения: 16
Благодарности: 0

Профиль | Отправить PM | Цитировать

Собственно мало, кто ща IE 3, 4 пользуется...

Отправлено: 15:25, 15-06-2004 | #4


Аватара для nogod

Новый участник


Сообщения: 20
Благодарности: 0

Профиль | Отправить PM | Цитировать

to vadimiron:

с яваскриптом сложностей никаких нет
но связываться с ним неохота. У меня он как раз таки
отключён.

тут скорее спортивный интерес

to Guest:

спасибо, интересный способ.
беру на вооружение!

Отправлено: 18:47, 18-06-2004 | #5


Ночной странник


Contributor


Сообщения: 4050
Благодарности: 83

Профиль | Сайт | Отправить PM | Цитировать

nogod
про шестую оперу можешь забыть ей сейчас никто не пользуется!

-------
можно практически все, но просто мы это еще не знаем.
главный враг програмиста это копипастинг
За хорошее сообщение не забываем нажимать ссылочку "Полезное сообщение"!

Отправлено: 22:31, 18-06-2004 | #6


Аватара для nogod

Новый участник


Сообщения: 20
Благодарности: 0

Профиль | Отправить PM | Цитировать

хотелось бы верить.

Отправлено: 16:30, 19-06-2004 | #7


Старожил


Сообщения: 236
Благодарности: 0

Профиль | Отправить PM | Цитировать

nogod

а Ты ДХТМЛ не пробовал использовать или просто не хочешь?) а то я вопрос поленился дочитать

вот я бы так сделал:

<a href="" onmouseover="document.t1.src='1.jpg';" onmouseout="document.t1.src='2.jpg';">
<img src="2.jpg" name="t1">
</a>

но тут всерано элементы Jscript присутствуют.

Отправлено: 01:52, 24-06-2004 | #8


Ночной странник


Contributor


Сообщения: 4050
Благодарности: 83

Профиль | Сайт | Отправить PM | Цитировать

FADE
Я настоятельно рекомендую читать всю тему целиком перед тем как добавлять в нее сообщение. Если бы вы прочитали от начала до конца вы бы поняли что вопрос не в том "как сделать анимированную кнопку" а в том "как сделать анимированную кнопку с помошью CSS", вопрос про DHTML здесь уже поднимался!

[s]Исправлено: Vlad Drakula, 2:10 24-06-2004[/s]

-------
можно практически все, но просто мы это еще не знаем.
главный враг програмиста это копипастинг
За хорошее сообщение не забываем нажимать ссылочку "Полезное сообщение"!

Отправлено: 02:02, 24-06-2004 | #9


Аватара для nogod

Новый участник


Сообщения: 20
Благодарности: 0

Профиль | Отправить PM | Цитировать

FADE

В рамках борьбы за чистоту HTML яваскрипт не приветствуется

Отправлено: 16:47, 24-06-2004 | #10



Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » Анимированные кнопки средствами CSS

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
Обои и Значки - Анимированные обои alexataa Оформление Windows XP 14 23-06-2010 18:08
Debian/Ubuntu - Неправильно работает Numpad: кнопки '+50,' работают как кнопки мыши Viktorr Общий по Linux 0 29-04-2009 20:40
Поворот объекта средствами CSS Coutty Вебмастеру 6 24-04-2008 14:40
!Срочно! Как средствами html и css (+) DRadmin Вебмастеру 3 14-10-2007 17:21


« Предыдущая тема | Следующая тема »


 
Переход