spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dhtml / column1
Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

Logo

TheRollover-Click Effect:
SPECIAL EDITION; the director's cut

We've tightened up the code by introducing variables in the functions, and put all the component parts in the correct order that they should appear in the document.




<HEAD>
.
.
.
<SCRIPT LANGUAGE="JavaScript">
<!--

    ver4 = (document.layers || document.all) ? 1 : 0;

    if (document.images) {
        arImageSrc = new Array (
            "imButdown.gif",
            "imButup.gif",
            "imButthis.jpg",
            .
            .
            .
            "../images/imButthat.jpg" )

        arImageList = new Array ();
        for (counter in arImageSrc) {
            arImageList[counter] = new Image();
            arImageList[counter].src = arImageSrc[counter];
        }
    };

    function rollOver(imName,over) {
        if (!document.images) {return};
        whichIm = document.images[imName];
        if (over) { whichIm.src = imName + "over.gif" }
             else { whichIm.src = imName + "up.gif" };
    }

    function rollClick(imName) {
        if (!document.images || ver4) {return};
        whichIm = document.images[imName];
        whichIm.src = imName + "down.gif";
        dummy = setTimeout("whichIm.src = \"" + imName + "over.gif\"",100);
    }

    function rollPress(imName,down) {
        whichIm = document.images[imName];
        if (down) { whichIm.src = imName + "down.gif" }
             else { whichIm.src = imName + "over.gif" }
    }

//-->
</SCRIPT>
.
.
.
</HEAD>
<BODY>
.
.
.
<A HREF="yourlinkgoeshere.html"
   onMouseOver = "rollOver('imBut',true)"
    onMouseOut = "rollOver('imBut',false)"
   onMouseDown = "rollPress('imBut',true)"
     onMouseUp = "rollPress('imBut',false)"
       onClick = "rollClick('imBut')">
<IMG NAME="imBut" SRC="imButup.gif" WIDTH=62 HEIGHT=28 BORDER=0></A>

More Event Handlers

After a break, next column, for CSS positioning, we will continue our look at the new scripting event handlers, for it is mostly response to events that makes the new HTML Dynamic.



Produced by Peter Belesis and

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

All Rights Reserved. Legal Notices.
Created: 07/23/97
Revised: 09/28/97

URL: http://www.webreference.com/dhtml/column1/allcode.html