The button images are all clones of the last pair of
up and down button images. Their captions have been placed on them
with the text tool in Paint Shop Pro. To change the color of the
images, use Photo Shop's tint tool to tint them the color you
want.
I've used LView Pro to set the background color of the button
images to their original gray so the background shows through them.
When you do this and save the file as a .gif file, the color set as
the background color will not show when the image is viewed in a web
page.
The buttons images all get loaded into an array by the script in
the page, so they are pre-loaded and ready to use when the user puts
their mouse over them.
Make sure you move the text over and down in the direction of the
button's depression when you put the text on your down button image,
it makes the illusion complete. If you're using Paint Shop Pro to
insert the text you will have a co-ordinate readout at the bottom of
it's window to help guide you in placing the text on your buttons.
Each button above is in an anchor reference, so you can link them
to pages, or use them as a mailto button on your page.
To download this page as a zip file with a sample set of blank
buttons, click the blank button in the button panel above.
Each call to swap a button image is prefaced with a setTimeOut
command. You can change the responsiveness of the buttons by
changing the value of the setTimeOuts to longer or shorter delays.
Here is the script for this example file and following it are the
image and anchor references used to load the buttons.:
<script>
pics = new Array()
<preload images into
array>
pics[0] = new Image()
pics[0].src = "../Images/GlobalHomeUp.gif"
pics[1] = new Image()
pics[1].src =
"../Images/GlobalHomeDown.gif"
pics[2] = new
Image()
pics[2].src = "../Images/DosTipsUp.gif"
pics[3] = new Image()
pics[3].src =
"../Images/DosTipsDown.gif"
pics[4] = new Image()
pics[4].src = "../Images/BLANKUP.gif"
pics[5] =
new Image()
pics[5].src =
"../Images/BLANKDOWN.gif"
<each button requires a pair of
functions, one for up, and one for down>
function buttononeup(){
setTimeout("document.buttonone.src=pics[0].src",150);
document.buttonone.src=pics[0].src
}
function buttononedown(){
setTimeout("document.buttonone.src=pics[1].src",150);
document.buttonone.scr = pics[1].src;
}
function buttontwoup(){
setTimeout("document.buttontwo.src=pics[2].src",150);
document.buttontwo.src=pics[2].src
}
function buttontwodown(){
setTimeout("document.buttontwo.src=pics[3].src",150);
document.buttontwo.scr = pics[3].src;
}
function buttonthreeup(){
setTimeout("document.buttonthree.src=pics[4].src",150);
document.buttonthree.src=pics[4].src
}
function buttonthreedown(){
setTimeout("document.buttonthree.src=pics[5].src",150);
document.buttonthree.src = pics[5].src;
}
</script>
<the calls to the functions go inside
the anchor tag, which encloses the button image.>
<A HREF="http://www.rayslinks.com/GSD/index.html"
onMouseOver="buttononedown();" return true
onMouseOut="buttononeup();" return true>
<IMG
SRC="../Images/GlobalHomeUp.gif" NAME="buttonone" BORDER=0
height=25 width=225 ALIGN=TEXTTOP></a>
<in the image calls, make sure you
set BORDER=0 to keep the buttons from being outlined
with
one of those snazzy
blue link underlines>
<BR><A HREF="buttonpress.zip"
onMouseOver="buttontwodown();" return true
onMouseOut="buttontwoup();" return true>
<IMG
SRC="../Images/DosTipsUp.gif" NAME="buttontwo" BORDER=0
height=25 width=225 ALIGN=TEXTTOP></a>
<BR><A HREF="buttonpress.zip"
onMouseOver="buttonthreedown();" return true
onMouseOut="buttonthreeup();" return true>
<IMG
SRC="../Images/BLANKUP.gif" NAME="buttonthree" BORDER=0
height=25 width=225 ALIGN=TEXTTOP></a>
Note that each image tag must contain the
NAME attribute with a value which will be used by javascript to
refer to the image location when doing image
swaps. | 
