Проблема с "раскрывающимися" картинками.
 

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

Помогите, пожалуйста, решить такую проблему с "раскрывающимися" картинками:
в документе html есть несколько div'ов (с id="visible1" , id="visible2" , id="visible3" и т.д.), содержащих превьюшки картинок. В коде html сразу за каждым из них идёт по одному div'у (с id="hidden1" , id="hidden2" , id="hidden3" и т.д. и свойством style="display:none" для каждого, то есть первоначально они скрыты), содержащему большое изображение. Нужно добиться эффекта, чтобы при клике на div с превьюшкой открывался div с целым изображением.

Я попробовал такую штуку:

document.getElementById('visible1').onclick = function() {
document.getElementById('hidden1').style.display = 'block';
}

Вроде бы работает, но тогда нужно для каждого div'а прописывать свой кусок кода, что неправильно. А можно ли как-нибудь автоматизировать это, например, с помощью переменных?

Огромное спасибо всем ответившим!))

Сам нашёл ответ на этот вопрос. Вот код JavaScript'а, который у меня получился:

window.onload = function() {

for(var i = 1; i; i++) { //цикл исполняется до тех пор, пока i существует

document.getElementById('visible' + i).onclick = function() { //все div'ы с id='visible1', 'visible2' и т.д.

var z = this.id.charAt(this.id.length - 1); //извлекаем последний символ (цифру) из id='visible1', 'visible2' и т.д.

var S = document.documentElement.scrollTop; //значение величины вертикальной прокрутки окна

document.getElementById('hidden' + z).style.left = 25 + 'px'; //присваеваем эл-ам с id='hidden1', 'hidden2' и т.д. отступ от левого края окна, равный 25 px

document.getElementById('hidden' + z).style.top = (25 + S) + 'px'; //присваеваем эл-ам с id='hidden1', 'hidden2' и т.д. отступ от верхнего края окна, равный 25 px

document.getElementById('hidden' + z).style.display = 'block'; //делаем видимыми эл-ты с id='hidden1', 'hidden2' и т.д.

return false;

}

document.getElementById('close' + i).onclick = function() {

var y = this.id.charAt(this.id.length - 1);

document.getElementById('hidden' + y).style.display = 'none';

return false;

}

}

}

Осталось решить два вопроса:
- ie6 почему-то пишет "ошибка на странице", хотя всё работает;
- google chrome, видимо, не понимает свойство scrollTop, потому что все раскрывающиеся блоки распологаются в самом верху страницы, высота прокрутки не учитывается.

Кто подскажет ответ, тому буду благодарен))

P.S. В опере и мозилле работает.

поставь/включи отладчик

а кто не подскажет?

p.s. а почему бы просто не менять img.src

Кто не подскажет, тому благодарен не буду.
x-yuri, поподробнее про смену img.src можно? Что ты имеешь в виду?

вот так можно изменить картинку, соответствубщую тэгу img:

img.src='/путь/к/картинке';

x-yuri, насколько я понимаю, этот способ хорош для "подсветки" картинок. А в моём случае у каждой большой раскрывающейся картинки была подпись, то есть тут простой сменой не обойтись. В любом случае, вся загвоздка была в написании цикла, чтобы не приходилось переписывать скрипт для каждой картинки, ведь их может быть несколько десятков...