Roloover меню на js

[optic18]

Всем доброго времени суток!

В общем надо сделать такое. Эсть меню, когда оп нему водишь мышкой, под каждым пунктом меню подсвечивается картинка. Такая вещь в принципе много где описана, но е меня есть нюанс. Многи статьи, где описывается решение етой задачи работают с двумя картинками.тюе для исходного состояния, и при наведении мышки картинка меняется на другую. А как сделать так, чтобы картинка появлялась просто про наведении мышки, а когда мышка не наведена то картинки нету не какой, т.е допустим просто название пункта меню. Заранее благодарен за внимание

[Veseloff]

А в чём проблема? Сами уже пробовали что-то сделать?

[optic18]

я то начал но пока не могу представить как сделать просто чтобы появлался картинка при наведении курсора, скажем так без первоначальной картинки. мВообщем я как думал, для oneMouseOver задавать картинку, а для oneMouseOut задавать как бы пустоту но скажем так как ету пустоту сделать понятия не имею

[psywalker]

Такое чудо можно и на обычном ЦСС сотворить при желании)

[optic18]

я подумал что на цсс без второй картинки не реально, на ява реальней, поетому собстно и начал так

Edited May 6, 2010 by optic18

[optic18]

В общем наваял примерно такой код

скажем так кое что по яве я почитал, и делал примерно так

if (document.images) // проверка поддержки браузером массива IMAGE

{

Products0n=new Image(71, 33); // как бы придварительная подгрузка

//картинок

ProductsOn.src="images/products_on.gif";

function on(pie) // функция смены изображения

{

if (document.images)

{

document.images[pie].src=eval(pie + "On.src");

}

}

function off(piс) // тоже смена, но для случая когда мышка не наведена

{

if(document.images) {

document.images [pie] .src= eval(pic'+ "Off.src");

}

}

<A HREF="products.html" onMouseOver="on('products');

window.status='Products'; return true;" onMouseOut="off('products'); window.status"' '; return true;"> // и так вставка в ссылку

во первых это у меня не работает, прошу не обращать внимание на возможные ошибки в синтаксисе, ну и не додумаюсь ка сделать просто

onMouseOver действие, а для onMouseOut просто чтобы не чего не было, название пункиа меню. Может подобную задачу можно ррешить другим способом?

[Searcher]

Вам же сказали, что все это делается на css. Зачем на JS велик изобретать?

В стилях пишем:

a.gluk {background: url("тут ваша картинка");}
a.gluk:hover {background:none;}

А ссылку прописываем так:

<a href="products.html" class="gluk">

Это ж значительно меньше кода, меньше слабых мест, меньше загрузка броузера по сравнению с вашим вариантом.

Не забудте заглянуть в справочник на этом сайте и внимательно почитать про свойство background и псевдокласс hover.

А еще очень рекомендую проштудировать раздел "Шаг за шагом".

[optic18]

пасибо Searcher, так конечно проще, сделал еще один не большой вопросик, можно ли увеличить размеры фонового изображения background: url(...). Я так понимаю картинка умжимается примерно под размер самой ссылки

Edited May 7, 2010 by optic18

[Searcher]

Картинка никак не масштабируется в фоне, только обрезается, если больше этого элемента. Как нарисовали, так и будет. Она может повторяться. Повторение можно сделать отдельно по вертикали и отдельно по горизонтали, или во все стороны. Я ж попросил: почитайте внимательно про свойство background. Зачем задавать вопросы и ждать пока кто-нибудь ответит, если можно быстро самому все прочесть?

Изучите этот справочник, найдете много интересного!

[optic18]

Про повторение я знаю, кста пасиб за прямые ссылки в сообщениях, но ето все я уже прочитал. Я имел в виду вот такое http://www.yugora.com.ua/ на примере "бегающее" меню, и сам елемент который "бегает" на много больше надписи( о компании например) с помошью хувера етот элемент суть больше самой надписи. В примере я так поняимаю на скриптах делалось, поетому я ис спрашивал, можно ли етот "бегающий"елемент сделать больше

Edited May 7, 2010 by optic18