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";




    <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">




    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.