HTML image tag is used to show images in a webpage. This is a multimedia element HTML allow us using <img>
Syntax
|
1 |
<img src="img location url" alt="alternate text" width="image width" height="image height"/> |
Example
|
1 |
<img src="../../images/nature.jpg" alt="HTML image"/> |
Output
List of HTML image tag attributes
| Sr. No. | image attributes | Description |
|---|---|---|
| 1 | src | Used to get the url location of the image from where we get the image. |
| 2 | alt | Used to show alternative text when the server not able to find the image in the given location. |
| 3 | width | Used to define the width of image. |
| 4 | height | Used define the height of the image. |
HTML image with alt attribute
If you want to insert an image and your image is not located in the given location. You need to show alternate text if the image not found in the given location.
|
1 |
<img src="../../images/nature.jpg" alt="HTML image"/> |
Output
image with width attribute
If you want to give the width to an image you have to use width attribute.
|
1 |
<img src="../../images/nature.jpg" alt="HTML image" width="50"/> |
Output
image with height attribute
If you want to give the height to an image, you have to use width attribute.
|
1 |
<img src="../../images/nature.jpg" alt="HTML image" height="70" width="70"/> |
Output
Use anchor tag with image tag
If you want to open image on image click, you have to use anchor tag.
|
1 |
<a href="../../images/nature.jpg"><img src="../../images/nature.jpg" alt="HTML image"/></a> |
Output
Image Map
An image map is used to give each image area a link to open on click. Each area contains a link and you open the link on clicking that area. HTML area tag using here to give area of map. A mapping can be done by using <map> tag. See HTML map tag for more details.
The name attribute of map tag and the usemap attribute of image tag with map name with # is used to make relationship between image and mapping.
|
1 2 3 4 5 6 |
<img src="../../images/nature.jpg" alt="HTML image" usemap="#mymap"/> <map name="mymap"> <area shape="rect" coords="0,0,82,126" alt="paragraph" href="html-paragraph"> <area shape="circle" coords="90,58,3" alt="paragraph" href="html-paragraph"> <area shape="circle" coords="124,58,8" alt="paragraph" href="html-paragraph"> </map> |
Output
Advertisements
Advertisements