title: How can I control an image's size
body: <p>I am a skilled database / application programmer for the PC.  I am also an ignorant html / javascript / web programmer.</p>
  
  <p>I am creating some documentation about some .Net assemblies for our intranet. Ideally I would like to display an image full size if the browser window can fit it.  If not then I would like to reduce it and toggle between a small version and full size version by a click.  It is a dependency chart and can be different sizes for different pages.  I would prefer a single function to handle this but being it is for our use none of the requirements I mentioned is set in stone.  I would like to make it work well but nothing is mandatory.</p>
  
  <p>I read a lot of stuff but couldn't find anything that matched what I wanted.  First I tried this (after a few iterations):</p>
  
  <pre><code>&lt;img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width=this.naturalWidth;this.height=this.naturalHeight;' ondblclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width="100%";'&gt;
  </code></pre>
  
  <p>It has problems.  First off it enlarges a small image and it looks funny.  Second I would have to put the code in every page.  Third it requires a double click to restore it.  I was going to live with those short commings but the double click fails.  I can't figure out how to restore it.</p>
  
  <p>So I tried to get fancy.  I couldn't figure out how to get past problem 1, but solved 2 and 3 by creating a function in a separate file.  Then I ran into what appeared to be the same problem.  This was my second attempt:</p>
  
  <pre><code>function ImageToggle(Image)
  {
  
      if (ImageToggle.FullSize == 'undefined')
          ImageToggle.FullSize = false;
  
      if (ImageToggle.FullSize)
          {
              Image.width='100%';
              ImageToggle.FullSize = false;
          }
      else
          {
              Image.width=Image.naturalWidth;
              ImageToggle.FullSize = true;
          }
  
      return 0
  }
  </code></pre>
  
  <p>And in my page:</p>
  
  <pre><code>&lt;img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='ImageToggle(this)'&gt;
  </code></pre>
  
  <p>Can what I want be done?  It doesn't sound impossible.  If it is a large amount of effort would be required then alternate suggestions are acceptable.</p>