Warning about Netscape 6.+ and above for Roll Over Images

[WizyWyg]

Dont know if this is important enough, but thought that everyone should know of a problem I spent the last three days banging my head against the wall to solve only to find out that IM NOT a bad html coder as Netscape tried to make me believe.

There is a MAJOR BUG in Netscape version 6.0 and above, and yes, NETSCAPE programmers know about it, and will do (have done) nothing to correct it since it would mean to overhaul and re-write the code for the browser.

IN an effor to be the 'all perfect' browser, the programmers of Netscape, in their defiance to the big "M" got so deluded in their quest that they messed up their OWN CACHE for their browser.

So basically, this is the bug.

If you are planning to use roll over images for your buttons or any part of your design, please take note that Netscape will not "cache" any of your "over" state on your roll over images. ONLY your up-state will be cached.

What this means is that a graphic/button/image with a roll over will "jump" or "disappear" from the page, causing a brief moment where no image will be displayed (but its "outline").

IF YOU press reload/refresh, this only worsens the problem.

To see an example, I posted some roll-overs at my geocities site
http://www.geocities.com/wizywyg/test.html

The page will appear "fine" at first, but should you leave or hit reload and come back to the page, the problem arises. Test it out; though its quite irritating.

There is no work around for this bug, and this has driven a 'battle' for web designers to work with it. Some just completely ignore the problem and advise their visitors of this major problem with Netscape.

If you need, you can search google for:
Netscape 6 Roll Over Image - A very serious problem (an actual title of a thread in a Netscape newsgroup).

For this simple reason, Im not using roll overs for any of my forums buttons. At least not until Netscape 7.0

[WizyWyg]

And if you cant get netscape to work for any reason, this is what it looks like:

[nuno]

LoL

The application Konqueror (konqueror) crashed and caused the signal 11 (SIGSEGV)

(no debugging symbols found)...(no debugging symbols found)...
0x40e26669 in __wait4 () from /lib/i686/libc.so.6
#0 0x40e26669 in __wait4 () from /lib/i686/libc.so.6
#1 0x40ea2154 in __DTOR_END__ () from /lib/i686/libc.so.6
#2 0x405f8838 in KCrash::defaultCrashHandler () at eval.c:41
#3 <signal handler called>
#4 0x412f9efb in khtml::CachedScript::checkNotify ()
from /usr/lib/libkhtml.so.3
#5 0x412f0379 in khtml::CachedScript::data () from /usr/lib/libkhtml.so.3
#6 0x412f2caf in khtml::Loader::slotFinished () from /usr/lib/libkhtml.so.3
#7 0x40239a92 in KIO::Job::result () at eval.c:41
#8 0x4021ed39 in KIO::SimpleJob::slotFinished () at eval.c:41
#9 0x40220b69 in KIO::TransferJob::slotFinished () at eval.c:41
#10 0x40892a7b in QObject::activate_signal ()
from /usr/lib/qt-2.3.1/lib/libqt.so.2
#11 0x4027fe42 in KIO::SlaveInterface::finished () at eval.c:41
#12 0x4020b40c in KIO::SlaveInterface::dispatch () at eval.c:41
#13 0x4027fcc1 in KIO::SlaveInterface::dispatch () at eval.c:41
#14 0x40209f94 in KIO::Slave::gotInput () at eval.c:41
#15 0x40892c81 in QObject::activate_signal ()
from /usr/lib/qt-2.3.1/lib/libqt.so.2
#16 0x408e7a76 in QSocketNotifier::activated ()
from /usr/lib/qt-2.3.1/lib/libqt.so.2
#17 0x408c5f67 in QSocketNotifier::event ()
from /usr/lib/qt-2.3.1/lib/libqt.so.2

#18 0x40842891 in QApplication::notify () from /usr/lib/qt-2.3.1/lib/libqt.so.2

#19 0x4055fc89 in KApplication::notify () at eval.c:41
#20 0x4080d12b in sn_activate () from /usr/lib/qt-2.3.1/lib/libqt.so.2
#21 0x4080d999 in QApplication::processNextEvent ()
from /usr/lib/qt-2.3.1/lib/libqt.so.2
#22 0x4084474c in QApplication::enter_loop ()
from /usr/lib/qt-2.3.1/lib/libqt.so.2
#23 0x4080d197 in QApplication::exec () from /usr/lib/qt-2.3.1/lib/libqt.so.2
#24 0x410349d0 in main () from /usr/lib/konqueror.so
#25 0x0804d0c4 in strcpy ()
#26 0x0804dca9 in strcpy ()
#27 0x0804e0e8 in strcpy ()
#28 0x0804f501 in strcpy ()
#29 0x40d88507 in __libc_start_main (main=0x804ef70 <strcpy+16888>, argc=3,
ubp_av=0xbffffc84, init=0x804a4d0 <_init>, fini=0x804fc60 <_fini>,
rtld_fini=0x4000dc14 <_dl_fini>, stack_end=0xbffffc7c)
at ../sysdeps/generic/libc-start.c:129
:( :mad:

[RDFrye]

Just load all your images up against a table in each page and assign them a 1pixel X 1pixel dimension. If you can see them at all it will just look like this .....................................

[WizyWyg]

Originally posted by RDFrye
Just load all your images up against a table in each page and assign them a 1pixel X 1pixel dimension. If you can see them at all it will just look like this .....................................

Nope it doesn't work. It still has to re-cache the original image along with the roll over. Its a bug in the Cache system. I've already test that method (it was the first way I tried). Its just nutscrape and its "incompetent" programmers.

[krs-one]

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}


First of all, seeing code like that makes me puke. It's obviously generated from Dreamweaver and sucks. Since it is geared towards IE, of course Netscape will choke on it.

Second of all, image rollovers are pretty depreciated. They are a thing of the past, must like drop down menus.

Next, the site you sent me to popped up a message box with a Javascript error in it. Get this, I was in IE 6.0 as well. Image that, IE messing up.

Furthermore, http://www.vortex-webdesign.com/help/3rd_image_roll.htm works JUST fine for me in NS 6.2. Images load faster than in IE and they seem to cache just fine.

Finally, how do you legitimize your claim by saying it would require a rewrite of the browser? "...since it would mean to overhaul and re-write the code for the browser." Obviously this shows you have no knowledge of the browser and how its written. A bug, if this were one, especially one so small, would never require an overhaul of the browser. Possibly some code added to the abstracted Gecko engine, or possibly the interface layer, but nothing more than that.

-Vic

[NUTNDUN]

I thought I would post the code I use for my rollovers and I have no problems what so ever in any browser;

here is the code from the .js file that is called to right before the rollovers;

if (document.images) {

image1on = new Image();
image1on.src = "http://";

image2on = new Image();
image2on.src = "http://";

image3on = new Image();
image3on.src = "http://";

image4on = new Image();
image4on.src = "http://";

image5on = new Image();
image5on.src = "http://";

image6on = new Image();
image6on.src = "http://";

image7on = new Image();
image7on.src = "http://";

image8on = new Image();
image8on.src = "http://";

image1off = new Image();
image1off.src = "http://";

image2off = new Image();
image2off.src = "http://";

image3off = new Image();
image3off.src = "http://";

image4off = new Image();
image4off.src = "http://";

image5off = new Image();
image5off.src = "http://";

image6off = new Image();
image6off.src = "http://";

image7off = new Image();
image7off.src = "http://";

image8off = new Image();
image8off.src = "http://";

}

function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");
}
}
}
<!------------------------end of .js file------------------------------------->


This is whats in the table code;

<TABLE align="center" width="780" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD><IMG SRC="{imagesfolder}/forumsnav/header_middle_left.jpg" WIDTH=257 HEIGHT=42 alt=""></TD>
<td><a href="" onMouseOver="changeImages('image1', 'image1on')" onMouseOut="changeImages('image1', 'image1off')"><img name="image1" src="{imagesfolder}/" title="" width=51 height=42 border=0></a></td>
<td><a href="" onMouseOver="changeImages('image2', 'image2on')" onMouseOut="changeImages('image2', 'image2off')"><img name="image2" src="{imagesfolder}/" title="" width=63 height=42 border=0></a></td>
<td><a href="" onMouseOver="changeImages('image3', 'image3on')" onMouseOut="changeImages('image3', 'image3off')"><img name="image3" src="{imagesfolder}/" title="" width=90 height=42 border=0></a></td>
<td><a href="" onMouseOver="changeImages('image4', 'image4on')" onMouseOut="changeImages('image4', 'image4off')"><img name="image4" src="{imagesfolder}/" title="" width=72 height=42 border=0></a></td>
<td><a href="" onMouseOver="changeImages('image5', 'image5on')" onMouseOut="changeImages('image5', 'image5off')"><img name="image5" src="{imagesfolder}/" title="" width=72 height=42 border=0></a></td>
<td><a href="" onMouseOver="changeImages('image6', 'image6on')" onMouseOut="changeImages('image6', 'image6off')"><img name="image6" src="{imagesfolder}/" title="" width=42 height=42 border=0></a></td>
<td><a href="" onMouseOver="changeImages('image7', 'image7on')" onMouseOut="changeImages('image7', 'image7off')"><img name="image7" src="{imagesfolder}/" title="" width=60 height=42 border=0></a></td>
<td><a href="" onMouseOver="changeImages('image8', 'image8on')" onMouseOut="changeImages('image8', 'image8off')"><img name="image8" src="{imagesfolder}/" title="" width=50 height=42 border=0></a></td>
<td><img src="{imagesfolder}/" width=23 height=42 alt=""></td>
</tr>
</table>
<!---------------------------------end of table code----------------------->