Замена картинки при наведении

[KukMan]

Появилась необходимость сделать "интерактивное" меню, т.е. чтобы при наведении курсора на пункт меню (они идут картинками) происходила замена картинки. Погуглил на эту тему. Нашол небольшой скрипт:

var img1=new Image(); img1.src="article.gif";
var img2=new Image(); img1.src="article2.gif";
var img3=new Image(); img1.src="script.gif";
var img4=new Image(); img1.src="script2.gif";
var img5=new Image(); img1.src="more.gif";
var img6=new Image(); img1.src="more2.gif";
function change1() { var a=window.event.srcElement;
****if (a.tagName=="IMG")
 *a.src=a.src.substring(0, a.src.length-4) + "2"+
 *a.src.substring(a.src.length-4, a.src.length);
}
function change2() { var a=window.event.srcElement;
****if (a.tagName=="IMG")
 *a.src=a.src.substring(0, a.src.length-5) +
 *a.src.substring(a.src.length-4, a.src.length);
}
document.onmouseover=change1;
document.onmouseout=change2;

А вот и сама статья, как это делать: [Только зарегистрированные пользователи могут видеть ссылки. ].
Но этот скрипт не работает почемуто в ФФ. И еще не работает прелоадинг нужных картинок (я заменял в коде на свои картинки). Может есть какието модификации или лучшие версии скрипта? буду рад любой информации..

[Garic]

Возможно потому, что не указано четко, что это Ява? Попробуйте определить все функции в отдельный файл... Проверьте, указаны ли к картинкам абсолютные пути (если вы просматриваете код уже непосредственно с внешнего ресурса). Вообще, есть хорошая альтернатива:

[Только зарегистрированные пользователи могут видеть ссылки. ]

Как вариант...

З.Ы. Вообше, не сталкивался с ФФ :ninja:

[KukMan]

ну эт все в отдельном файле. я просто так привел код.. ну этот поэлегантнее будет. минимум кода - максимум действий. только еще б если ему указать конкретные картинки, которые нада менять - то ваще цены ему не будет. Просто я в ява скрипт не очень умею)

З.Ы. ФФ - это Firefox)

[Garic]

с ФФ под...
Насчет картинок - этим тегом можно задавать как отностительные, так и абсолютные пути к картинкам. First.gif и Second.gif - это я написал для примера. First - это изначальная картинка, Second - та, на которую будет меняться при наведении мышкой. Загружаются, если я не ошибюсь, сразу обе картинки. В начале тега <a href="#" вместо # указывается необходимая ссылка.

[Aykroyd]

Ерундой ведь занимаетесь, однако. Никто не делает ролловеры средствами JS уже года 4.

[Только зарегистрированные пользователи могут видеть ссылки. ]

[KukMan]

А можно изменить src тега IMG через css??

[Garic]

Можно. Создаете id (либо класс, в зависимости от уникальности), в котором указываете абсолютный путь к картинке на сервере.
А в теге пишете: img<id="такой-то">

[KukMan]

а в css шо писатЬ?

[Garic]

Начните с [Только зарегистрированные пользователи могут видеть ссылки. ], почитайте вот [Только зарегистрированные пользователи могут видеть ссылки. ]

[KukMan]

вы меня чуток неправильно поняли. допустим у меня есть такое изображение [img]blabla.gif[/img]. Вот можно ли средствами css изменить изображение с blabla.gif на, допустим blablabla.gif?? Если можно, то какое правило отвечает за это? backgorund-image?

[Aykroyd]

Originally posted by KukMan@Apr 30 2008, 17:14
А можно изменить src тега IMG через css??
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Ни коим образом и ни при каких обстоятельствах, господа.


<div class='quotetop'>Цитата</div>

Можно. Создаете id (либо класс, в зависимости от уникальности), в котором указываете абсолютный путь к картинке на сервере.
А в теге пишете: img<id="такой-то">[/b]

Ну абсурд же, право слово... :read:

[Garic]

Да, backgorund-image. Других я не знаю. Только для того, чтобы поменять его на другую картинку прийдется писать вот так:
a{ background-image:url(default_img.gif) }
a:hover{ background-image:url(hover_img.gif) }

Почитайте [Только зарегистрированные пользователи могут видеть ссылки. ], что Костя ака Aykroyd кинул. Как раз по теме!

Ввиду прерыдущего ответа, думаю стоит помолчать

[KukMan]

я ее прочитал до еще пару часов назад. Но только там рассказывается, как сделать прелоад (а в первом случае можно менять фон ссылки таким способом). Но факт в том, что у меня пункты меню вставлены через тег <img>. А изменить src тега img можно только через яваскрипт. Поэтому я и переспросил, ибо если можно было б менять и через css - то потребность в js вобщебы отпала.

З.Ы. проскочила идея все таки сделать через бекграунд ссылки. Только как тогда скрыть текст ссылки?

[Aykroyd]

Originally posted by KukMan@Apr 30 2008, 19:05
Но факт в том, что у меня пункты меню вставлены через тег <img>.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
В корне неверный подход к решению задачи.

Originally posted by KukMan@Apr 30 2008, 19:05
Только как тогда скрыть текст ссылки?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Масса способов. Например, {text-indent: -9000px;}.

[KukMan]

ну тогда делать как блочные фиксированные ссылки с фоном?

[Aykroyd]

Как блочные фиксированные ссылки с фоном.

[skrdv]

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Замена рисунка</title>
<style type="text/css">
A.rollover {
background: url(&#39;1.gif&#39; /* Путь к файлу с исходным рисунком */
display: block;
width: 196px;
height: 183px;
}
A.rollover:hover {
background: url(&#39;2.gif&#39; /* Путь к файлу с заменяемым рисунком */
}
</style>
</head>
<body>

</body>
</html>

[Aykroyd]

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Замена рисунка</title>
<style type="text/css">
A.rollover {
background: url(&#39;1.gif&#39; /* Путь к файлу с исходным рисунком */
display: block;
width: 196px;
height: 183px;
}
A.rollover:hover {
background: url(&#39;2.gif&#39; /* Путь к файлу с заменяемым рисунком */
}
</style>
</head>
<body>

</body>
</html>

Очередной яркий пример того, как НЕ следует этого делать...