Rollover Gifs Not Held In Memory

[peterinwa]

I had always wondered why my rollover gifs changed more slowly accessing my web pages over the net than from my hard drive. I figured that after the page displayed all the gifs once (rollover mode and not) that they would be held in memory. So it wouldn't matter if they originally came from over the net or from my local drive. But they always work slower across the net.

Now I see that they are not held in memory. I know this because after loading the page from my website into memory and rolling-over all the rollovers so that all possible gifs were displayed, I FTPed new gifs to my website. Then without reloading the page all of the sudden the rollovers displayed the new gifs. So as the rollover action changed the display, the gifs were coming from over the net. Hope that's clear enough.

Once a gif is displayed shouldn't it be held in memory? Should every rollover go back to the website?

In case it means something, I preload them with the code below. I guess if this is really preloading them then you wouldn't have to rollover them all to get them into memory as I note above.

Thanks for any ideas, Peter

// Preload graphics for rollovers
if (document.images){
cbc=new Image;
cbc.src="links/CBC_b_286x25.gif";
cbcGr=new Image;
cbcGr.src="links/CBC_g_286x25.gif";
fcnc=new Image;
fcnc.src="links/FC_b_167x25.gif";
fcncGr=new Image;
fcncGr.src="links/FC_g_167x25.gif"}

[dcrombie]

Try using: new Image (width, height) to pre-load the images at the correct size.

[chadmg]

It's because you need parenthesis.
cbc = new Image();

NOT
cbc = new Image;

[peterinwa]

Thanks for the advice and I re-coded all my rollovers correctly, for example:

// Preload graphics for rollovers
if (document.images){
fcnc=new Image(167,25);
fcnc.src="links/FC_b_167x25.gif";
fcncGr=new Image(167,25);
fcncGr.src="links/FC_g_167x25.gif"}

I've sometimes noticed this very obscure problem which I couldn't re-create today with Netscape where when I did a button rollover the button temporarily changed size. I suspect that will be fixed now that I am specifying the size. I didn't know how to specify size with new Image() before.

However, the slower reaction I get over the Internet is still there. It is not horribly long and perhaps it is normal. I will have to keep it in mind as I visit other sites in the future. But it is very easy to see.

On the bottom of one of my pages there are five rollover links. Looking at the page from my hard drive, I can scan the mouse cursor across them VERY quickly and as it flies by they all change color. But looking at the page over the Internet if I pass the cursor over a link too quickly it will never change color.

After making the changes I also repeated my earlier test. I changed one of the rollover gifs and then FTPed it to my website. Then, without reloading the page, I passed the cursor over the rollover and saw the new gif appear. Clearly, even with the new coding, my browsers (IE and N) are checking my website before performing a rollover -- rather than just doing it from memory.

My best guess about what is happening is that in fact the gifs are being displayed from memory, but before displaying them on a rollover the browser first checks the website to ensure that they have not changed. Thus the momentary delay as the browser looks across the web.

I guess I'll just go with that assumption for now and let the subject rest.

Thanks, Peter

P.S.

Well, can't leave things alone. In the above code:

fcnc=new Image(167,25);

I just found I can change 167 to anything and it doesn't make any difference on the page. My guess why is because whatever you state there is overridden by the actual HTML <img command where I have width= 167 height=25.

It was suggested that fcnc=new Image(167,25); would cause the image to be loaded into memory at the correct size. At first glance that sounds logical, but I suspect graphics are always loaded into memory in their original format and only sized upon display by the browser.

[tedster]

This was an oft documented bug in recent versions of IE, but it's the first I've heard of it happening in Netscape. The graphics actually ARE stored in the cache by IE, but for some reason, the browser still calls out to the server on a rollover script, and ignores the cache.

Some people have claimed that it's essential to use the identical URL for the image (always relative, always absolute, etc.) but I never could verify that with my own tests.

FInally, I have almost comletely abandoned the use of rollover images. I prefer css hover effects these days, but my migration to css was hurried along by the Internet Explorer silliness.

[peterinwa]

Hi Tedster,

Thanks, that clears it up. Though I have one final question: Do you think it matters to include the width,height in new Image() e.g., new Image(100x25)? If it matters, I never change the size or scale the graphic. I am displaying them their actual size... so it wouldn't seem to be needed.

Now moving on... I finally just started using CSS so I could specify font size in px. I love it and finally my pages look almost identical with different browsers. But I have never heard of CSS hover. I just searced and found how it works with text links, but can it be used for graphics to simulate rollovers?

Thanks!

[baton]

the idea of css rollovers is to use javascript and change current element CSS class within its onmouseover event handler

[TGecho]

Actually, you can also use :hover to change the background of an element, so no javascript is needed. A search should bring up lots of information.

[peterinwa]

It is still not clear to my little brain whether or not CSS can be used as I currently use JS rollovers to change graphics (not text and/or text background) on mouseOver and mouseOut.

Thanks, Peter