Arrows

(right-click to download)   

           

      JPG with White Backgrounds

GIF with Transparent Backgrounds
Normal

MouseOver

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 :

 

MouseOver

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

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

 

 

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.