Expanding to include current document name in jquery script

I have some code which preloads images independent of their extension and acts in a way similar to the :hover pseudo class. My question is how can i expand this to include part of the filename in the source. What i mean is the script currently adds _over to the existing filename and leaves the extension also preloading these images. What i want is for it to add /index_files/filename_imagename_over where the imagename is the src of the image. So it already adds _over i want it to add /index_files/ which is static and /filename which changes based on the file name.

$(function() { $('#nav li a img').each(function() {
var originalSrc = this.src,
   hoverSrc = originalSrc.replace(/\.(gif|png|jpe?g)$/, '_over.$1'); 
   image = new Image();

image.src = hoverSrc;

$(this).hover(function() {
  image.onload = function() {
}
  this.src = hoverSrc;
}, function() {
  this.src = originalSrc;
});
});
})

I am also wondering if i can include php script in my javascript, i presum开发者_Python百科e i cant because the server wont process the php because it isn't a .php file. This is the example. If so can i use this in the script. I suppose it would also be possible to simply use a php include() for the javascript into my php document so that the script is included at the server level and the php code is processed.

another easy solution would be to use the images as backgrounds (css) and for the hoover effect you change the background position e.g. http://www.dynamicsitesolutions.com/css/background-image-switching/