Цель такая. В каталоге товаров, при наведении мышки на превью картинку товара, она увеличивается тем самым показывая картинку полного описания.
Используется ява скрипт:
А в каталоге вместо картинки вставил код:
Но почему то не работает, даже не показывает превью картинку. Может кто знает в чем дело или поможет это орагнизовать другим путем?
Используется ява скрипт:
Код |
---|
<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> |
Но почему то не работает, даже не показывает превью картинку. Может кто знает в чем дело или поможет это орагнизовать другим путем?