title: Change two div contents on mouseover image in separate div
body: <p>I'm trying to change two (preview) <code>div</code> elements with <code>mouseover</code> on a button-image with a link.</p>
  
  <p>One of the preview-divs will show an image, which I would like to have linked to a specific site</p>
  
  <p>The button-image also has a <code>mouseover</code> function class in CSS.</p>
  
  <p>I might add that there will be multiple images to use this function, each spaced with an own div and a class, which i believe isn't semantically correct as it should be when using an usorted list (but that i will worry about later)</p>
  
  <p>Also I'd like to add I'm new to scripting but eager to learn.</p>
  
  <p>On <code>mouseout</code> or <code>click</code> is not important, the current (preview) contents may remain as on last <code>mouseover</code>.</p>
  
  <p>Currently the changing of the preview divs content works by adding document.getElementById to the anchor and the img separately to each button as stated in the following messy code , but i am looking for a cleaner approach like something with javascript or jquery and using vars and making the preview image clickable and linked to the previewed site
  <strong>[EDIT:]This code DOES work for making the preview image a link[/EDIT]</strong></p>
  
  <p>It would be really great if i could load each preview image and text from an external file</p>
  
  <pre><code>&lt;div class="btn"&gt;
  
   &lt;a href="http://www.previewed_site.com" target="_blank"
   onmouseover="document.getElementById('preview_text_content')
   .innerHTML = 'a short preview description here';"&gt;
  
    &lt;img onmouseover="document.getElementById('preview_img_content')
    .innerHTML = '&lt;a href=\'http://www.previewed_site.com\'&gt;
    &lt;img src=\'preview.jpg\' /&gt;&lt;/a&gt;';" src="btn.png" width="100px"
    height="40px" alt="mysite.com" /&gt; 
  
   &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS for the btn mouseover (which works like i want but added here for reference):</p>
  
  <pre><code>.btn {
      position relative;
      overflow: hidden;
      z-index: 1;
      top: 5px;
      width: 100px;
      height:40px;
  }
  .btn a { 
      display:block; 
      width:100px; 
      height:40px; 
      z-index: 100;
  }
  .btn a:hover { 
      background: url(btn_hover.png);
  }
  </code></pre>
  
  <p>Some words of advice or some links to example codes would be greatly appreciated</p>