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.<\/p>\n
A search on Google initially made this look like it was going to be rather complex… Well, not complex, but unnecessarily lengthy:<\/p>\n
http:\/\/www.idocs.com\/tags\/forms\/index_famsupp_107.html<\/a><\/p>\n Look at the state of that! Lines of code running all over the over the place!<\/p>\n But then I found this thread<\/a>, with the following lovely bit of code:<\/p>\n [input type=”image” value=”someValue” src=”yourImage.gif” width=”widthInPixels” height=”heightInPixels” onmouseover=”javascript:this.src=’yourImageRollover.gif’;” onmouseout=”javascript:this.src=’yourImage.gif’;”\/]<\/p>\n [replace the square brackets with angle brackets]<\/p>\n I customised it a bit so that it would submit my form and to give it some more user-friendly tags:<\/p>\n [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!” \/]<\/p>\n [replace the square brackets with angle brackets]<\/p>\n 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.<\/p>\n 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.<\/p>\n","protected":false},"excerpt":{"rendered":" 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 … Continue reading A bit of code… Simple form rollover submit<\/span>