showing results for - "counter increase size css in js"
Marie
05 Jul 2018
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>JavaScript Increasing and Decreasing Image Size</title>
6<style>
7    button{
8        padding: 3px 6px;
9    }
10    button img{
11        vertical-align: middle;
12    }
13</style>
14<script>
15    function zoomin(){
16        var myImg = document.getElementById("sky");
17        var currWidth = myImg.clientWidth;
18        if(currWidth == 500){
19            alert("Maximum zoom-in level reached.");
20        } else{
21            myImg.style.width = (currWidth + 50) + "px";
22        } 
23    }
24    function zoomout(){
25        var myImg = document.getElementById("sky");
26        var currWidth = myImg.clientWidth;
27        if(currWidth == 50){
28            alert("Maximum zoom-out level reached.");
29        } else{
30            myImg.style.width = (currWidth - 50) + "px";
31        }
32    }
33</script>
34</head>
35<body>
36    <p>
37        <button type="button" onclick="zoomin()"><img src="/examples/images/zoom-in.png"> Zoom In</button>
38        <button type="button" onclick="zoomout()"><img src="/examples/images/zoom-out.png"> Zoom Out</button>
39    </p>
40    <img src="/examples/images/sky.jpg" id="sky" width="250" alt="Cloudy Sky">
41</body>
42</html>