Inside Technique : Rollovers 101 : 3rd Generation Rollovers

The 4.0 browsers added a new generation of rollover effects. Internet Explorer 4.0 leads the way with almost unlimited rollover flexibility. With Internet Explorer, you can change the appearance of contents of any element in response to the mouse going over almost anything on the page. In addition, IE 4.0 simplifies anchor rollovers by allowing them to be defined using CSS. With Internet Explorer 4.0, if you hover over the page list in the left column you will notice that the color updates. This is specified with a CSS style sheet. Using the CSS hover psuedo-class, you can change all aspects of the style. For example the following CSS rule would make anchors change to bold, navy text with a yellow background when the mouse moves over them:

<STYLE>
  A:hover {color: navy; 
                    font-weight: bolder; 
                    background: yellow}
</STYLE>

<A HREF="/">Move over me!</A>

At the end of this article are links to other articles that show you how to create interesting rollover effects with Internet Explorer 4.0.

Netscape 4.0 Rollovers

In Netscape 4.0, you can use CSS Positioning to add rollover effects to your document. While both Internet Explorer 4.0 and Netscape Navigator 4.0 support CSS Positioning, they use different scripting models to access positioned elements. Once you understand the differences, all effects you can do in Netscape can also be implemented in Internet Explorer. However, the reverse is not always true since Internet Explorer provides a more flexible scripting model.

Below is a simple cross-browser rollover effect that uses CSS Positioning. We wrote detection code that runs the appropriate scripts for the browser when the user hovers over the link:

Introduction
Agenda

<SCRIPT>
var doAll = (document.all!=null)
var doLayer = (document.layers!=null)

var defaultMessage = "Authoring Cross-Browser DHTML!"
 
function writeElement(id, contents) {
 var pEl = getCSSPElement(id)
 if (pEl!=null)
  if (doAll)
   pEl.innerHTML = contents
  else {
   pEl.document.open()
   pEl.document.write("<SPAN class=reset>"+contents+"</SPAN>") 
   pEl.document.close()
  }
}

function writeBadElement(id, contents) {
 var pEl = getCSSPElement(id)
 if (pEl!=null)
  if (doAll)
   pEl.innerHTML = contents
  else {
   pEl.document.open()
   pEl.document.write(contents) 
   pEl.document.close()
  }
}

function getCSSPElement(id) {
 if (doAll) 
  return document.all[id]
 else
  return document.layers[id]
}

</SCRIPT>

<P>
<A HREF="intro.htm" 
     ONMOUSEOVER="writeElement('go','Introduction to this talk')" 
     ONMOUSEOUT="writeElement('go',defaultMessage)">
  Introduction
</A>
<SPAN ID=go STYLE="position: absolute; left: 210">
<SCRIPT>
// Output default message      
document.write(defaultMessage)    
</SCRIPT>
</SPAN>
<BR>
<A HREF="agenda.htm" 
      ONMOUSEOVER="writeElement('go','The Agenda for todays talk')" 
      ONMOUSEOUT="writeElement('go',defaultMessage)">
  Agenda  
</A>

With the introduction of Internet Explorer 4.0, rollover effects are now limited by the flexibility of CSS. Therefore, all future rollover improvements will mostly focus on simplifying their use. Next, we explain how rollover effects are evolving in Internet Explorer 5.0 and provide links to related articles from around InsideDHTML.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.