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 event handlers for the image link (the only area where different code is needed for Netscape and IE): 
if (document.layers) document.t1.visibility = 'visible';
if (document.all) document.all.t1.style.visibility = 'visible';
if (document.getElementById) document.getElementById('t1').style.visibility = 'visible';"
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.  

Flanagan notes that in Netscape, any element that is absolutely positioned is spaced in a separate layer from the rest of the document.  Any layer that is given a name with the ID attribute can be accessed by name.  For example, if a layer specifies ID="L2", you can refer to it in Navigator as document.L2 or as document.layers["L2"].  This is why the Netscape 4.x code above does not refer to tags, as in document.tags.t1.visibility.  Instead the visibility of the layer is being controlled.  

Revised: March 4, 2002; Comments to William Pegram, wpegram@erols.com