Javascript-форум - Помогите чайнику. Два одинаковых скрипта на странице.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Помогите чайнику. Два одинаковых скрипта на странице. (https://javascript.ru/forum/misc/7351-pomogite-chajjniku-dva-odinakovykh-skripta-na-stranice.html)

Помогите чайнику. Два одинаковых скрипта на странице.

Товарищи, помогите!
Есть скрипт - смена картинки при наведении на ее миниатюру.
На одной странице должно быть два таких скрипта. Т.е. смена 1-ой картинки при наведении на миниатюры и смена 2-ой картинки при наведении на другие миниатюры.
Что тут нужно добавить и подправить.
С js почти не знаком.

<script>
function not(){document.img1.src="img/klassik_k.png"}
function imgOn(imgName)
{if (document.images){document.img1.src = imgName;}}
</script>

<img src="img/klassik_k.png" alt="" border="0" name="img1">

<a href="javascript:not()" onmouseover="imgOn('img/klassik_k.png')"><img src="img/klassik_k.png" height="30"></</a>
<a href="javascript:not()" onmouseover="imgOn('img/klassik_s.png')"><img src="img/klassik_s.png" height="30"></a>
<a href="javascript:not()" onmouseover="imgOn('img/klassik_z.png')"><img src="img/klassik_z.png" height="30"></a>

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

<img src="img/big1.png" alt="" border="0" id="img1">

Первая большая картинка, куда будут подгружаться другие изображения при нажатии на миниатюру

<img src="img/small1.png" onmouseover="document.getElementById('img1').src='img/big1.png" height="30">
<img src="img/small2.png" onmouseover="document.getElementById('img1').src='img/big2.png" height="30">
<img src="img/small3.png" onmouseover="document.getElementById('img1').src='img/big3.png" height="30">

Собственно 3 миниатюры

<img src="img/big4.png" alt="" border="0" id="img2">

Вторая большая картинка

<img src="img/small4.png" onmouseover="document.getElementById('img2').src='img/big4.png" height="30">
<img src="img/small5.png" onmouseover="document.getElementById('img2').src='img/big5.png" height="30">
<img src="img/small6.png" onmouseover="document.getElementById('img2').src='img/big6.png" height="30">

Ну и три миниатюры для второй большой картинки.

Большое спасибо за ответ! Прошу прощения за настойчивость, но Вы не подскажите код полностью (js).

так это полностью!

<img src="img/big1.png" alt="" border="0" id="img1">

У первого большого изображения указан id="img1", чтобы мы его могли по нему найти.

<img src="img/small1.png" onmouseover="document.getElementById('img1').src='img/big1.png'" height="30">

У миниатюр в параметре src указан адрес маленькой картинки, а на событие onmouseover (наведение мыши) прописан js-код.
document.getElementById('img1') - находим элемент на странице с id="img1", т.е. наше большое изображение. И присваиваем ему src='img/big1.png'.

Аналогично со вторым изображением.
Косячок там у себя, правда, нашел - кавычка не закрыта. Пардон! :)
Еще раз код(без косяка):

<img src="img/big1.png" alt="" border="0" id="img1">

<img src="img/small1.png" onmouseover="document.getElementById('img1').src='img/big1.png'" height="30">
<img src="img/small2.png" onmouseover="document.getElementById('img1').src='img/big2.png'" height="30">
<img src="img/small3.png" onmouseover="document.getElementById('img1').src='img/big3.png'" height="30">

<img src="img/big4.png" alt="" border="0" id="img2">

<img src="img/small4.png" onmouseover="document.getElementById('img2').src='img/big4.png'" height="30">
<img src="img/small5.png" onmouseover="document.getElementById('img2').src='img/big5.png'" height="30">
<img src="img/small6.png" onmouseover="document.getElementById('img2').src='img/big6.png'" height="30">

Все разобрался. Еще раз спасибо.
Нашел еще один вариант:

<html>
<head>
<script type="text/javascript">
function zam1() {
new_p = "<img src='big1.png' height='200'>";
document.getElementById('big1').innerHTML=new_p;
}
function zam2() {
new_p = "<img src='big2.png' height='200'>";
document.getElementById('big1').innerHTML=new_p;
}
function zam3() {
new_p = "<img src='big3.png' height='200'>";
document.getElementById('big1').innerHTML=new_p;
}
function zam4() {
new_p = "<img src='big4.png' height='200'>";
document.getElementById('big2').innerHTML=new_p;
}
function zam5() {
new_p = "<img src='big5.png' height='200'>";
document.getElementById('big2').innerHTML=new_p;
}
function zam6() {
new_p = "<img src='big6.png' height='200'>";
document.getElementById('big2').innerHTML=new_p;
}
</script>
</head>

<body>
<div id="big1"><img src="big1.png" height="200"></div>
<img src="small1.png" onMouseOver="zam1()">
<img src="small2.png" onMouseOver="zam2()">
<img src="small3.png" onMouseOver="zam3()">

<div id="big2"><img src="big4.png" height="200"></div>
<img src="small4.png" onMouseOver="zam4()">
<img src="small5.png" onMouseOver="zam5()">
<img src="small6.png" onMouseOver="zam6()">

</body>
</html>

Зачем же так все осложнять?

Тогда уж надо делать функцию так.

function changeimg(imgid, imgsrc) {
document.getElementById(imgid).src=imgsrc;
}

Ну и соответственно потом в событии onmouseover используем:

<img src="img/small1.png" onmouseover="changeimg('img1', 'img/big1.png');">