Image buttons have the same effect as a submit button, only difference is instead of a normal submit button we can place an image of our choice.
An Image button can be created as :
<input type="image" name="<Name of the image button >" src="image source" border="border of the image" alt="text">
Attributes of Image Button:
Name: Specifies the name of the object through which it can be referenced. Src: Specifies the image source. i.e, the path of the image that has to be displayed. Border: Specifies the border of the image source. If 0 is given, then no border will be displayed. Alt: Specifies the text that has to be appeared as a tooltip.
This places an image button within the HTML form, which can be referenced by using its name "imgbtn" with a tooltip text "Tool Tip". Tooltip refers to the text that has to be displayed when we place mouse over the image.
The image button will be displayed as below:
Images can also act as hyperlinks just as normal text. Just as text is made as a hotspot so as an image. i.e, by enclosing the <img> tag wtihin the <a> ... </a> tags.
<a href="targetpg.htm"><img src="target.gif"></a>
Here the image acts as a hotspot and navigates to the file targetpg.htm
Just as an underline appears on the text if we enclose text within <a> ... </a> tags, a border will appear for the image that has been placed with in <a> ... </a> tags. You can remove the border by setting the border attribute of <img> tag to 0.