DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 3.0 | 18

Dynamic Headline Fader, Version 3.0
Image object events in NS

Wrong!

The following early versions of Navigator do not support event handlers for the Image object, on all platforms:

• Navigator 4.0
• Navigator 4.01
• Navigator 4.01a
• Navigator 4.02
• Navigator 4.03

All right, we were a little lax in our old-browser testing.

So, what now?

Kludging the onerror

The good news is that these browsers do support image events if the handlers are in the IMG tag! It's just the dynamic Image object that they have problems with.

Remember the NSpre403 variable we defined in the beginning of this article? Well, this is where we put it to use.

In FDRinit(), where we load the image into the elGif layer, we now create the HTML string in this way:

if (!FDRjustFlip) {
  elGif = new Layer(contWidth,elCont); 
  imStr = "<IMG SRC='" + FDRgifSrc +"' WIDTH="
        + Math.max(FDRfadeImg.width,(FDRboxWid - (FDRborWid*2)));
  imStr += (NSpre403) ? " onError='window.FDRjustFlip=true'>" : ">";
  with (elGif) {
    document.write(imStr);
    document.close();
    moveAbove(elNews);
  }
  .
  .
  .
}

Assuming that a WIDTH value of 150 is applied to the IMG, post-Version 4.03 browsers will create this string, as before:

<IMG SRC=fade.gif WIDTH=150>

Version 4.03 and earlier browsers will create this string:

<IMG SRC=fade.gif WIDTH=150 onError='window.FDRjustFlip=true'>

For these browsers, any image error will cause the statement window.FDRjustFlip=true to be executed, switching the Fader behavior to flipping.

---

Note:
Since, for these older browsers, the image is not preloaded, the fade effect may begin while the image is still loading. A switch to flipping will occur at the first display change after the onError handler has fired.

---

Kludging the onload

As mentioned above, these browsers do not handle the Image object onload handler either. So a second call to FDRcountLoads() never occurs, so the Fader doesn't initialize. The best thing to do is to direct old browsers to initialize the fader upon page load only. The NS Image object code, is changed to:

if (NS4) {
    if(FDRjustFlip || NSpre403) {
        totalLoads = 1;
    }
    else {
        totalLoads = 2;
        FDRfadeImg = new Image();
        FDRfadeImg.onload = FDRcountLoads;
        FDRfadeImg.onerror = FDRcountLoads;
        FDRfadeImg.src = FDRgifSrc;
    }
}

We still have one problem. In FDRinit(), when calculating the image WIDTH, we refer to the image object (FDRfadeImg), which we had assumed was loaded, and compare its width (FDRfadeImg.width) to the Fader width:

if (!FDRjustFlip) {
  elGif = new Layer(contWidth,elCont); 
  imStr = "<IMG SRC='" + FDRgifSrc +"' WIDTH="
        + Math.max(FDRfadeImg.width,(FDRboxWid - (FDRborWid*2)));
  .
  .
  .
}

Instead of confusing the string creation with conditionals, it is much easier to create a dummy FDRfadeImg object and give it a usuable width property that the above statement can use:

if (NS4) {
    if(FDRjustFlip || NSpre403) {
        totalLoads = 1;
        FDRfadeImg = new Object();
        FDRfadeImg.width = FDRboxWid - (FDRborWid*2);
    }
    else {
        totalLoads = 2;
        FDRfadeImg = new Image();
        FDRfadeImg.onload = FDRcountLoads;
        FDRfadeImg.onerror = FDRcountLoads;
        FDRfadeImg.src = FDRgifSrc;
    }
}

Time to give Navigator a rest. On the next page, back to quirky Explorer for the Macintosh.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Nov 30, 1999
Revised: Nov 30, 1999

URL: https://www.webreference.com/dhtml/column27/fade3ns403.html