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.

Simple Image Resizing Code ...

Some times you need to quickly resize your image to a different dimension. you may need to resize it to a smaller version (saving bandwidth, computation time etc) or need to scale it to a larger version (displaying).

you can use the following code to resize your image as per your requirement.

LANGUAGE: C#/JAVA. Can also be easily convert to C++ and other languages.


public static int[] rescaleRGBArray(int[] rgb, int oldWidth, int oldHeight, int newWidth, int newHeight) {
    int out[] = new int[newWidth*newHeight];
    for (int yy = 0; yy < newHeight; yy++) {
    int dy = yy * oldHeight / newHeight;
    for (int xx = 0; xx < newWidth; xx++) {
    int dx = xx * oldWidth / newWidth;
    out[(newWidth*yy)+xx]=rgb[(oldWidth*dy)+dx];
    }
    }
   return out; 
}

Hope this help you in your work.