HTML tweak: Use Image as submit button with rollover effect

We sometime need to submit form in our websites. To perform submit there is a HTML element name submit button. But what if we want to use image as a submit button? This can be done very easily. Let us see how it is done -

What we need :

1. Image which will be acting as the submit button.
2. Slightly modified Image of the first one to show some rollover effect.
3. HTML codes and some JS code.

To use an image as a submit button we need the html tag <input> but the type property of the input tag will be image instead of submit. That way we can add an image as a button.

<input type="image" src="subscribe.png" />

This HTML code uses the subscribe.png as the submit button.
Now we will add some simple rollover effect.

<input type="image" src="subscribe.png" onmouseover="this.src='sub_top.png'" onmouseout="this.src='subscribe.png'"/>

 We are using small javascript code to change the image of the button whenever the user put the mouse over the button. This adds a nice rollover effect. We added the onmouseover event and then change the image src property of that element. We have to restore the image whenever the button loses focus. This is done by the onmouseout event.

All done. Here is the screen shot of how it looks.

Here is the total work.
If you have any suggestion or question please leave a comment.