button0.gif (off)
button1.gif (on)
Re-creating buttons is pretty easy. There's no real coding that goes behind an image button, you just put a hyperlink around an image and there you go. This is not really an object oriented lesson but I stuck it here to go along with the Radio and Checkbox lessons. But remember in the 4.0 browsers you have the onMouseDown and onMouseUp events at your disposal - so why not use them to make your buttons more interesting?
What I've done is created 2 images for the state of my button:
button0.gif (off)
button1.gif (on)
And I have to preload both images so that I can swap them:
function preload(imgObj,imgSrc) {
eval(imgObj+' = new Image()')
eval(imgObj+'.src = "'+imgSrc+'"')
}
preload('button0','button0.gif')
preload('button1','button1.gif')
Then I have a layer which displays the "off" button in a layer called "surveyDiv", and the onMouseDown, onMouseUp, and onMouseOut events to change the image accordingly, and the submitForm() will be a function that retrieves and outputs the data from my "virtual" form.
<DIV ID="surveyDiv">
<P><A HREF="javascript:submitForm()"
onMouseDown="changeImage('surveyDiv','submitImg','button1')"
onMouseUp="changeImage('surveyDiv','submitImg','button0')"
onMouseOut="changeImage('surveyDiv','submitImg','button0')">
<IMG NAME="submitImg" SRC="button0.gif" WIDTH=68 HEIGHT=20 ALT="Submit" BORDER=0></A>
</DIV>
The onMouseOut is to correct the same problem as seen in the Mouse-Click Animation lesson
I am using my changeImage() function to swap the images so that function must also be in there.
View buttons1.html for a button example.
| Home | Next Lesson: Radio Buttons |