<div id="div1">
<img
src="http://legal2b.ru/bitrix/templates/legal2b_second/images/articles/registration/limited_01_small.jpg">
<img
src="http://legal2b.ru/bitrix/templates/legal2b_second/images/articles/registration/limited_02_small.jpg">
<img
src="http://legal2b.ru/bitrix/templates/legal2b_second/images/articles/registration/limited_03_small.jpg">
</div>
<div id="div2" style="position: relative">
</div>
<script>
window.onload = function () {//onload begin
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.onmouseover = function (e) {//onmouseover begin
e = e || event;
var target = e.target || e.srcElement;
var count = 457;
var step = 6;
var coof = 1;
if (target.parentNode == div1) {//if begin
var img = document.createElement('img');
img.src = target.src.replace('small', 'big');
img.style.position = 'absolute';
img.style.left = '0px';
img.style.top = '0px';
div2.appendChild(img);
img.width = 0;
for (var i = 0; i < count; i += step) {
setTimeout(function () {img.width += step}, i*coof);
}
target.onmouseout = function () {
for (var i = 0; i < count; i += step) {
setTimeout(function () {img.width -= step; if (img.width <= 0) div2.removeChild(img)}, i*coof);
}
}
}//if end
}//onmouseover end
}//onload end
</script>