Odd Hover Button Behaviour

[chestertb]

Hi All,

Something strange has happened to my Internet Explorer 6.

I have been using a very simple mouseover function to swap images.

<script language="javascript">
mb=new Image;mb.src="images/help-s.gif";
ma=new Image;ma.src="images/help.gif";

function highlight(choice)
{
imgName = choice;
imgOn = eval('mb.src');
document[imgName].src = imgOn;
}

function normal(choice)
{
imgName = choice;
imgOn = eval('ma.src');
document[imgName].src = imgOn;
}

</script>

In the body, this;

<a href="apage.htm" onmouseover="highlight('t1')" onmouseout="normal('t1')"><img name="t1" id="t1" src="images/help.gif"></a>

It has been working for more than a year, and it still works as per spec in Mozilla /Netscape.

Trouble is, IE (actually Crazy Browser) doesn't cache the images any more, so each time you mouse over it ignores the preloaded images and goes to the server which means, or course, that the mouseover effect is anything but instant. Note that it does this every time, you mouseover, not just the first time.

This seems to have happened since the last "security update". I'm not even going to try top second guess what the evil empire might have done to cause this, so I thought I'd turn to the brains trust here.

Is there a different way to achieve the mouseover image swap effect?

Thanks
CTB

[Pittimann]

Hi!

Probably your update reset a few settings to default. Just check your internet options (settings concerning temporary files). Sorry, I don't know where you will find it, my IE speaks German. I guess it's in the tools menu and then internet options...

Cheers - Pit

[chestertb]

Thanks Pit,

I checked all the IE settings, but they seem normal.

I'm also checking for spyware, but bon't think I have any of that either.

Any suggestions re an alternative function to swap the images?

CTB

[Pittimann]

Hi!

Even though I personally would not use that function, it obviously is not a problem related to that. It seems sure that it is a cache problem.

Sorry - don't know how to solve that at present.

Regards - Pit

[Kor]

maybe you should insert the preloading code lines in a function and call it onload

<script>
function prel(){
mb=new Image;mb.src="images/help-s.gif";
ma=new Image;ma.src="images/help.gif";
}

...
...
onload=prel;
</sript>

I also use rather setAttribute() method for rollover, but this should have no relevance here. IE often has some preload cache problems anyway, nomatter of which preloading codes you may use...

:D

[Vladdy]

use CSS for your rollovers :rolleyes:
www.vladdy.net/Demos/submitstyling.html

[Charles]

Be aware, however, that

function highlight(choice)
{
imgName = choice;
imgOn = eval('mb.src');
document[imgName].src = imgOn;
}

could be rewritten more simply, and with much less work for the JavaScript interpreter, as

function highlight(imgName) {document[imgName].src = mb.src}

[chestertb]

Thanks guys.

Vladdy... what is IEFixes.htc?

Does that mean this CSS solution is only for IE?

And Kor... can you give me some example code using setAttribute(). I've not used it before.

Thanks

CTB

[chestertb]

Thanks Charles,

I use the eval() because it then allows me to combine the pic id with a or b... makes the function more versatile for other things I do with it.

For example, on www.sapphiremarine.com, two variables are passed to the function, one representing the menu group or page reference, and the other being the pic id.

CTB

[Kor]

<script>
function roll(obj,imag){
obj.setAttribute('src',imag)
}
</script>

...

<img src="off.jpg" onmouseover="roll(this,'on.jpg')" onmouseoutr="roll(this,'off.jpg')">

[Charles]

Originally posted by chestertb
Thanks Charles,

I use the eval() because it then allows me to combine the pic id with a or b... makes the function more versatile for other things I do with it.

For example, on www.sapphiremarine.com, two variables are passed to the function, one representing the menu group or page reference, and the other being the pic id.

CTB imgOn = window[menuGroup + choiceRef + 'b.src']

But even that is a little excessive. Abetter solution would have been to organize your images as properties of some Object. Then it might be

imgOn = myImages[menuGroup][ choiceRef]['b.src']

You almost never need to use the "eval()" method and it almost always mekes things worse.

[Kor]

[quote]
You almost never need to use the "eval()" method and it almost always mekes things worse.
[quote]
correct, i agree

[Vladdy]

Originally posted by chestertb
Vladdy... what is IEFixes.htc?
Explained here: www.vladdy.net/Demos/IEPseudoClassesFix.html
Not needed for <a> rollovers.

[chestertb]

Thank you all.

My education continues. Your feedback is much appreciated.

CTB