Forums

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?


$(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


$(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(\".\"));
});

});

<img class=\"hover\" width=\"0\" height=\"0\" atl=\"\"/>

- image.png
- image_on.png

treehouse : what would you like to learn today?

Forums

Jquery Hover Image Not background