DHTML

Replicating in Netscape the IE Hover Effect

Here is some code I developed that replicates, to a limited degree, the IE Hover effect in Netscape. In this particular example, I am changing the background color for the link.

<!-- br is set equal to "n4" if using Netscape Navigator 4 or higher, ie4 if Internet Explorer 4 or higher, and "unk" otherwise.  Note that one uses == to test equality, and that in such expressions, string expressions are set off with single quotes, unlike in assignment operations where double quotes are used.-->

<script language"JavaScript">
<!--
function changeBgColor(elementID,newColor) {document.layers[elementID].document.bgColor=newColor;
}
if ((navigator.appName == 'Microsoft Internet Explorer') && (parseInt(navigator.appVersion) >=4)) br="ie4";
else if ((navigator.appName == 'Netscape') && (parseInt(navigator.appVersion) >=4)) br="n4"; else br="unk";
newcolor="FFFF00";
origcolor="FFFFFF";
//-->

</script>
</head>
<body>
<!--
The highlighting of the links for Netscape 4 (analogous to the Hover for Internet Explorer) can be done using either LAYER or DIV tags, as set forth in examples by Jon Stephens in a July 28, 1999 post on buzz.builder.com. This page uses DIV tags whereas LAYER tags were used for the navigation bar. The advantage of using DIV tags appears to be that one can use relative positioning with the DIV tags where this didn't seem to work with LAYER tags. The defaults for left and top appear to be 0, so one can just leave these off -- so this has the effect of positioning the item where it would otherwise appear.  Each item appears to require a unique DIV tag.-->

<div id="div1" style="position:relative;">
<!-- Target="_top" is added to all links because these are external links.  The title attribute displays as a tooltip in IE, but not Netscape.  changeBgColor is only executed if using Netscape 4 or higher. -->

<a href="http://www.2hb.com/sbaadc/" title="Link"  
  onMouseOver="if (br=='n4') changeBgColor('div1',newcolor);"
  onMouseOut="if (br=='n4') changeBgColor('div1',origcolor);">Home Page</a>

 

Home Page

According to Flanagan, p. 261, the other color properties can only be set before the <BODY> tag is parsed and my attempt to set other color properties  in an event handler (i.e. in the BODY) produced no effect.

Rollover Displaying Text Elsewhere on Page

Niederst (p. 376-378) provides a code sample for multiple rollovers, i.e. where mouseover over an image causes a change in that image and also a change in an image elsewhere on the page. With DHTML, we can produce a change in the text that appears elsewhere in the page.

 

Williams and Tollett picture
Imagemap Picture

The code consists of five parts.

  1. In the stylesheet, specific ID selectors are given absolute positioning and whose visibility is set to hidden, e.g.
      #t1, #t2 {position : absolute; top: 30px; left: 301px; visibility : hidden;}
  2. In the stylesheet, an ID selector is given relative positioning, e.g. #P1 {position:relative}
  3. The texts which are initially hidden by assigning them the ID selectors used in #1 in the stylesheet
      <div ID=t1>Text 1</div>
      <div ID=t2>Text 2</div>
  4. The texts which are hidden are enclosed between <div ID="P1"> </div> tags. 
  5. The event handlers for the image link (the only area where different code is needed for Netscape and IE) 
    onMouseOver="if (br=='n4') document.t1.visibility = 'visible'; 
             if (br=='ie4') document.all.t1.style.visibility = 'visible';" 
onMouseOut="if (br=='n4') document.t1.visibility = 'hidden';
            if (br=='ie4') document.all.t1.style.visibility = 'hidden';"

The use of absolute positioning facilitates two alternate messages to appear in the same space because the same shift parameters can be used for both messages, thereby positioning them on top of each other.  If relative positioning were used, the space left vacant is held blank and it would appear to be more difficult to position two text messages on top of each other.  

In the absence of the P1 ID selector, the absolute positioning of the T1 and T2 information would be relative to the upper left hand corner of the document.  If the positioning in the rest of the document is controlled by normal HTML, use of absolute positioning for one item is likely to be problematic due to the varying monitor resolutions of different users.  However, when the T1 and T2 tags appear within another <div> tag, the absolute positioning of the T1 and T2 tags is relative to the containing <div> tag.  The positioning of the containing <div> tag can be specified as relative, which then avoids the varying monitor resolution issue.

For some reason, the hidden text appears closer to the images in IE than it does in Netscape.

DHTML With FrontPage 2000

FrontPage 2000 enables one to utilize some DHTML effects.  The effects available depend on the event one is keying them to.  For example, when a page loads, one can make the text appear in various ways.

For the click event for text, one can animate the text, change the font, and change the border. One can make text fly off the page -- for example, click the first sentence of this paragraph. The text should fly off to the top right, word by word.

One can also have the font in text respond to events like mouseclicks.  For example, click this paragraph.

One can also have the border respond to such events. For example, click this paragraph.

In all of these cases, the default appears to be to apply the effect to a paragraph.  If one wants it to apply to a different amount of text, one can change the <p> tags in the HTML to <div> or <span>. All of these effects are produced by highlighting the text, then selecting Format, DHTML effects, and then choosing the event. Once the event is chosen, the possible effects available for that event are displayed.  Once the effect is chosen, one may may also have to select settings.

None of the above effects work in Netscape.  In FrontPage, under Tools, Page Options, Compatibility, one can select the browser and version. When this feature is set, only capabilities that are supported by the indicated browser(s) and versions will be displayed.  I changed this feature to IE and Netscape, and then the allowable events were restricted to loading, whereas before mouseclicks and mouseover events were available to key actions to.

Also, some of these effects may mean that what you see on the screen may not correspond to what is printed. For example, in the previous paragraph, I applied an effect where words drop in one line at a time. When I went to print it, the paragraph did not appear -- the missing text was as follows: 

Revised: March 16, 2001; Comments to William Pegram, wpegram@erols.com