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 |