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>