title: swap image when hovering over its container div
body: <p>I've hit a brick wall trying to swap an image when hovering over its containing div.</p>
  
  <p>i can do it with css, but i have 6 div's with 6 images contained in them. if i did it in css, i would need 6 sets of hover events to change the background image. i want to do this with the most simple code possible.</p>
  
  <p>at the moment the images are not set as a background image but as an <code>&lt;img src&gt;</code></p>
  
  <p>all hover images use the same name but with'over' added into the file name.</p>
  
  <p>ie. shop.png shopover.png is their away to append the img src file name to add the 'over' part when hovering over its container div?</p>
  
  <p>html :</p>
  
  <pre><code>&lt;div class="row"&gt;
  
           &lt;a href="index.php?page=exhibitorlist&amp;id=1"&gt; &lt;div class="c2 center"&gt;&lt;img src="images/eliquid.png"&gt;&lt;h2 class="center"&gt;Juice Brands&lt;/h2&gt;&lt;/div&gt;&lt;/a&gt;
             &lt;a href="index.php?page=exhibitorlist&amp;id=2"&gt; &lt;div class="c2 center"&gt;&lt;img src="images/mod.png"&gt;&lt;h2 class="center"&gt;Hardware&lt;/h2&gt;&lt;/div&gt;&lt;/a&gt;              
            &lt;a href="index.php?page=exhibitorlist&amp;id=3"&gt;&lt;div class="c2 center"&gt;&lt;img src="images/dist.png"&gt;&lt;h2 class="center"&gt;Distributors&lt;/h2&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="index.php?page=exhibitorlist&amp;id=4"&gt;&lt;div class="c2 center on"&gt;&lt;img src="images/shop.png"/&gt;&lt;h2 class="center"&gt;Retailers&lt;/h2&gt;&lt;/div&gt;&lt;/a&gt;              
            &lt;a href="index.php?page=exhibitorlist&amp;id=5"&gt;&lt;div class="c2 center"&gt;&lt;img src="images/robot.png"&gt;&lt;h2 class="center"&gt;Machinary / Packaging&lt;/h2&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="index.php?page=exhibitorlist&amp;id=6"&gt;&lt;div class="c2 center"&gt;&lt;img src="images/other.png"&gt;&lt;h2 class="center"&gt;Other&lt;/h2&gt;&lt;/div&gt;&lt;/a&gt;       
  &lt;/div&gt;
  </code></pre>
  
  <p>css :</p>
  
  <pre><code>#exhibitorcontainer {
  background-color:rgba(0, 0, 0, 0.7);
  background:url(../images/bg2.png) repeat;
  width:100%;
  height:100%;
  }
  #exhibitorcontainer .c2 {
  margin: 0 5px;
  width: 15.8%;
  background-color:rgba(0, 0, 0, 0.5);
  }
  #exhibitorcontainer h2 {
  font-size:16px;
  color: #1b9bff;
  }
  #exhibitorcontainer .c2:hover h2 {
  color:#666;
  }
  </code></pre>
  
  <p>at the moment i switch the H2 from blue to grey, i want to do the same for the image. any ideas on the best way of doing this?</p>