JavaScriptNo Comments

default thumbnail

We can increase and decrease the image size proportionally using JavaScript. Here is how to use the javascript code to make the image zoom in and zoom out.

HTML


<button type="button" onclick="zoomin()"> Zoom In</button>
<button type="button" onclick="zoomout()"> Zoom Out</button>
  
<img src="dummy.jpg" id="image" width="300" alt="Dummy Image">
    

Javascript Zoom-in Code

function zoomin(){
        var myImg = document.getElementById("image");
        var nowWidth = myImg.clientWidth;
        if(nowWidth == 500){
            alert("Maximum zoom-in level reached.");
        } else{
            myImg.style.width = (nowWidth + 50) + "px";
        } 
    }

Javascript Zoom-out Code

function zoomout(){
        var myImg = document.getElementById("image");
        var nowWidth = myImg.clientWidth;
        if(nowWidth == 50){
            alert("Maximum zoom-out level reached.");
        } else{
            myImg.style.width = (nowWidth - 50) + "px";
        }
    }

The clientWidth() property returns the width of an element in pixels, including padding.

Be the first to post a comment.

Add a comment