Создайте галерею изображений, в которой основное изображение изменяется при клике на уменьшенный вариант.
Результат должен выглядеть так:
Для обработки событий используйте делегирование, т.е. не более одного обработчика.
Исходный документ: tutorial/browser/events/gallery-src/index.html.
P.S. Если получится — сделайте предзагрузку изображений, чтобы при клике они появлялись сразу.
P.P.S. Всё ли в порядке с семантической вёрсткой в HTML исходного документа? Если нет — сделайте, как нужно.
Решение состоит в том, чтобы добавить обработчик на контейнер #thumbs и отслеживать клики на ссылках.
Когда происходит событие, обработчик должен изменять src #largeImg на href ссылки и заменять alt на ее title.
Код решения:
var largeImg = document.getElementById('largeImg');
document.getElementById('thumbs').onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
while(target != this) {
if (target.nodeName == 'A') {
showThumbnail(target.href, target.title);
return false;
}
target = target.parentNode;
}
}
function showThumbnail(href, title) {
largeImg.src = href;
largeImg.alt = title;
}
Рабочий пример tutorial/browser/events/gallery/index.html.
Предзагрузка картинок
Для того, чтобы картинка загрузилась, достаточно создать новый элемент IMG и указать ему src, вот так:
var imgs = thumbs.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++) {
var url = imgs[i].parentNode.href;
*!*
var img = document.createElement('img');
img.src = url;
*/!*
}
Как только элемент создан и ему назначен src, браузер сам начинает скачивать файл картинки.
При правильных настройках сервера как-то использовать этот элемент не обязательно — картинка уже закеширована.
Семантичная верстка
Для списка картинок используется DIV. С точки зрения семантики более верный вариант — список UL/LI.
Полное решение: tutorial/browser/events/gallery/index.html.