Mouse Over Highlights and Images

Most web sites contain pull down menus that appear when the mouse hovers over a certain area and disappear when the mouse moves away from the area. Also, menu items appear highlighted when the mouse passes over them and tool tip text sometimes appears. All this is possible because of a 'mouseover' event in the HTML DOM that is activated when the mouse hovers within the boundaries of an element and a 'mouseout' element that is triggered when the mouse leaves the boundaries of the element. Move your mouse over the top right navigation on the Florist Home Page. The item the mouse is directly over at any given time will appear highlighted and a thumb nail picture of an orchid will appear next to it.

Screenshot 6b: Mouseover Effects on Florist.html

Before we see how this is done, let us learn a few things about the <Div> tag. The div tag may contain any information at all (tables, links, paragraphs, images and so on). Enclosing an object in a <div> is just a way of distinguishing it from other objects. Every div on a page should have a unique value for its ID attribute. The ID attribute may be used to access the div it refers to through the HTML DOM. Another important feature of the div element is absolute positioning. HTML elements are often positioned relatively; that is, relative to the way other elements are marked up on the page. Relative positioning is the default mode. The div element, however, is often positioned absolutely on the page. That is, its style entry contains a left and a top entry in pixels - these indicate the position of the div from the top and left hand side of the user's screen. Absolute positioning provides the web developer flexibility at the cost of a uniform display across varying screen resolutions. Websites using absolute positioning often work best on a particular screen resolution. Our site, for example, looks best on scrrens with 800 by 600 resolution.

To add our mouseover effects, the table that held our the navigation links in the skeleton page was replaced with the following div tags.

<div id="picturediv"  style="position:absolute;top:10;left:640;visibility:hidden">
<img src='images\orchidthumb.png' width=31 height=27 alt='flower'></div>

<div id="homediv" onmouseover="highlightDiv(true,this)"
onmouseout="highlightDiv(false,this)" class=navdiv style="top:10">
<A  class=button HREF="florist.html">Home</A></div>

<div id="cataloguediv" onmouseover="highlightDiv(true,this)" 
onmouseout="highlightDiv(false,this)"  class=navdiv style="top:33">
<A class=button HREF="catalogue.htm">Catalogue</A></div>

<div id="registerdiv" onmouseover="highlightDiv(true,this)" 
onmouseout="highlightDiv(false,this)"  class=navdiv style="top:56">
<A class=button HREF="register.htm">Register</A></div>

The homediv, cataloguediv, and registerdiv elements contain links that help us navigate to the implied pages. While the 'top' style element is specified separately for each div, each div also follows the style definitions pertaining to 'navdiv' in the Style Sheet. The element named 'picturediv' contains the thumbnail and has its visibility set to hidden. The three divs that contain links also call a function called highlightDiv that takes a boolean or true/false argument and a reference to the calling div object ("this") as input parameters. This function is called on both the mouse over and mouse out events. The onmouseover and onmouseout events are triggered when the mouse hovers over the element and when the mouse leaves the element respectively. Let us look at the highlightDiv function.

function highlightDiv(mouseOn, linkDiv) 
{
  if (!isDHTML) return;

  var imageDiv = new getDivObject("picturediv");

  if (mouseOn)
  {
   imageDiv.style.top = linkDiv.style.top;
 imageDiv.style.visibility = "visible";
 linkDiv.style.backgroundColor = '#E4BBC9';  
 linkDiv.style.borderStyle = 'inset';
  }
  else
  {
    imageDiv.style.visibility = "hidden";
 linkDiv.style.backgroundColor = '#D6E4C9';  
 linkDiv.style.borderStyle = 'outset';
   }
}

• Let us deal with the if loop first. The mouseon parameter is set to true when the function is called on mouseover and set to false when the function is called on the mouse leaving the element. 'linkDiv' is a reference to the div that the function was called from. For example, if the function was called as a result of the mouse hovering over 'home', linkDiv would contain a reference to the 'homediv' element.
• imageDiv contains a reference to the div that contains the orchid picture thumbnail.
• When mouseon is 'true', i.e., on mouseover, we align the div containing the image with the div that the mouse is hovering over by setting the 'top' attribute o0f one equal to that of the other. We also make the image visible. Next, we change the background color and border style of the div the mouse is hovering over to give a highlighted effect.
• If the function was called as a result of the mouse moving out of a div, we carry out the reverse operations. We make the thumbnail image invisible, reset the background color and border style.

We acquired a reference to the div that the mouse was hovering on when the function was called using the 'this' keyword. How did we acquire a way to modify the div that contains the image? Also, what did the initial "if (!isDHTML) return;" directive mean?

  var isDHTML = (document.getElementById || document.all || document.layers);

The above line of code actually checks to see if the Internet browser uses a DOM version that allows DHTML simulation. While IE offers the 'document.all' hierarchy to access divs using their IDs, other browsers use 'document.layers' and 'document.getElementById'. If none of these hierarchies return 'true' (the || operator stands for 'or') we know that the user has an old version of a browser. We set the isDHTML variable to false and refrain from running DHTML simulation oriented scripts on such non-compatible browsers by means of the directive "if (!isDHTML) return;" at the start of all DHTML functions.

  var imageDiv = new getDivObject("picturediv");

The above line of code gets a reference to the div that contains the thumbnail by passing its id to the getDivObject function. Once again, we try to accommodate for different browsers by using the following function to acquire a reference to the div and its style definitions. Th getDivObject function is an attempt to give our DHTML code cross browser compatibility.

function getDivObject(name)
{
 if (document.getElementById)
 {
  this.object = document.getElementById(name);
  this.style = document.getElementById(name).style;
 }
 else if (document.all)
 {
  this.object = document.all[name];
  this.style = document.all[name].style;
 }
 else if (document.layers)
 {
     this.object = document.layers[name];
     this.style = document.layers[name];
 }
}