Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How We can see our Images through a Magnifying Glass.

Author: DevASP
Download Source Code : 577_Glasses.zip

This article is about how you can see your images through a magnifying glass. In this application there is also support for hyperlinks. Click and see... Just replace the picture with your own.

Steps you will do

 

Start visual studio and create a new web application

 

 

Open the HTML design of you web page and add the following JavaScript functions before closing the head tag.

 

 

<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;   

y1=-opp+(y+dy)*fact;   

x2=+opp+(x+dx)*fact;  

y2=+opp+(y+dy)*fact;  

 

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>

 

 

Now add the following HTML code to design the layout of your web page and call the above JavaScript functions.

 

 

<BODY>

 

<MAP name="kaart">

 

<AREA coords="331,258,439,312" href="http://www.vincentmes.dds.nl/index.html" shape="RECT" alt="Vincent Mes">

 

<AREA coords="530,258,639,312" href="http://www.vincentmes.dds.nl/indexUK.html" shape="RECT"  alt="Vincent Mes">

 

</MAP><IMG name="twee" src="images.jpg" width="512" style="position: absolute; top: 0px; left: 0px; border-style: none">

 

<IMG name="een" src="images.jpg" width="964" ismap usemap="#kaart" style="position: absolute; top: 0px; left: 0px; clip: rect(0px, 100px, 100px, 0px) border-style: none;">

 

</BODY>

 

 

 

Now run your application and take your mouse over the image in web page and see the image closely.

 

 

 

 

 

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How We can Edit an Image using JavaScript .

Disclaimer - Privacy
© 2002-2017 DevASP.net