Hello developers! This article will show how to create a cool magnifying or zoom effect of an image in your website on a mouse event. There are a few steps in applying this cool effect to your website.
You only need the same images of various resolutions (you can simply change the resolution using Paint).
Procedure
- Make a web page structure in HTML (the HTML5 canvas tag will get used).
- Design the effect in CSS.
- Creat the functioning using JavaScript.
![]()
Procedure
- Declare two image elements for the special effects (for example large and magnify)
- Use the HTML5 canvas tag for mouse events
- Create events in JavaScript
- Use CSS for the styling
Magnify Effect
![]()
HTML Page Code | Structure
First we need a structure or a page for applying this stylish effect, so for this you can create a simple HTML page or if you already have a website then you can apply the base code there as in the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Picmaniac</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="JScript.js" type="text/javascript">
</script>
</head>
<body onload="init()">
<img id="largeImage" src="#">
<img id="glassGraphic" src="#">
.
.
.
// your desired coding part here
.
.
.
<canvas id="canvas" width="720" height="1024">
</canvas>
</body>
</html>
CSS Coding | Designing
After creating a page the next important part is the designing of the magnifying glass or object that will work over the images. So for this simply create definitions for the canvas and the design part of your content body and at last the description regarding your work. Here is the CSS code:
#canvas
{
background: url(`/gray.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#largeImage, #glassGraphic { display: none; }
body
{
margin: 18px 20px;
padding: 1;
background: #e0e0e0;
}
// define code here for body part of html code
#description
{
background: rgb(18o,18o,180) ;
border-radius: 10px;
padding: 6px 16px;
width: 120px;
height: auto;
float: inherit;
margin-right: auto;
}
JavaScript Code | Magnify Effect
JavaScript provides the main feature to this effect, for this am declaring a set of variables and creating corresponding functions.
const lensRadius = 220;
const lensRadius = 220;
const grabPointOffsetX = 175;
const grabPointOffsetY = 175;
var zoom;
var canvas, context;
var mouseX, mouseXConstrained, mouseY, mouseYConstrained;
var xSource, ySource;
var xMinium, xMaximum, yMinium, yMaximum;
In the code above the declaration of variables are shown and the code below uses all those defined variables.
function init()
{
canvas = document.getElementById("canvas");
canvas.addEventListener("mousemove", mouseTrack, false);
canvas.addEventListener("touchmove", touchTrack, true);
context = canvas.getContext("2d");
xMinium = canvas.offsetLeft + 198 - grabPointOffsetX;
xMaximum = canvas.offsetLeft + 570 - grabPointOffsetX;
xMinium = canvas.offsetLeft + 198 - grabPointOffsetY;
xMaximum = canvas.offsetLeft + 800 - grabPointOffsetY;
mouseX = 220 + canvas.offsetLest;
mouseY = 720 + canvas.offsetTop;
zoom - document.getElementById("lagreImage").width /canvas.width * 0.8;
drawMagGlass();
}
// function declaration
function drawMagGlass()
{
constrainPosition();
xSource = 2*mouseXConstrained - zoom * lensRadius + 2*grabPointOffsetX;
ySource = 2*mouseYConstrained - zoom * lensRadius + 2*grabPointOffsetY;
context.clearRect(0,0 canvas.width, canvas.height);
context.save();
context.beginPath();
context.arc(mouseXConstrained+grabPointOffsetX, mouseYConstrained-grabPointerOffsetY, lensRadius, 0, 2*Math.PI, false);
context.closePath();
context.clip();
}
// Now filling in the gaps remained in
function constrainPosition()
{
if(mouseX < xMinium)
{
mouseXConstrained = xMinium - canvas.offsetLeft;
}
else if (mouseX > xMaximum)
{
mouseXConstrained = xMaximum - canvas.offsetLeft;
}
else
{
mouseXConstrained = mouseX - canvas.offsetLeft;
}
if (mouseY < yMinium)
{
mouseYConstrained = yMinium - canvas.offsetLeft;
}
else if (mouseX > xMaximum)
{
mouseYConstrained = yMaximum - canvas.offsetLeft;
}
else
{
mouseYConstrained = mouseY - canvas.offsetLeft;
}
}
// finally calling of mousetrack function
function mouseTrack(e)
{
if(!e)
{
var e =event;
}
mouseX = e.clientX +
((document.documentElement.scrollLeft) ?
document.documentElement.scrollLeft : document.body.scrollLeft);
mouseY = e.clientY +
((document.documentElement.scrollTop) ?
document.documentElement.scrollTop : document.body.scrollTop);
drawMagGlass();
}
function touchTrack(e)
{
if(!e)
{
var e = event;
}
mouseX = e.targetTouches[e].pageX;
mouseY = e.targetTouches[e].pageY;
}
Example | Working
To see these features live and to get in touch with it please visit http://picmaniac.brinkster.net/Photography.aspx
Views | Magnify Effect
View 1:
This view only shows how it really looks.
![]()
View 2:
This is the first original view and the view that users will see on your website. The magnifying effect will occur after clicking over this image (anywhere).
![]()
View 3:
After the click event the image will zoom out like this.
![]()