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.


<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"> 

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.


<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.

<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
Your Rating

Sriram Narasimhan


Nice tutorials

Post Comment This is for short comments only. Use the forum for more discussions.

HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 All rights reserved worldwide Privacy Policy Disclaimer