show full version of thumbnail on rollover with jQuery?

WordPress cr开发者_开发知识库eates a new image at a reduced size when I specify the dimensions I want it to display, so when I choose 300 x 230 it produces this file as the image source:

http://example.com/myphoto-300x230.jpg

from this full-size version:

http://example.com/myphoto.jpg

I'm using a plugin to expand the 300x230 on rollover. The expanded view is the 300x230 blown up, which is blurry. Is there a way to show the full-size version on rollover, so that it's myphoto-300x230.jpg by default but myphoto.jpg on rollover? Would I need to regex the filename to get rid of the numbers for the dimensions?

A regex for this would look something like:
s/-\d+x\d+././

Assuming your img element has the ID fixme...

var src = $("#fixme").attr('src');
console.log("old image: " + src);

var newimage = src.replace(/-\d+x\d+./, ".");
console.log("new image: " + newimage);

$("#fixme").attr('src', newimage);

See, e.g.: http://jsfiddle.net/entropo/pyww7/

To avoid awkward transitions, you want to ensure that your full-size image is preloaded.

Rather than regex you could store the path to the original image in another attribute of the image tag such as fullsize:

<img src="http://example.com/myphoto-300x230.jpg" fullsize="http://example.com/myphoto.jpg" />

Then just get the value of this attribute in your hover function.

You could use Regex to do that. Here is a Regex to do that:

(?<url>(?:http|ftp|https):\/\/[\w\-_]+(?:\.[\w\-_]+)+(?:[\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?\/)(?<file>\w+-[0-9]+x[0-9]+\.\w+)

take the group "file" and then modify that approriately, then add the text from "url" to it to get the proper url :)