Question

Цель такая. В каталоге товаров, при наведении мышки на превью картинку товара, она увеличивается тем самым показывая картинку полного описания.
Используется ява скрипт:

Код

<script type="text/javascript"> function getElementPosition(elem) { w = elem.offsetWidth; h = elem.offsetHeight; l = 0; t = 0; while (elem) { l += elem.offsetLeft; t += elem.offsetTop; elem = elem.offsetParent; } return {"left":l, "top":t, "width": w, "height":h}; } function mousePageXY(e) {   var x = 0, y = 0;   if (e.pageX || e.pageY){       x = e.pageX - 5;       y = 21 + e.pageY;   }   if (e.clientX || e.clientY){       x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft - 5;       y = 21 + e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;   }   return {"x":x, "y":y}; }; function deleteimg(imig){       if(document.getElementById('nimimg')){       testolldimg = document.getElementById('nimimg');       imig.parentNode.removeChild(testolldimg);   } }; function dragimg(oldimg, even){       zWidth = getElementPosition(oldimg);       if(document.getElementById('nimimg')){       xypos = mousePageXY(even);       if(document.getElementById("nimimg").style.display == 'none'){         document.getElementById("nimimg").style.display = 'block';       }       lwidth = screen.width/2;       if((screen.width - lwidth) < zWidth.left){             document.getElementById("nimimg").style.left = xypos.x - document.getElementById("nimimg").width + 15 + "px";             document.getElementById("nimimg").style.top = xypos.y + "px";       }       else{             document.getElementById("nimimg").style.left = xypos.x + "px";             document.getElementById("nimimg").style.top = xypos.y + "px";       }         } }; function resizeimg(imig, ri){   newsrc = imig.name;   xypos = mousePageXY(ri);   newimg = document.createElement('img');   newimg.src = newsrc;   newimg.style.position = 'absolute';   newimg.style.display = 'none';   newimg.id = 'nimimg';   imig.parentNode.appendChild(newimg); }; </script>

А в каталоге вместо картинки вставил код:

Код
<a href="<?=$arElement["DETAIL_PAGE_URL"]?>"><img src="<?$arElement["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arElement["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arElement["PREVIEW_PICTURE"]["ALT"]?>" title="<?=$arElement["NAME"]?>" name="<?$arResult["DETAIL_PICTURE"]?>" onmouseover="resizeimg(this, event)" onmouseout="deleteimg(this)" onmousemove = "dragimg(this, event)"> /></a>

Но почему то не работает, даже не показывает превью картинку. Может кто знает в чем дело или поможет это орагнизовать другим путем?

Answer 1

Цитата
Артур Глазов пишет: Но почему то не работает, даже не показывает превью картинку.

Цитата
Артур Глазов пишет: <img src="<?$arElement["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arElement["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arElement["PREVIEW_PICTURE"]["ALT"]?>" title="<?=$arElement["NAME"]?>" name="<?$arResult["DETAIL_PICTURE"]?>" onmouseover="resizeimg(this, event)" onmouseout="deleteimg(this)" onmousemove = "dragimg(this, event)"> />

- тут очепятки есть

Попробуйте так:

Код
<img src="<?=$arElement["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arElement["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arElement["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arElement["PREVIEW_PICTURE"]["ALT"]?>" title="<?=$arElement["NAME"]?>" onmouseover="resizeimg(this, event)" onmouseout="deleteimg(this)" onmousemove = "dragimg(this, event)"> />

Answer 2

имхо, надо быть клиентом, а потом задавать такие спецвопросы. а коды вообще не приветствую выносить для всех. даже не смотря, что это вредит

Answer 3

Цитата
Sergey Leshchenko пишет: Код <img src="<?=$arElement["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arElement["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arElement["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arElement["PREVIEW_PICTURE"]["ALT"]?>" title="<?=$arElement["NAME"]?>" onmouseover="resizeimg(this, event)" onmouseout="deleteimg(this)" onmousemove = "dragimg(this, event)"> />

Спасибо, картинку показало. Но детальная картинка так и не показывается при наведении:))

Answer 4

в функции resizeimg() замените newsrc = imig.name; на newsrc = imig.src;

Код
function resizeimg(imig, ri){   newsrc = imig.src;   xypos = mousePageXY(ri);   newimg = document.createElement('img');   newimg.src = newsrc;   newimg.style.position = 'absolute';   newimg.style.display = 'none';   newimg.id = 'nimimg';   imig.parentNode.appendChild(newimg); };

Answer 5

Никаких изменений не дало.

Answer 6

Цитата
Артур Глазов пишет: Никаких изменений не дало.

Значит вы что-то не правильно сделали, или может быть нужно сбросить кэш...

Answer 7

Цитата
Sergey Leshchenko пишет: Цитата Артур Глазов пишет: Никаких изменений не дало. Значит вы что-то не правильно сделали, или может быть нужно сбросить кэш...

Все сделал как написал. В каталоге теперь:

Код
<img src="<?=$arElement["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arElement["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arElement["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arElement["PREVIEW_PICTURE"]["ALT"]?>" title="<?=$arElement["NAME"]?>" onmouseover="resizeimg(this, event)" onmouseout="deleteimg(this)" onmousemove = "dragimg(this, event)"> />

А в скрипте изменил newsrc = imig.name; на newsrc = imig.src;


И обновил кэш.

Answer 8

Цитата
Артур Глазов пишет: Все сделал как написал.

Я проверил, у меня работает, значит нужно смотреть в реальном окружении

Добавьте в resizeimg()
alert('1');
- показывается ли сообщение при наведении на картинку?