I’m in the final stages of putting a new site online, and I decided to put a little polish on some of the buttons. Given that the whole thing is done in PHP and involves lots of forms, I needed a way to make a rollover image that could submit the form for me.

A search on Google initially made this look like it was going to be rather complex… Well, not complex, but unnecessarily lengthy:

http://www.idocs.com/tags/forms/index_famsupp_107.html

Look at the state of that! Lines of code running all over the over the place!

But then I found this thread, with the following lovely bit of code:

[input type=”image” value=”someValue” src=”yourImage.gif” width=”widthInPixels” height=”heightInPixels” onmouseover=”javascript:this.src=’yourImageRollover.gif’;” onmouseout=”javascript:this.src=’yourImage.gif’;”/]

[replace the square brackets with angle brackets]

I customised it a bit so that it would submit my form and to give it some more user-friendly tags:

[input name=”Submit” type=”image” id=”Submit” onmouseover=”javascript:this.src=’siteimages/button-tell-me-down.gif’;” onmouseout=”javascript:this.src=’siteimages/button-tell-me-up.gif’;” value=”Submit” src=”siteimages/button-tell-me-up.gif” alt=”Tell me this clue!” /]

[replace the square brackets with angle brackets]

But otherwise the code is all there. It doesn’t have a pre-load function in it, but for a form-submission button you’d hope that the image file sizes are going to be so tiny that they won’t take a moment to download. I reuse this code a lot on my pages too, so one preload and the whole site looks swanky without the need for piles and piles of Javascript at the top of every page.

I’m a big fan of good coding. When something as simple as and useful as a rollover can be achieved with a line of code then you know that things are working the way they should.