Expanding to include current document name in jquery script

Question

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 presume 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.

You should be able to get all that going based on the previous answers. Oh, and congrats on figuring out the code format button :) — alex
– alex, Commented Apr 27, 2011 at 7:29
@alex Hehe, just realised all lines after that need the spacing to be right as well. Can you directly answer the question because i am going to need to insert the php into a select part of the script. — Jason
– Jason, Commented Apr 27, 2011 at 7:35
@alex Never mind realised i don't need to set it in the document. If i set the documentname_imagename in my php document then when the javascript receives it, it will be correct because the php is calculated server side. — Jason
– Jason, Commented Apr 27, 2011 at 7:39

Flask · Accepted Answer · 2011-04-27 07:34:38Z

1

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/

answered Apr 27, 2011 at 7:34

Flask

4,9841 gold badge23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Over a year ago

Have seen this but i have already got a nice script going don't really want to recode it when neither is more efficient.

Jason Over a year ago

since i answered my own question, however this answer is still usefull you get my vote

Collectives™ on Stack Overflow

Expanding to include current document name in jquery script

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related