زوم شدن روی قسمتی از تصویر در سایت

زوم شدن روی قسمتی از تصویر در سایت این کد با کمک جاوا اسکریپت ساخته شده و در قالب سایت و یا صفحات جداگانه و …. قرار گرفته و با رفتن موس روی تصویر قسمتی از تصویر شروع به زوم شدن میکند.

فقط کافیه که ادرس عکس مورد نظر خودتونو در کد جایگزین و مقدار زوم شدن

و یا اندازه کادر زوم رو هم از قسمت function mtrack(e) {
var x,y,x1,x2,y1,y2,dx=0,dy=0;
fact=964/512;
opp=100;  ویرایش کنید عدد ۱۰۰ اندازه کادر زوم را مشخص میکند.موفق باشید

زوم روی قسمتی از تصویر

دمو کد

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (document.all){}
else document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=mtrack;
 
function mtrack(e) {
var x,y,x1,x2,y1,y2,dx=0,dy=0;
fact=964/512;
opp=100;
 
if (document.all){
   x=event.x;
   y=event.y;
   dx=window.document.body.scrollLeft;
   dy=window.document.body.scrollTop;
}

else{ 
   x=e.pageX;
   y=e.pageY;
}
 
x1=-opp+(x+dx)*fact;    //left
y1=-opp+(y+dy)*fact;    //top
x2=+opp+(x+dx)*fact;    //right
y2=+opp+(y+dy)*fact;    //bottom
 
document.images.een.style.left=(x+dx)*(1-fact);
document.images.een.style.top=(y+dy)*(1-fact);
document.images.een.style.clip="rect(" +y1 +"px," +x2 +"px," +y2 +"px," +x1 +"px)";
}
 
//-->
</SCRIPT>


<MAP name=kaart>
   <AREA coords=331,258,439,312 href="codebazan.ir" shape=RECT alt="Vincent Mes"> 
   <AREA coords=530,258,639,312 href="https://codebazan.ir" shape=RECT alt="Vincent Mes"> 
</MAP>

<IMG name="twee" src="https://dl.codebazan.ir/uploads/1530743667.jpg" width=500  style="position: absolute; top: 0px; left: 0px; border-style: none">
 
<IMG name="een" src="https://dl.codebazan.ir/uploads/1530743667.jpg" width=964 ismap usemap=#kaart style="position: absolute; top: 0px; left: 0px; clip: rect(0px, 50px, 50px, 0px) border-style: none;">
 

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *