title: On mouse over image in div changes
body: <p>I would like to have "links", those are not real links, they are in fact titles of equipment or something I want to review.</p>
  
  <p>On mouse over that title I would like image change, but what I want is that after mouse is out of that title, last image stays there.</p>
  
  <p>I got some code that I don't like. It can be jquery, css, javascript, I would implement it on wordpress site.</p>
  
  <p>Simple idea is, that I would have for example:</p>
  
  <p>PICTURE GOES HERE</p>
  
  <p>Equipment 1: front | back | side
  Equipment 2: front | back | side</p>
  
  <p>At first Equipment 1: front is opened above. 
  After mouse over any other: front, back or side, picture would load but would not change until I go mouse over another text (front,back or side). </p>
  
  <p>Pre-load would be ok as well, but I already have it on site. It would be great that it works just as regular images on WP, so if I click on picture it goes to full size picture or link, mouse over picture gives caption (title) etc. If not possible nvm.</p>
  
  <p>It should look exactly as <a href="http://www.the-digital-picture.com/Reviews/Tamron-18-270mm-f-3.5-6.3-Di-II-VC-Lens-Review.aspx" rel="nofollow">http://www.the-digital-picture.com/Reviews/Tamron-18-270mm-f-3.5-6.3-Di-II-VC-Lens-Review.aspx</a> , find image with more titles under it, and go mouse over those.</p>
  
  <p>I have jquery that doesn't work at all and code with css, that on mouse out changes picture, but I don't want to change on mouse out.</p>
  
  <p>JQUERY - Tryout 1 - doesn't work, checked it is loaded </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
  
      $("#picture_links a").hover(function(){
          var src = $(this).attr("href");
          $("#picture_holder img").attr("src", src);
      })
  
      $("#picture_links a").click(function(){
          return false;
      })
  
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS - different script, works, but not as I want:</p>
  
  <pre><code>/* On mouse image roll over */
  
  img.nohover {
  border:0
  }
  img.hover {
  border:0;
  display:none
  }
  a:hover img.hover {
  display:inline
  }
  a:hover img.nohover {
  display:none
  }
  </code></pre>