Combine jQuery functions to make simpler
<p>I have a simple function that changes the source of an image on mouseover and changes it back on mouseout. It works great but when I try to apply this effect to multiple images with the same class the wrong images are being replaced. So I have written different functions for each mouseover image. It is becoming way too much code. Can someone give me some ideas how I can condense this code to make all images with a certain class switch to their appropriate hover image and back.</p>

<pre><code>$(document).ready(function(){
var passiveBio = $("#index_container img.bio").attr("src");
var hoverBio = passiveBio.replace(".jpg", "_hover.jpg");
$("#index_container img.bio")
    .mouseover(function() { 
        $(this).attr("src", hoverBio);
        })
    .mouseout(function() {
        $(this).attr("src", passiveBio);
        });
var passiveSamples = $("#index_container img.samples").attr("src");
var hoverSamples = passiveSamples.replace(".jpg", "_hover.jpg");
$("#index_container img.samples")
    .mouseover(function() { 
        $(this).attr("src", hoverSamples);
        })
    .mouseout(function() {
        $(this).attr("src", passiveSamples);
        });
var passiveServices = $("#index_container img.services").attr("src");
var hoverServices = passiveServices.replace(".jpg", "_hover.jpg");
$("#index_container img.services")
    .mouseover(function() { 
        $(this).attr("src", hoverServices);
        })
    .mouseout(function() {
        $(this).attr("src", passiveServices);
    });});
</code></pre>

<p>This is the div with the images.</p>

<pre><code>&lt;div id="index_container"&gt;
    &lt;a href="samples.html"&gt;&lt;img class="index_box samples" src="images/samples.jpg"/&gt;&lt;/a&gt;
    &lt;a href="services.html"&gt;&lt;img class="index_box services" src="images/services.jpg"/&gt;&lt;/a&gt;
    &lt;a href="about.html"&gt;&lt;img class="index_box bio" src="images/bio.jpg"/&gt;&lt;/a&gt;
    &lt;img class="index_box" src="images/grey.png"/&gt;
    &lt;img class="index_box" src="images/light_blue.png"/&gt;
    &lt;img class="index_box" src="images/dark_blue.png"/&gt;
    &lt;img class="index_box" src="images/grey.png"/&gt;
    &lt;img class="index_box" src="images/light_blue.png"/&gt;
    &lt;img class="index_box" src="images/dark_blue.png"/&gt;
    &lt;p class="clear"&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>I have tried making all the a images the same class and just changing the .jpg to _hover.jpg but they are not changing to the right image. They all change to the same one hover image not their own.</p>

<p>Thank you in advance for your help!</p>
