Making Tricks with Image Submit Button

Okay, maybe in the beginning most of the web developer has ever wondered how to make an image a submit button of a form. And these functions are found have been used in some of your favorite Content Management System, joomla for example, when you make a save item, whether it's article, or a product in VirtueMart component utilizing backendnya, there seemed an image that has a function as a submit button. There are 2 tricks that are usually used, first use html tags, and the latter using a simple javascript function.

Yes, we try to advance to the first trick ...
Create a file, call up to you, I call it imgbtn.html, then the contents therein:

name="formulir" action="kirim.php"

Name:



Which has its core functions:
line
make an input with type image.

then, kirim.php file, this file is used to capture what has been sent by imgbtn.html, of course, you must have a web server that has been installed in your pc to try it. But at the end of this article the author provides html demo files from this article.

File kirim.php

You can not use features like hover buttons in this first trick, tag input type = 'image' does not allow you to change the image when the mouse over, or when the mouse out. Recommended changes in image / image when mouse over or mouse out obtained by using the next trick.

Then the final trick, this trick before the development of the tricks. If the first trick that allows only a static image, then the second trick you can install this feature as an image change mouseover or mouseout.

Provide a imgtbn2.html file, containing:


name="formulir" action="kirim.php"

Name:



This last trick, using the tag and utilize diembedkan javascript function.
Core statement:
onclick = "return val_form_this_page ()">
when image is clicked then the return value of the filled in form in the document for later action sent to the target, ie kirim.php.
With this trick

and kirim.php file php file that is to capture the variable that is sent.

So, you can use this trick to use in doing your website development. Thank you.
By: Dwiartara Loka.

This tutorial files can be downloaded here:
http://www.ilmuwebsite.com/file_tutorial/trikimagebutton.zip