title: Attaching values to Options like Width and Height
body: <p>I have Select menu. Each option switches the image displayed. I'm asking how do I translate over the each unique width and height linked to each options onto the actual displayed image. I understand the width and height are baseless as far as they're effect on an option tag but I guess Im saying is that I want a values associated and bonded to each option that come into play and effect the image when the option they are attached to is selected. Something like adding a variable like 
  var c = a.getElementByTagName('class').getAttributeNode('width').value;??</p>
  
  <p>I really dont know. How do I associate values with the options? Preferably there is a way without attaching a new class to every option. My code so far can only change the src.</p>
  
  <p>I hope you understand the question. I explained it the best I can. Thanks for any help. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;select id='select1'&gt;
      &lt;option value='pic_unavail' selected width='300' height='300'&gt;-- Choose --&lt;/option&gt;
      &lt;outgroup label="Animals"&gt;
      &lt;option value='pic_monkey' id='monkey' width='50' height='100'&gt;Monkey&lt;/option&gt;
      &lt;option value="pic_cat" id='cat' width='100' height='200'&gt;Cat&lt;/option&gt;
      &lt;option value="pic_dog" id='dog' width='200' height='250'&gt;Dog&lt;/option&gt;
      &lt;/outgroup&gt;
  &lt;/select&gt;  
  
  &lt;img id="pic"&gt;   
  
  &lt;script type="text/javascript"&gt;  
  
  document.getElementById("select1").onchange = select;
  
  var a = document.getElementById('select1')    
  var b = document.getElementById('pic');
  
  
  function select() {
      b.src = this.value;
       return 
  }    
  
   &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>