title: Zooming in & out an image by clicking zoom buttons (Javascript)
body: <p>I'm trying to get an image zoomed in &amp; out by two zoom buttons (+) &amp; (-). The problem is that "zooming in" stops when the image is full screen size (width 100%). I need to zoom the image much bigger than the screen size. Just can't figure it out how to o that. I'm beginner with Javascript so I hope someone have motivation to help me this little Javascript problem.</p>
  
  <p>I wonder is there any simple zoom in/out/reset plugins that works with zoom buttons? Image grab would be more than cool also.</p>
  
  <p>Thanks again!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function zoomin(){
          var myImg = document.getElementById("map");
          var currWidth = myImg.clientWidth;
          if(currWidth == 2500) return false;
           else{
              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";
          }
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*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: #ddd;
    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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="navbar"&gt;
  &lt;button type="button" onclick="zoomin()"&gt; Zoom In&lt;/button&gt;
  &lt;button type="button" onclick="zoomout()"&gt; Zoom Out&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="main"&gt;
  &lt;img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>" />
  </p>