Мерцание лупы
 

код:

var zoom={
create:function(){
zoom.obj=create('div');
zoom.obj.style.background='url(/img/zoom.gif) no-repeat 50% 50%';
zoom.obj.style.position='absolute';
zoom.obj.style.opacity=0.5;
zoom.obj.style.display='none';
},
update:function(){
var a = document.getElementsByTagName("a");
for (var i=0;i<a.length;i++){
if(a[i].rel!=''){
var img = a[i].getElementsByTagName("img");
for (var j=0;j<img.length;j++){
img[j].onmouseout = function(){
hide(zoom.obj);
};
img[j].onmousemove = function(){
zoom.obj.style.top=ElemCoords(this).y+"px";
zoom.obj.style.left=ElemCoords(this).x+"px";
zoom.obj.style.width=this.offsetWidth+"px";
zoom.obj.style.height=this.offsetHeight+"px";
show(zoom.obj);
};
}
}
}
}
};

zoom.create();
zoom.update();

<div>
<a href="/img/gal/1.jpg" rel="11" onclick="return gal.open(this)"><img src="/img/gal/1_1.jpg" width="151" height="100" alt="sample image"></a>

Ф-я ищет на странице теги А с атрибутом rel и накладывает на картинки лупу для кликабельных картинок. Проблема в том, что лупа мерцает. При наведении курсора на картинку поочерёдно срабатывают обе функции: onmousemove и onmouseover, и картинка мерцает. Гуглил, но не нашел ответа. Где ошибка?

лупа у Вас накладывается сверху объекта и в этот момент естественно на img срабатывает mouseout-логика неверная-

_Ivan,
Выход - обернуть картинку <span class="wrap" style=display:inline-block;>тут img </span>
И отслеживать наведение на span.wrap , по наведению, саму "лупу" аппенчилдить с абсолютной позицией внутрь span.wrap

Выход же делать - при выходе положения курсора по координатам за пределы span.wrap + 1/2 "лупы"

Черт, второй раз наступаю на эти грабли со слоями.

При наведении мыши на картинку срабатывает событие onmousemove, на картинку накладывается слой с картинкой лупы, у этого слоя размеры первой картинки, теперь таргетом является лупа, а картинку мышь не видит, срабатываеи событие onmouseover, лупа выключается и все повторяется с начала, отсюда мерцание.

Всем спасибо

Переделал скрипт (выдрал кусок кода из интернета)

<style>
.zoom{
background:url(Image\ Link_files/zoom.gif) no-repeat 50% 50%;
opacity: 0.5;
}
</style>

function updateZoomImg(){
		var a = document.getElementsByTagName("a");
		for (var i=0;i<a.length;i++){
			if(a[i].rel!=''){
				var img = a[i].getElementsByTagName("img");		
				for (var j=0;j<img.length;j++){			
					a[i].style.position = "static";						 
					var image = img[j];
					if(a[i].getElementsByTagName("span").length > 0) a[i].removeChild(a[i].getElementsByTagName("span")[0]);
					var span = document.createElement("span");	
					span.style.position="absolute";
					span.style.top=image.offsetTop+"px";
					span.style.left=image.offsetLeft+"px";
					span.style.width=image.offsetWidth+"px";
					span.style.height=image.offsetHeight+"px";
					span.a = img[j].a = a[i];	
					a[i]["span"] = span;
					span.onmouseover = function(){this.a["span"].className = 'zoom';};
					span.onmouseout = function(){this.a["span"].className = '';};
					a[i].appendChild(span);							
				}
			}
		}
}
addEvent(window,"load",updateZoomImg);
addEvent(window,"resize",updateZoomImg);

Установку координат надо поменять, а так работает.

Вопросы:
1. Я не понял значение строки span.a = img[j].a = a[i]; В "span.a" что такое "а", это свойство или тэг?

2. лупа прописана в стилях, а нужно ли делать прелоад картинки?

Это свойство конечно cделано чтобы из обработчика
span или img[j] можно было обратиться к соответствующей ссылке как
this.a

Возникла новая проблема с работой скрипта.
Демо на kalevka.ru

В средней колонке есть три превьюшки, скрипт updateZoomImg находит их, обертывает span-ом. При наведении курсора на картинку на неё накладывается "лупа". Проблема с меню. Если меню налезает на превью-картинку, то оно вырубается. Помогите!!!

:) Так - не спаcает ?

<!-- end left -->
</td>
<!-- center -->
*!*
<td  valign="top" style="padding-top:100px;">
*/!*
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<a href="#" rel="11"><img src="/img/1_1.jpg" width="151" height="100"></a>
<a href="#" rel="22"><img src="/img/2_1.jpg" width="151" height="100"></a>
<a href="#" rel="rr"><img src="img/3_1.jpg" width="151" height="100"></a>
<!-- end center -->

</td>
</tr></table>

*Красным поправка

Нет. Превьюшки могут быть где угодно. Вопросы уже не теме. Спасибо всем, пойду в другой раздел.