Ошибка изменения изображения JavaScript

Question

только что присоединился сегодня, любил этот сайт уже.

Мой вопрос такой. я пытаюсь создать 6 меню для моей сети. например, {home, about us, service .....}, и я хочу, чтобы изображения менялись всякий раз, когда пользовательская мышь наводит курсор мыши на меню. Я получил сценарий на самом деле из интернет-магазина. Но это был пример для одного изображения Вот коды: Синтаксис JavaScript / DHTML / AJAX (переключение простого текста)

function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}

и для тела Синтаксис JavaScript / DHTML / AJAX (переключение простого текста)

<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>

Теперь я попытался умножить эти пять раз (просто повторил коды и изменил название картинки) - Но всякий раз, когда я наводю курсор на изображения, они не меняются.

Итак, мой вопрос: как сделать приведенный выше код с одного устройства смены изображений на 6?

Спасибо!

Answer 1

Попробуйте использовать id для каждого изображения (id должно быть уникальным, поэтому не должно быть элементов с одинаковым id):

<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')" onmouseout="roll_over('but1', 'icon1.gif')">
  <IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50" ID="but1" BORDER="0" />
</A>

И этот код:

function roll_over(img_id, img_src) {
  document.getElementById(img_id).src = img_src;
}

Answer 2

Хорошо, я понял это. Следует установить уникальное имя для каждого изображения. Попробуйте этот код Синтаксис JavaScript / DHTML / AJAX (переключение простого текста)

<script>
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
</script>

<A HREF="some.html" onmouseover="roll_over('but1', '10.gif')"
onmouseout="roll_over('but1', '10-roll.gif')">
<IMG SRC="10-roll.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>

<A HREF="some.html" onmouseover="roll_over('but2', '1-roll.gif')"
onmouseout="roll_over('but2', '1.gif')">
<IMG SRC="1.gif" WIDTH="100" HEIGHT="50"
NAME="but2" BORDER="0">
</A>

<A HREF="some.html" onmouseover="roll_over('but3', '2-roll.gif')"
onmouseout="roll_over('but3', '2.gif')">
<IMG SRC="2.gif" WIDTH="100" HEIGHT="50"
NAME="but3" BORDER="0">
</A>

надеюсь, что это работает