Блог

 Давно хотел на странице «Каталог цен» установить функцию увеличения изображения при наведении указателем мыши, да всё как-то не получалось. Посуетился в Нете и нашёл интересный материал. Функция реализуется посредством скрипта, и поэтому меньше возни с самим изображением. Скрипт я разместил в самом начале кода. Вот он:

<script type="text/javascript">

var gi,gd,gj=1,gn=20,gt=20,gs,swd,sht,lwd,lht;function sli(ii,wd1,ht1,wd2,ht2,s){gi=ii;gd=1;swd=wd1;sht=ht1;lwd=wd2;lht=ht2;gs=s;rs();}function ssi(ii,wd1,ht1,wd2,ht2,s){gd=-1;swd=wd1;sht=ht1;lwd=wd2;lht=ht2;gs=s;rs();}function xy(x1,x2,gj){return (x2-x1)*gj/gn+x1;}function rs(){var w=Math.round(xy(swd,lwd,gj));

var h=Math.round(xy(sht,lht,gj));

if(gs)gi.style.left=(swd-w)+"px";

gi.style.width=w+"px";gi.style.height=h+"px";if(gd>0 && gn>gj){gj++;setTimeout('rs()',gt);}else if(0>gd && gj>0){gj--;setTimeout('rs()',gt);}}

function imx(n){

var f;

for(var i=0;i< 5;i++){

f=document.getElementById('imx'+i);

if(f)f.className=(i==n)?"imxs":"";

f=document.getElementById('im'+i);

if(f)f.style.display=(i==n)?"":"none";

}

}

</script>

 Затем ниже разместил изображение с его описанием. Вот его  код:

<div><span style="COLOR: #ffa500; FONT-SIZE: 10pt"><img onmouseover="sli(this,202,101,400,200,0)" onmouseout="ssi(this,202,101,400,200,0)" title="" alt="" src="http://baget.ucoz.ua/image001.jpg" width="202" height="101" /> Багет междуэтажный 150мм х 200мм - 16,2$\м.п.</span></div>

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

 Посмотреть работу скрипта можно здесь.

 Всегда с вами odvo@yandex.ua и http://baget.ucoz.ua