Login

Save Password - Forgot Pass? 		Not a member?
Become a DC
member now!



         Scripting for 5th Generation Browsers - Part 1
  • Introduction
  • Code Reduction
  • What Is A Standard Anyway?
  • Retrieving Elements
  • Rollover Fun with setAttribute()
  • Four State DOM Rollovers with a Single Image
  • Netscape Rollover Fix
      Rate this tutorial:
    This tutorial have been read 31753 times.

    Print-friendly version

    		•

    Scripting for 5th Generation Browsers - Part 1
    Written 07/14/2001 by Eddie Traversa. Last updated 07/14/2001.


    Four State DOM Rollovers with a Single Image

    Remember, that earlier I stated that the setAttribute() method allows for the setting of any attribute such as width and height? Well lets use these attributes to create a four state rollover with just a few lines of code and a single image. First the image tag: 

    <img src="button_eddie.png" id="Image1" border="0" width="25" height="25">
    As noted previously, what is important in the above tag is to set a unique id for the image so that we can later retrieve the image element via the document.getElementById() method. The rollover script we employ to put this into action is as follows: 
    <script language="JavaScript" type="text/javascript">
function rollOvers(id, new_width, new_height) {
  document.getElementById(id).setAttribute('width', new_width);
  document.getElementById(id).setAttribute('height', new_height);
 }
</script>
    In this example, we utilize three arguments, id, new_width and new_height. The id argument is used to retrieve the unique id of the image, in this instance image1, and the new_width and new_height arguments will be used from the event handler to set new image dimensions. 
    <a href="#" onClick=="rollOvers('Image1','28','28')" 
onMouseOver="rollOvers('Image1','26','26')" 
onMouseOut="rollOvers('Image1','24','24') ">
    View example

    Let's consider what is occurring here for a moment. We have made four image dimensions from a single image. Effectively, we have produced a four state disjointed rollover. The four states are:

    1. The initial dimensions of 25*25.
    2. The onMouseOver dimensions of 26*26.
    3. The onMouseOut dimensions of 24*24.
    4. The onClick dimensions of 28*28.

    « Rollover Fun with setAttribute()Netscape Rollover Fix »

    Copyright ©2000-2002 DHTMLCentral.com, Bratta Communications. All rights reserved.