Zooming in & out an image by clicking zoom buttons (Javascript)

Question

I\'m trying to get an image zoomed in & out by two zoom buttons (+) & (-). The problem is that \"zooming in\" stops when the image is full screen size (width 100%). I ne

Answer 1

Your zoom method is working good just remove the css max width, and change your js validation to allow the image, get bigger.

function zoomin(){
        var myImg = document.getElementById("map");
        var currWidth = myImg.clientWidth;
        //if(currWidth == 2500) return false;
        // else{
        //    myImg.style.width = (currWidth + 100) + "px";
        //} 
        myImg.style.width = (currWidth + 100) + "px";
    }
    function zoomout(){
        var myImg = document.getElementById("map");
        var currWidth = myImg.clientWidth;
        if(currWidth == 100) return false;
		 else{
            myImg.style.width = (currWidth - 100) + "px";
        }
    }

*body {
  margin: 0;
}
#navbar {
	overflow: hidden;
	background-color: #099;
	position: fixed;
	top: 0;
	width: 100%;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 20px;
}
#navbar a {
  float: left;
  display: block;
  color: #666;
  text-align: center;
  padding-right: 20px;
  text-decoration: none;
  font-size: 17px;
}
#navbar a:hover {
  background-color: #ffffd;
  color: black;
}
#navbar a.active {
  background-color: #4CAF50;
  color: white;
}
.main {
  padding: 16px;
  margin-top: 30px;
}
.main img {
	/* max-width: 100%; */
	height: auto;
}
.button {
  width: 300px;
  height: 60px;
}

 Zoom In
 Zoom Out

On the other hand I would recommend magic zoom as a zoom library