Wednesday, January 28, 2009

[jQuery] Strange .attr('src') behavior in IE

I have a hover script that implements image rollovers that goes like
this:

$(document).ready(function() {
$("img.rollover").hover(function() {
$(this).attr("src", $(this).attr("src").split(".").join("-
hover."));
}, function() {
$(this).attr("src", $(this).attr("src").split("-hover.").join
("."));
});
});

This works great in all browsers--I just use a class="rollover" on the
<img> and name the rollover image with a "-hover" before the
extension.

Oddly, in IE6/7, when I jQuery "load" a <div> with new <img> elements
and reapply the hover function to the new <img> elements, IE gets
screwed up on the "src" setting. It seems that IE uses the full
domain name as the source, and so my src ends up incorrect as "-
hover." gets appended to every item in the src prior to a ".".

eg:

after a load command (where the src attributes are relative, ie. '/
images/myimage.jpg'), I end up with an image src of:

http://www-hover.mysite-hover.com/images/myimage-hover.jpg

This only happens on IE 6/7 and only after a load event.

I use the exact same code on normal http page fetch to build these
images in my <div>, and this script works fine--the -hover only gets
appended at the file name of the src.

Does anybody have any idea why this is happening in IE? Thanks in
advance.

No comments: