кнопки, последний раз, обещаю :)) @ DeForum.ru

Требуется сделать менюшку. Кнопки -- гифы. При наведении, часть кнопки должна окрашиваться в другой цвет.

Вопрос собственно не в коде (их масса по ин-ту), а в том, на чем это лучше делать? Java или CSS?

Т.е. те кто предлагает на CSS -- говорят, что это куда лучше чем джава, другие говорят, что не везде поддерживается.
Так на чем таки лучше???

Никогда толком не делал таких кнопок, пару раз да и то оч. давно, плохо я к ним отношусь, но тут приспичило :glasses:

ЗЫ если кто-то даст ссылку на действительно хороший код по этому делу -- буду признателен. Спасибо.

Ну чувак, ну чувааак, ну чуваааак же!
Что CSS? Что JS? Покажи народу, то есть нам — твою картинку, мы тебе скажем. Ну нельзя же так :-)
Я вот могу тебе двойной способ показать. Там и первое, и второе используется, как с этим быть?

А хороший код тебе дать — нет проблем. ТЗ почетче составь и будет тебе счастье :-)

Кнопки на Яве - это во Фронтпейдж. Оно там автоматом делает. Может таки на ЯваСкрипте? Тогда что Вам нужно от них? Какие условия? Требования?

plumpy,

Akela, ЯваСкрипте
Да все стандартно: http://www.ljplus.ru/img/doks/buttons.gif
Изменяться должен не цвет, а сама картинка. Насколько я помню, то в 2-х позициях можно и на CSS сделать.
Единственное, что прелоадер на CSS делается ли...
Но в общем должна быть кнопка, у которой есть 3 позиции, неактивная, курсор на кнопке и при нажатии. Т.е. по сути это 3 картинки.

Вроде изложил :glasses:

Да! касательно предложений просто сменить цвет...
сама кнопка (рисунок) имеет места, которые не должны изменяться, т.е. этот вариант не подходит )

Doks, это делается или на CSS, или на стандартных обработчиках событий самого браузера. Можно и на JS. Прелоад ессно на JS, вне зависимости от метода смены картинок.

А вообще-то чушь все эти объясения. Код в студию вместе с картинками.

COLT, сделать это можно как угодно. См. выше! Я сказал о том, что прелоадер только на JS, ессно.

COLT, Akela, погодите... а прелоадер то нужен или это получится, что при наведении человек будет ждать загрузки картинки, а если модем и т.д. :smirk:

COLT, не, ну про это мы говорили... код на вскидку не помню, но помню, что относительно прост, вопрос в том, все ли это увидят?

Akela,

Цитата:

Код в студию вместе с картинками

это кому адресованно, если мне, то какой код, таблицы? :gent:

Doks, страницу, где это нужно сделать. Прелоадер вообще говоря нужен всегда, бо очень неприятно видеть подгрузку шматков картинок. Будет ли ждать - вопрос отдельный. Какая линия, какие картинки. Как правило они не настолько велики, чтобы это было заметным. Тем не менее перестраховаться стоит. А вот в самой подмене картинок имхо лучше обойтись без лишних скриптов. Везде ли это будет видно? В современных стандартных браузерах везде будет видно и то, и другое. А нетандартную экзотику нужно отрубать от обслуживания ещё на сервере.

На самом деле есть только одна беда. На методах без скрипта может лихо притормаживать ИЕ в силу своих родовых травм. И вообще - не вижу предмета обсуждения - сделайте и так и так и посмотрите что больше нравится. Протесируйте на разных браузерах. В чём проблема?

COLT, в тупую?

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример</title>
<style type="text/css" media="all">
a   {
background-image: url(1.gif);
}

a:hover {
  background-image: url(2.gif);
}
</style>
</head>
<body>
<a class="a1" href="#">
aaa 
</a>
</body>
</html>

Далее возможны варианты. Но, вообще говоря, для этого есть (см. выше) стандартные обработчики браузера. Вот там возможна смена стилей, подмена классов и т. д.

COLT, <img src="1.gif" onMouseOver="this.src=2.gif" onMouseOut="this.src=1.gif"> типа так?

des, варианты в студию. Тут и рассудим.

2des. Да нет, наверно он имеет ввиду вариант со смещением бекграунда. То есть картинка бекграунда уже нарисована с двумя (можно и с тремя) состояниями.

arlekino,

Цитата:

картинка бекграунда уже нарисована с двумя (можно и с тремя) состояниями.

это, простите, как? Подробнее пожалуйста! Все будут рады узнать новое слово в веб-технологиях. Что куда будет смещаться и как в одной картинке поместятся несколько состояний? Вы собираетесь вызывать разные кадры анимированного гифа? Или разные слои тифа?

COLT, А! Ну или так. Но это не есть кашерно, бо очень зависит от многих превходящих. Особенности браузеров, особенности вёрстки и т. д. Лучше так не делать.

des, а так код будет длинным, т.е. к примеру у меня кнопок 20 штук )))))

По Прежнему Хочу Увидеть Реальную Кнопку
Это что, нереально? :-)

Примеров кнопок и примеров скриптов миллион. Если Вы занимаетесь разработкой, то у Вас есть Дрим. В нём есть встроенные функции. Если Вы занимаетесь разработкой и у Вас нет Дрима, то ии он Вам УЖЕ не нужен, тогда Вы знаете всё про кнопки, или Вы занимаетесь НЕ разработкой. Если вы занимаетесь чем-то другим, то зачем Вам кнопка?

http://design.intessera.com/temp/test/

ок, всем спасибо )
я порылся и решил это так:

Цитата:

Вопросы:
1) Насколько это надежно?
2) По прелоадеру:
Каким образом можно сделать прелоадер (из того, что я показал) скажем на 10 картинок, а то бредово прописывать каждой " var myImg = new Image(); myImg.src = "…";?

plumpy, спасибо, посмотрел на js, но нифига там не понял :glasses:

Что значит "надёжно"? Работает? На разных браузерах проверили? Так зачем нас спрашивать? Только не забудьте NN4 отрубить. И вообще, поставьте себе наконец Дрим, если Вы уж занялись кодированием, там все эти вещи ВСТРОЕНЫ!

Код:

<script type="text/JavaScript">
function preloadImages() {
  var d=document; if(d.images){ if(!d.p) d.p=new Array();
    var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
}
</script>
</head>
<body onload="preloadImages('1.gif','2.gif','3.gif','4.gif','5.gif')">

Doks,
Поставь в коде
for(i=1; i<=10; i++)

кнопки будут зваться
b1.gif... b10.gif
b1_on.gif... b10_on.gif

DeДверь
Логин:
Пароль:
	Автологин