Subscribe to
the Possibilities Ezine

Subscription Terms of Service
Privacy Policy

RSS feed links

Blog Article Categories

Automation

CGI

Content Protection

CSS

Debugging

HTML

JavaScript

Perl

PHP

Recommendations

Related Sites

Statistics

Web Development

Web Site Maintenance

Misc

Simulating a Form Submit Button

By Will Bontrager

Form submit buttons are limited in design choices. For example, suppose you want to put a smiley on the button that changes expression when it's clicked.

And sometimes an actual submit button is not the most elegant implementation, even when an available button design is appropriate.

Here is how to simulate a submit button within an <A... link tag.

You'll need two images. One image will display when the page loads. The other will display when the image link is clicked on. For code example purposes, let's call the two images original.jpg and alternate.jpg, respectively.

The example code below contains a block of JavaScript to preload the alternate.jpg image. And it contains an HTML image link.

<script type="text/javascript" language="JavaScript"><!-- imagetagname = new Image(); imagetagname.src = 'http://example.com/alternate.jpg'; --></script> <a href="/" onmousedown="imagetagname.src='http://example.com/alternate.jpg'"; onmouseup="imagetagname.src='http://example.com/original.jpg'"; style="text-decoration:none;"> <img name="imagetagname" src="http://example.com/original.jpg" width="150" height="44" border="0" alt="linked button image"> </a>

In the above code, replace
http://example.com/original.jpg
with the URL of your original.jpg image, in two places. Then, also in two places, replace
http://example.com/alternate.jpg
with the URL of your alternate.jpg image.

If you intend to implement more than one instance on a page, replace
imagetagname
with a different name for the image tag, in five places.

Here is an example (not linked to anywhere for easier demonstration of the click image changeover):

The above is used at our Bontrager Connection, LLC central business web site for the "I'm feeling lucky, send me to a popular page!" feature.

July 16, 2006

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

© 1998-2001 William and Mari Bontrager
© 2001-2008 Bontrager Connection, LLC