Combine jQuery functions to make simpler -

I have a simple task that changes the source of an image on mouseover and changes it back to mouseout. It works very well, but when I try to apply this effect to several pictures of the same category then the wrong images are being changed. So I have written different functions for each mouseover image. It is becoming a lot of code. Can anyone tell me some ideas how do I return all the images back to their proper hover image with a specific class switch I can summarize this code for.

  $ (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.mg samples"). Etr ("SQL"); Were hover samples = passive samples. (".jpg", "_hover.jpg"); $ ("# index_container img.smplez"). Mouseover (function () {$ (this) .attr ("src", hoverSamples);}) .mouseout ( Function () {$ (this) .attr ("src", idle session);}); var passiveServices = $ ("ARTR" ("src") ARTR ("src"); Where Hover Services = Passive Services: Rellest (".jpg", "_hover.jpg"); $ ("# IndexX_ Container IMG.Services") .Mosovar (Function () {$ (This) .attr ("src", hover services);}) .mouseout (fu encryption () {$ (this) .attr ("src", idle services);})}} ;   
 It has div with images.  
  & lt; Div id = "index_container" & gt; & Lt; A href = "samples.html" & gt; & Lt; Img class = "index_box samples" src = "pictures / samples.jpg" /> & Lt; / A & gt; & Lt; A href = "services.html" & gt; & Lt; Img class = "index_box services" src = "pictures / services .jpg" /> & Lt; / A & gt; & Lt; A href = "about.html" & gt; & Lt; Img class = "index_box bio" src = "images / bio.jpg" /> & Lt; / A & gt; & Lt; Img class = "index_box" src = "image / gray page" /> & Lt; Img class = "index_box" src = "images / light_blue.png" /> & Lt; Img class = "index_box" src = "picture / dark_blue.png" /> & Lt; Img class = "index_box" src = "image / gray page" /> & Lt; Img class = "index_box" src = "images / light_blue.png" /> & Lt; Img class = "index_box" src = "picture / dark_blue.png" /> & Lt; P class = "clear" & gt; & Lt; / P & gt; & Lt; / Div & gt;   
 I have tried to make all the images the same class and just change the .jpg to the hoover.jpg but they are not changing in the right image. They all do not change the same hover image of their own.  
 Thank you in advance for your help!   
 
 
 Target all images, or give them a normal class and use it as a selector, and Simply replace it inside the function on the fly:  
  $ ('#index_container img'). ({Mouseenter: function () {this.src = this.src.replace ('.jpg', '_hover.jpg')}}, mouseleave: function () {this.src = this .src.replace ('_ Hover.jpg ',' .jpg ');}});