Функция обработчик коллекции элементов. Как правильно?

[dmk]

Пытаюсь сделать портфолио с сеткой превьюшками, в которых при наведении мыши просматривается скриншот вёрстки.

Пример на странице (1-й блок) - http://dmink.link/ok

Если блок-ппевью один, работает такой код:

window.onload = addIndentPreview;
window.onresize = addIndentPreview;

var projectWrapper = document.querySelector(".js-preview-wrapper"),
    projectImg = document.querySelector(".js-preview-img"),
    wrapperHeight, imgHeight, imgMargin,
    i;

 function addIndentPreview() {
     wrapperHeight = projectWrapper.clientHeight;
     imgHeight = projectImg.clientHeight;
     imgMargin = -(imgHeight - wrapperHeight) + "px";

     projectWrapper.onmouseover = function () {
        projectImg.style.marginTop = imgMargin;
     };
     projectWrapper.onmouseout = function () {
        projectImg.style.marginTop = 0 + "px";
    };
 };

Дальше пытаюсь сделать рабочими все превьюшки, для этого добавляю цикл for в функцию. Но работает криво - при наведении мыши на 1-ю крутиться 3-я.

window.onload = addIndentPreview;
window.onresize = addIndentPreview;

var projectWrapper = document.querySelector(".js-preview-wrapper"),
    projectImg = document.querySelectorAll(".js-preview-img"),
    wrapperHeight, imgHeight, imgMargin,
    i, img;

function addIndentPreview() {
    wrapperHeight = projectWrapper.clientHeight;

    for (i = 0; i < projectImg.length; i++) {
        img = projectImg[i];
        imgHeight = img.clientHeight;
        imgMargin = -(imgHeight - wrapperHeight) + "px";

        projectWrapper.onmouseover = function () {
            img.style.marginTop = imgMargin;
        };
        projectWrapper.onmouseout = function () {
            img.style.marginTop = 0;
        };
    }
}

Страница с кривой работой - http://dmink.link/

В чём ошибка, что нужно поправить?

[aklis]

Ошибка в цикле for, щас статейку поищу, дам линк по этому забавному эффекту

[ruslan_mart]

dmk, img в цикле всегда будет выдавать значение из последней итерации. Поэтому в самой функции использовать this.

[Rise]

dmk,

window.onload = window.onresize = addIndentPreview;

function addIndentPreview() {
	var img, imgs = document.querySelectorAll('.js-preview-img'), i = imgs.length;
	while (i--) {
		img = imgs[i];
		img.indent = img.parentNode.clientHeight - img.clientHeight;
		img.onmouseenter = img.onmouseleave = function () {
			this.style.marginTop = (parseInt(this.style.marginTop)) ? '0px' : this.indent + 'px';
		};
	}
}

[aklis]

http://javascript.ru/basic/closure#p...-ispolzovaniya вот собственно подробно об этом

[dmk]

Всем спасибо. Сейчас буду читать, разбираться