Sample

 

Round, Small, 4-state Rollover Buttons

 

(These create the "jump-out" effect - the MouseOver button moves up and out)

right-click to download - edit hue to make more sets

           

 

MouseOut and MouseDown

MouseOver and MouseUp

 

JAVA for Mouse Actions on these Images

 

To use both images of each set - with mouse-over JAVA there are 2, 3 or even 4 states.  The 4 possible states are :

 

  • MouseOut (Normal)

  • MouseOver

  • MouseDown (click)

  • MouseUp (release)

    • I provided MouseOut and MouseOver.  For the other two states, use the existing images as follows:

     

    MouseDown = MouseOut

    MouseUp = MouseOver

     

    There is no need for 4 separate images  !! 

     

     

    The Preload Images and Rollover Code

     

    NOTE:  the two images I used are "1n (1 Normal - which is the MouseOut) and 1o (1 Over - which is the MouseOver)

    *** the first section (the script) goes after <HEAD>  and the 2nd section (the code) goes after <Body>

     

    <!--- Preload the Rollover Images --->

    <SCRIPT LANGUAGE="JavaScript1.1">

    img1 = new Image();

    img1.src = "../image-files/round-sm/1n.gif";

    img2 = new Image();

    img2.src = "../image-files/round-sm/1o.gif";

    </SCRIPT>

     

     

    <Body bgcolor="#FFCC99">

    <p align="center">

    <A HREF = "#"

    onMouseOut = "document.images[0].src = '../image-files/round-sm/1n.gif';"

    onMouseOver = "document.images[0].src = '../image-files/round-sm/1o.gif';"

    onMouseDown = "document.images[0].src = '../image-files/round-sm/1n.gif';"

    onMouseUp = "document.images[0].src = '../image-files/round-sm/1o.gif';">

    <img border=0 src="../image-files/round-sm/1n.gif" align="center" width="50" height="50">

    </A>

     

     

    NOTE1:  you need the single quotes or it won't work !!  For example:   '../image-files/round-sm/1n.gif'

    NOTE2:  to add more rollovers, make sure to increment the document.images index value with the brackets - the images must be in order -  [0], then [1], then [2], etc.