Hello I am writing a script that will replace the src of an image when the user hovers over it. I am using jquery and regex to accomplish this and have tested it on my local server but the src of the images on the live server is different and uses a non-relative path.
Here is my code

$(document).ready(function() {
            $("img.imagefield").mouseover(function() { 
			var regex = "^(http|https|ftp)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/sites/all/files/[a-zA-Z]*";
            var src = $(this).attr("src").match(regex) + "_silly";
                                        $(this).attr("src", src);
                                })
                                .mouseout(function() {
                                        var src = $(this).attr("src").replace("_silly", "");
                                        $(this).attr("src", src);
                                });
          });

the regular expression should match something like
http://www.examplesite.com/sites/all/files/John.jpg?161717717 (the random numbers at the end are just some added junk drupal throws on for some reason)
and then when you hover over the image it should be
http://www.examplesite.com/sites/all/files/John_silly.jpg?161717717
and then return to the original src when you mouseout.
and change it to

Recommended Answers

All 4 Replies

Am wondering, wouldn't it be easier to match .jpg (optionally followed by a question mark and some chars) and replace it with _silly.jpg (and any other filetype you use) ?

var src = $(this).attr("src");
src = src.replace(/^(.*)(\.jpg)(\?.*)?$/mg, "$1_silly$2$3");

Yea I am not that great with regex or jquery so I am open to any suggestions, Right now I am busy but will post on here when I find out if that solution works.

That doesnt seem to match anything when I run the page it doesnt change the src when I rollover and in notepad++ the expression doesnt match anything when I set the find to regex.

To remove _whatever the expression is

src = src.replace(/^(.+)(_[^.]+)(.+)$/, "$1$3");

To insert _whatever the expression is

src = src.replace(/^(.+)(\.[^.]+\?.+)$/, "$1_whatever$2");
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.