title: jQuery - Change image src on click
body: <p>I want to be able to change the src of an image on click of two different elements to change from one image, to an active image.</p>
  
  <p>For example, if either .vehicle-desc-wrap or .vehicle-pic-wrap was clicked I want to be able to change the image url within this div from <code>images/saloon-outline.png</code> to <code>images/saloon-outline-active.png</code>, and the same with all the other car images.</p>
  
  <p>So for example, if I click the saloon image the url changes to saloon-outline-active.png, but if I then click the Executive Saloon image, it changes the src of the executive image to <code>execsaloon-outline-active.png</code>, and every other image back to it's normal state (without -active). Here is the HTML:-</p>
  
  <pre><code>&lt;div id="div-vehicle-wrap"&gt;
  
      &lt;div id="div-Car" class="vehicle-item ui-corner-all req-wrapper"&gt;
  
      &lt;div class="vehicle-pic-wrap ui-corner-left req-display success"&gt;
  
      &lt;img class="vehicle-pic-ie6-png" height="100" width="120" alt="Standard Saloon" src="images/saloon-outline.png"&gt;
  
      &lt;/div&gt;
  
      &lt;div class="vehicle-desc-wrap req-display success"&gt;
  
      &lt;div class="vehicle-radio-wrap"&gt;
  
      &lt;div class="vehicle-accept-wrap"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="div-Exec" class="vehicle-item ui-corner-all req-wrapper"&gt;
  
      &lt;div class="vehicle-pic-wrap ui-corner-left req-display success"&gt;
  
      &lt;img class="vehicle-pic-ie6-png" height="100" width="120" alt="Executive Saloon" src="images/execsaloon-outline.png"&gt;
  
      &lt;/div&gt;
  
      &lt;div class="vehicle-desc-wrap req-display success"&gt;
  
      &lt;div class="vehicle-radio-wrap"&gt;
  
      &lt;div class="vehicle-accept-wrap"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>So far I have the following:-</p>
  
  <pre><code>        $('img').click(function(){
              var src = this.src;
              this.src = src.indexOf('-active') == -1 ? src.replace('.png','-active.png') : src.replace('-active.png','.png');
          });
  </code></pre>
  
  <p>This doesn't change the none active images back to the original src and only changes the image on click of the actual image instead of the two wrapper classes; <code>.vehicle-desc-wrap or .vehicle-pic-wrap</code></p>
  
  <p>If anybody could help me with this, that would be much appreciated.</p>
  
  <p>Here is a link to the web site: <a href="http://www.marandy.com/onlinebooking_htp/login-guest.php" rel="nofollow">LINK</a></p>