Image Ready Rollovers

[Magic-chef]

This rollover script is created by Image Reaady. When using IE and
especially with Win XP the images involved in the rollover disappear.
It happens gradually with one or two at first then all. Even a browser
refresh does not bring the images back.

I there a problem known issue with Image Ready rollover scripts and IE+XP?

<script TYPE="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
login_over = newImage("images/login-over.jpg");
join_over = newImage("images/join-over.jpg");

Snip out several image preloads

preloadFlag = true;
}
}

// -->
</SCRIPT>

[Evertjan.]

Magic-chef wrote on 28 jun 2003 in comp.lang.javascript:

I there a problem known issue with Image Ready rollover scripts and
IE+XP?

No, not to me.

Why not keep it simple:

<img src="img1.jpg"
onmouseover="this.save=this.src;this.src='img1a.jp g'"
onmouseout="this.src=this.save">
<img src="img1a.jpg" width=0 alt="preloader">
<br>
<img src="img2.jpg"
onmouseover="this.save=this.src;this.src='img2a.jp g'"
onmouseout="this.src=this.save">
<img src="img2a.jpg" width=0 alt="preloader">

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Magic-chef]

Evertjan. wrote:

Magic-chef wrote on 28 jun 2003 in comp.lang.javascript:

I there a problem known issue with Image Ready rollover scripts and
IE+XP?

No, not to me.

Why not keep it simple:

<img src="img1.jpg"
onmouseover="this.save=this.src;this.src='img1a.jp g'"
onmouseout="this.src=this.save">
<img src="img1a.jpg" width=0 alt="preloader">
<br>
<img src="img2.jpg"
onmouseover="this.save=this.src;this.src='img2a.jp g'"
onmouseout="this.src=this.save">
<img src="img2a.jpg" width=0 alt="preloader">

So, I would use the preload function just as it is and scrap the
newimage function. The new image is replaced by onmouse*= in the image
tags.

Please excuse me as I am just starting to learn Javascript.

[bigKenny]

Evertjan. wrote:[color=blue]
> Magic-chef wrote on 28 jun 2003 in comp.lang.javascript:
>[color=green]
>>I there a problem known issue with Image Ready rollover scripts and
>>IE+XP?[/color]
>
>
> No, not to me.
>
> Why not keep it simple:
>
> <img src="img1.jpg"
> onmouseover="this.save=this.src;this.src='img1a.jp g'"
> onmouseout="this.src=this.save">
> <img src="img1a.jpg" width=0 alt="preloader">
> <br>
> <img src="img2.jpg"
> onmouseover="this.save=this.src;this.src='img2a.jp g'"
> onmouseout="this.src=this.save">
> <img src="img2a.jpg" width=0 alt="preloader">
>
>
>[/color]

So, I would use the preload function just as it is and scrap the
newimage function. The new image is replaced by onmouse*= in the image
tags.

Please excuse me as I am just starting to learn Javascript.

Great solution, I have a lot of trouble with those darn roll-over scripts!

I have a suggestion though. when I use the width=0 for the "preloader" images, I'm still seeing a tiny box next to the real image. I am using VS .Net and IE6. The images in question are in an anchor tag in my example; this is probably the most common use, ie roll-over links...but I digress.

Instead, I used style="display:none;" in the "preloader" img tag. Bam! No tiny image link!

<a href="#" id="button1" runat="server">
<img name="enterButton_03" src="images/enterButton_03.png" width="91" height="20" border="0" alt="enter" id="IMG1" runat="server"
onmouseover="this.save=this.src;this.src='images/enterButton_03-over.png'"
onmouseout="this.src=this.save">
<img src='images/enterButton_03-over.png' style="display:none;" alt="preloader">
</a>