(right-click to download)
JPG with White Backgrounds
|GIF with Transparent Backgrounds|
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 :
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 --->
img1 = new Image();
img1.src = "../image-files/round-sm/1n.gif";
img2 = new Image();
img2.src = "../image-files/round-sm/1o.gif";
<A HREF = "#"
onMouseOut = "document.images.src = '../image-files/round-sm/1n.gif';"
onMouseOver = "document.images.src = '../image-files/round-sm/1o.gif';"
onMouseDown = "document.images.src = '../image-files/round-sm/1n.gif';"
onMouseUp = "document.images.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 - , then , then , etc.