[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.