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

Ответить
Аватара пользователя
nogod

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

Сообщение nogod »

Здрасьте, у меня собственно по сабжу вопрос:

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

кнопки?



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



a {  background-image: url("butt01.jpg&quotИзображение; height: "50px";  width: "100px";}



a:hover { background-image: url("butt02.jpg&quotИзображение;}



a>img { background-image: url("butt01.jpg&quotИзображение; position: relative; top: 2px;}



a>img:hover { background-image: url("butt02.jpg&quotИзображение;}



Имеется две картинки для кнопки 100х50 и прозрачный гиф. Гиф расширяется до

размеров кнопки, и вставляется между ссылочными тэгами. hover меняет бэкграунд.

Так вот:

в мозилле, эксплорере (шестом, насчёт пятого не знаю), седьмом навигаторе и

седьмой же опере всё более-менее работает нормально.

В шестых же версиях навигатора и оперы не работает вообще!



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

Хотелось бы узнать.



линк:
http://xlam.nm.ru/csstest.html
Аватара пользователя
vadimiron

Re: Анимированные кнопки средствами CSS

Сообщение vadimiron »

Мне подобные  RollOver эффекты больше с помощью Javascript делать нравится, а то с CSS не всего можно добится

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



В инете полно статей про это
Аватара пользователя
Гость

Re: Анимированные кнопки средствами CSS

Сообщение Гость »

vadimiron



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

Правда в старых браузерах (я IE3,4 и NN4 имею ввиду) CSS может и не сработать.



nogod



На мой взгляд лучший вариант:

http://www.tanfa.co.uk/css/examples/...no-preload.asp
Аватара пользователя
Гость

Re: Анимированные кнопки средствами CSS

Сообщение Гость »

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

Re: Анимированные кнопки средствами CSS

Сообщение 007G »

to vadimiron:



с яваскриптом сложностей никаких нет

но связываться с ним неохота. У меня он как раз таки

отключён.



тут скорее спортивный интересИзображение



to Guest:



спасибо, интересный способ.

беру на вооружение!
Аватара пользователя
Vlad Drakula

Re: Анимированные кнопки средствами CSS

Сообщение Vlad Drakula »

nogod

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

Re: Анимированные кнопки средствами CSS

Сообщение nogod »

nogod



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



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





Изображение





но тут всерано элементы Jscript присутствуют.
Аватара пользователя
Vlad Drakula

Re: Анимированные кнопки средствами CSS

Сообщение Vlad Drakula »

FADE

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



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

Re: Анимированные кнопки средствами CSS

Сообщение nogod »

FADE



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

Вернуться в «Вебмастеру»