JavaScript can be used to manipulate an HTML element’s style property to create a zoom-in and zoom-out effect. To do this, simply access the width attribute using the style property and increase it or decrease it according to the requirement. To access this style property of an HTML element, a reference to the HTML element must be created and stored inside a variable of JavaScript. Let’s go over the step-by-step procedure for achieving the task at hand.
Step 1: Setting up the HTML Document
Start by creating a new HTML document with the following lines inside it:
<img id="pic" src="pic.png" alt="" />
<button onclick="zoomIn()">Zoom-In</button>
<button onclick="zoomOut()">Zoom-Out</button>
</center>
In the above lines:
- First a new image element is being created with the local url for a picture that will be displayed on the HTML document.
- The image element has the id set to “pic” so that JavaScript can reference it.
- After that, create a new button, “Zoom-In”, with the onclick property that will search for the function zoomIn() in the script file or in the script tag.
- After that, create a new button, “Zoom-Out”, which has been created with the onclick property that will search for the function zoomOut() in the script file or in the script tag.
Running the HTML document at this point will yield the following output on the browser:
Step 2: Adding Functionality Using JavaScript
In the second step, either create a script tag in the same HTML document or create a new JavaScript file and link it to the HTML document. No matter the case, the first thing in JavaScript is to create the function for the zoom-in button with the following lines of code:
var pic = document.getElementById("pic");
var width = pic.clientWidth;
pic.style.width = width + 100 + "px";
}
In the above code snippet:
- Function zoomIn() has been created which will be called every time the Zoom-In button is clicked.
- Inside the function, the first step is to get the reference of the image element by using its ID and store it inside the variable “pic”.
- After that, get the current width of the image element by using the clientWidth attribute.
- And then access the style property and the width attribute within the style property and increase its value by adding some pixels in the current width of the image.
This will mimic a zoom-in effect on the image every time the zoom-in button is clicked.
After that, create the function for the Zoom-Out button using the following lines:
var pic = document.getElementById("pic");
var width = pic.clientWidth;
pic.style.width = width - 100 + "px";
}
In the above code snippet:
- Function zoomOut() has been created which will be called every time the Zoom-Out button is clicked.
- Inside the function, the first step is to get the reference of the image element by using its ID and store it inside the variable “pic”.
- After that, get the current width of the image element by using the clientWidth attribute and store it inside the “width” variable.
- And then access the style property and the width attribute within the style property and decrease its value by removing some pixels from the current width of the image element.
This will mimic a zoom-out effect on the image every time the zoom-out button is pressed.
Step 3: Testing the Functionality
The last step to run the HTML document and observe the working of the HTML document to be as:
As it is clear from the gif above that the zoom-in and the zoom-out button are working perfectly as intended.
Wrap up
It is quite easy to mimic a zoom-in and a zoom-out effect on an image element with the help of JavaScript. After the HTML document is all set-up, go into the JavaScript file and access the width property of the image. And then change the value of that width property according to the button that has been pressed by the user.
