Image Button

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.

Example:

<input type="image" name="imgbtn" src="images/savechanges.jpg"  alt="Tool Tip">

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:

Example with a Web Form

Enter your name and click the button

Code is here

<form method=post action='html_frmimgbtn.php'>
<input type=text name=t1><input type="image" name="imgbtn" src="images/savechanges.jpg"  alt="Tool Tip"> 
</form>

Using Images as Hyperlinks

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.

Example:

<a href="targetpg.htm"><img src="target.gif"></a>

Note:

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.

<a href="targetpg.htm"><img src="target.gif" border="0"></a>

You can click the image below to visit HTML tutorial home page.

Visitors Rating

Number:3
Average:3.67

Your Rating

Sriram Narasimhan	30-05-2014
Nice tutorials