(right-click to download)   


      JPG with White Backgrounds

GIF with Transparent Backgrounds


Normal MouseOver



JAVA for Mouse Actions on these Images


NOTE: see example at the top of Page - mouse mouse over and try clicking


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)

MouseDown (click)

MouseUp (release)

I provided MouseOut and MouseOver.  For the other two states are, simply use MouseOut for MouseDown, and MouseOver for MouseUp.  That way the Arrow symbol will always change each time you go from one state to the other.  There is no need for 4 separate images - that is overkill !!!!  Here is a sample, using JAVA and 4 states as I just described:


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)


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




NOTE:  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.