Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.01.2010, 00:06
Новичок на форуме
Отправить личное сообщение для VASH132 Посмотреть профиль Найти все сообщения от VASH132
 
Регистрация: 27.01.2010
Сообщений: 3

Помогите чайнику. Два одинаковых скрипта на странице.
Товарищи, помогите!
Есть скрипт - смена картинки при наведении на ее миниатюру.
На одной странице должно быть два таких скрипта. Т.е. смена 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>
Ответить с цитированием
  #2 (permalink)  
Старый 28.01.2010, 06:01
Аспирант
Отправить личное сообщение для sdff Посмотреть профиль Найти все сообщения от sdff
 
Регистрация: 11.07.2008
Сообщений: 54

Я бы вообще сделал так:
<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">

Ну и три миниатюры для второй большой картинки.
Ответить с цитированием
  #3 (permalink)  
Старый 28.01.2010, 12:45
Новичок на форуме
Отправить личное сообщение для VASH132 Посмотреть профиль Найти все сообщения от VASH132
 
Регистрация: 27.01.2010
Сообщений: 3

Большое спасибо за ответ! Прошу прощения за настойчивость, но Вы не подскажите код полностью (js).
Ответить с цитированием
  #4 (permalink)  
Старый 28.01.2010, 13:57
Аспирант
Отправить личное сообщение для sdff Посмотреть профиль Найти все сообщения от sdff
 
Регистрация: 11.07.2008
Сообщений: 54

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

<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">
Ответить с цитированием
  #5 (permalink)  
Старый 28.01.2010, 14:23
Новичок на форуме
Отправить личное сообщение для VASH132 Посмотреть профиль Найти все сообщения от VASH132
 
Регистрация: 27.01.2010
Сообщений: 3

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

<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>
Ответить с цитированием
  #6 (permalink)  
Старый 28.01.2010, 14:28
Аспирант
Отправить личное сообщение для sdff Посмотреть профиль Найти все сообщения от sdff
 
Регистрация: 11.07.2008
Сообщений: 54

Зачем же так все осложнять?
Ответить с цитированием
  #7 (permalink)  
Старый 28.01.2010, 14:42
Аспирант
Отправить личное сообщение для sdff Посмотреть профиль Найти все сообщения от sdff
 
Регистрация: 11.07.2008
Сообщений: 54

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

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


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

<img src="img/small1.png" onmouseover="changeimg('img1', 'img/big1.png');">
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите убрать копирайт с скрипта Kirilllll Ваши сайты и скрипты 7 09.10.2009 21:51
Блок переключения меню на JS, два скрипта в одном файле Dizeloid Элементы интерфейса 0 30.07.2009 11:03
Два одинаковых сценария на одной странице Genetics Общие вопросы Javascript 7 12.07.2009 00:46
Как запустить два одинаковых скрипта на странице? Dronch Общие вопросы Javascript 4 09.10.2008 12:42
Помогите разобраться с логикой поведения скрипта MarkupDeveloper jQuery 3 21.06.2008 17:04