title: Rollover text/img-based link to show an image
body: <p>I found a flash piece on a website I'd like to emulate using JQuery:
  <a href="http://www.jbcoxwell.com/construction_services.html" rel="nofollow noreferrer">http://www.jbcoxwell.com/construction_services.html</a></p>
  
  <p>In searching this site, I found one post useful as the basis for starting my script:
  <a href="https://stackoverflow.com/questions/4704823/show-id-hide-id-when-hover-another-id">Show #id - hide #id when hover another #id</a></p>
  
  <p>I got as far as getting the hover to work and show the photo area. I'm more of a novice enthusiast and sometimes have problems with syntax and such, but when it really broke down is when I tried to target the id of the text link on rollover and match it to the image. I am not sure how to match the text with the right image. I know that using an ID twice is a no-no, so how do I group two items in likeness but also separate them when it comes to functionality?</p>
  
  <p>Here is my html code:</p>
  
  <pre><code>&lt;body&gt;&lt;div id="container"&gt;
  &lt;div class="text" id="txt1"&gt;Service 1&lt;/div&gt;
  &lt;div class="text" id="txt2"&gt;Service 2&lt;/div&gt;
  &lt;div class="img" style="display: none" id="img1"&gt;Photo 1&lt;/div&gt;
  &lt;div class="img" style="display: none" id="img2"&gt;Photo 2&lt;/div&gt;&lt;/div&gt;&lt;/body&gt; 
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code> #img1 {
   background-image: url(image/img1.jpg);
   background-color: red;}
   #img2 {
   background-image: url(image/img2.jpg);
   background-color: blue;}    
  .text {
   width: 150px;
   height: 15px;
   background-color: #7a7a7a;
   float: left;
   clear: left;
   margin-bottom: 25px;}
  .img {
   width: 300px;
   height: 100px;
   float: right;}
  </code></pre>
  
  <p>And my .js file:</p>
  
  <pre><code>$(function() {
      // define the mouseover event for text
  $('.text'+this.id).mouseover(function() {
          $('.img').css('display', 'block');
      });
  
      // define the mouseout event for text       
  $('.text'+this.id).mouseout(function() {
          $('.img').css('display', 'none');
      });
  
  });
  </code></pre>
  
  <p>I've spent time looking through this and other sites for snippets here and there but I seem to keep going in circles. I'd love to understand where I'm going wrong with this. Thank you for your time!</p>
  
  <p>*Edit: Here is the most functional version I was able to make this:
  <a href="http://jsfiddle.net/aburgin/EKb4E" rel="nofollow noreferrer">http://jsfiddle.net/aburgin/EKb4E</a></p>