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

[nogod]

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

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

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

[vadimiron]

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

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

[Guest]

vadimiron

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

nogod

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

[007G]

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

[nogod]

to vadimiron:

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

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

to Guest:

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

[Vlad Drakula]

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

[nogod]

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

[FADE]

nogod

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

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

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

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

[Vlad Drakula]

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

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

[nogod]

FADE

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