Jquery Hover Image <img /> Not background

[web2works]

Hi,
I have created the following function below to automatically add _on to the end of the filename. This worked perfectly on localhost but what else could I use apart from slit?

Code:

$(function(event) {
$(“img.hover”).hover(function(event) {
$(this).attr(“src”, $(this).attr(“src”).split(“.”).join(“_on.”)); // adds -hover to the name of the image
}, function(event) {
$(this).stop(true,false); // prevents the creation of stacked actions
$(this).attr(“src”, $(this).attr(“src”).split(“_on.”).join(“.”)); // removes -hover from the name of the image
});
});

You can see the example at http://dev.web2works.co.uk/thefcdeli
The social media icon, bottom left is where I am using it.

Also this is a new design, what do you guys think?

[doobie]

web2works,

It looks like the .js is adding the _on to the image src properly. Interestingly enough, when you manually add it in FireBug, the image loads (although it looks to me like the same exact image). But when you hover, it leaves the area blank… strange…

Let’s keep digging.

-Jacob

[web2works]

I see the problem and why it work on localhost with no . in the domain name.

http://dev.web2works.co.uk/thefcdeli/image/linkedin_logo.png

Where as it is using:
http://dev_on.web2works_on.co_on.uk/thefcdeli/image/linkedin_logo_on.png

How could I make this work to just look for the image name after the last / of the src in the image? I am not very good with regular expressions if you can help me out please.

[web2works]

Your was right too I had no uploaded to right images an got confused with the _on and not.
Thanks

[web2works]

I figured this out on my own so if this helps anymore welcome to use

Code:

$(function() {

$(“.hover”).hover(function () {
var filePath = $(this).attr(“src”);
var dotPos = filePath.lastIndexOf(“.”) ;
var extension = filePath.substr(dotPos,filePath.length);
var newPath = filePath.replace(extension,”_on”+extension);
$(this).attr(“src”,newPath);
},function () {
$(this).stop(true,false);
$(this).attr(“src”, $(this).attr(“src”).split(“_on.”).join(“.”));
});

});

– image.png
– image_on.png

[Author]

Posts