Inside Technique : Hover Effects : Creating the Effect

The hover effect in Netscape Navigator is created by hiding the link and replacing it with a new one containing the hover effect. To be able to hide the link, we make the link relatively positioned but do not set any top or left position. By not adding any positionining information, the relative position has no effect on the flow of the document. When the mouse moves over the element, we hide the original link and replace it with a new link containing the hover effect.

The new link is generated as an absolutely positioned layer through script. When the mouse moves over the original link, we get the position of the anchor and position the hover layer over the original link.

Since the original link is essentially a standard HTML link, and the link representing the hover effect is only generated in Navigator 4.0, there are no downlevel issues to deal with. However, there are a few changes you need to make when authoring the link.

First, to relatively position an element you can either use the Netscape proprietary ILAYER element or use the CSS-2 position property set to relative. When we first authored this technique our first approach was to wrap the link in a relatively positioned span (note: Netscape Navigator does not support relatively positioning the link directly):

  <SPAN ID=home STYLE="position: relative">
    <A HREF="/home.asp">Home</A>
  </SPAN>

Unfortunately, we had lots of problems using this standards-based approach to positioning the element. Netscape Navigator would only reliably apply styles to the first relative span in the document. It turns out that the Netscape ILAYER tag, which is essentially equivalent to the CSS position property, works quite reliably for this purpose. So we replaced the SPAN element with ILAYER. Since all browsers ignore tags they don't understand, the ILAYER tag has no effect on browsers other than Netscape Navigator 4.0:

  <ILAYER ID=home>
    <A HREF="/home.asp">Home</A>
  </ILAYER>

The next step is to include our script that controls the hover effect to your document. When the page loads, you need to call the CreateHover function and pass in the ID of the layer and the HTML representing the hover effect. The CreateHover function handles creating the absolutely positioned layer and hooking up the appropriate event handlers:

// Netscape Hover Effects
// Copyright 1998 InsideDHTML.com, LLC. All rights reserved.
// www.insideDHTML.com
// This script can be reused as long as this copyright notice
// is not removed.

var ns4 = (document.layers)

function showHover(ev) {
  this._layer.visibility = "hidden"  
  this._layer._hover.visibility = "show"  
  // Position the layer
  if (ev.type=="mouseover") {
    this._layer._hover.top = this.y
    this._layer._hover.left = this.x
  }
}


function CreateHover(layerID, hoverText) {
  hoverLayer = new Layer(300)
  hoverLayer.document.write(hoverText)
  hoverLayer.document.close()
  hoverLayer.document.links[0]._layer = hoverLayer
  hoverLayer.document.links[0].onmouseout = showHover
  var oLayer = document.layers[layerID]
  hoverLayer._hover = oLayer
  oLayer._hover = hoverLayer
  oLayer.document.links[0]._layer = oLayer
  oLayer.document.links[0].onmouseover = showHover  
}

function DoLoad() {
  // Create the hover effect for Netscape Navigator
  if (ns4) {
    // pass in the ID of the element and the HTML representing the hover effect.
    CreateHover("Home1","<A HREF=\"http://www.insidedhtml.com\"" +
      "STYLE=\"text-decoration: none;color: darkgreen;font-style:italic\">Home Page</A>")
    CreateHover("Home2","<A HREF=\"/writeonce/writeonce.asp\"" + 
      "STYLE=\"text-decoration: none;color: darkgreen;font-style:italic\">Write Once!</A>")
    CreateHover("flow","<A HREF=\"#\""
      "STYLE=\"text-decoration: none;color: darkgreen;font-style:italic\">document's flow.</A>")
  }
}
 
window.onload = DoLoad;

The HTML for the hover effect must duplicate the original link information. Notice that we added a style to the link that makes the links darkgreen italic when the mouse is over them. By customizing each call to CreateHover you can make a different effect for each link.

This technique works very well for links that are a single word. However, multiple word links can cause a problem if they break across more than one line as we can't match the line break for the positioned element. A simple solution is to make sure your links do not break lines by using the <NOBR> tag:

  <ILAYER ID=home">
    <NOBR><A HREF="/home.asp">Go Home</A></NOBR>
  </ILAYER>

The last step is to add the CSS hover effect for Internet Explorer. With the hover effect you can define the hover style using css properties:

<STYLE>
 a:hover {text-decoration: none; font-style: italic; color:darkgreen}
</STYLE>

This would apply the hover effect to all links on the page. To limit the hover effect to specific links, you can add class or id's to each anchor element (you can't apply a style to the ILAYER element in Internet Explorer since Explorer does not support it). For example, to apply a specific hover effect to one link:

<STYLE>
  a#aHome {text-decoration: none; font-style: italic; color:darkgreen}
</STYLE>
<SCRIPT>
function DoLoad() {
  // Create the hover effect for Netscape Navigator
  if (ns4) {
    CreateHover("Home","<A HREF=\"http://www.insidedhtml.com\"" +
      "STYLE=\"text-decoration: none;color: darkgreen;font-style:italic\">Home Page</A>")
  }
}
</SCRIPT>

<ILAYER ID=home">
  <NOBR><A ID=aHome HREF="/home.asp">Go Home</A></NOBR>
</ILAYER>

There is one last issue. If you resize the page in Netscape Navigator the hover effect stops working. This is because of a bug in Netscape's positioning implementation. There is a work-around where you reload the page whenever the page resizes. However, since the the hover effect stops working without any errors and this is just a visual effect, we recommend you do not reload the page on resize.

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