New JavaScript Mouse Events: The Rollover/Click Effect, the full code

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&gt

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

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

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