In HTML, images (HTML Images) are specified with the help <img> tag.
The <img> tag is usually empty, it contains only attributes, and it does not have any closing tag.
Most common attributes of <img> tag are
- src : Source attribute specifies URL of the image location.
- alt : It displays the text when the browser fails to load image.
- height and width : You must always specify this attribute as it helps in preventing page flickering.
- align : Used to align the image.Including above we have few more attributes that are supported by <img> tag :
- BORDER : Using this, the width of the border accompanying the image can be specified. It is usually measured in terms of pixels and it’s default value is 0.
- HSPACE/VSPACE : The gaps between text and image can be controlled using this attribute.
- LONGDESC : It usually takes certain URL as argument, where further information related to a given image is stored.
- NAME : This attribute is used to specify the name of the image.
Syntax : <img src=”url” alt=”name” height=”__ px” width=”__ px” align=”left/right/top/middle/bottom” >
Image maps are of two types. They are
- Server side image maps and
- Client side image maps.
In client side image maps the required code is written in a single HTML script. The code directs the browser to load definite web pages on the account of user selecting various regions (generally called as hot spots) on the image maps displayed. These hot spots are nothing but the pixel values, specified as coordinates in the code. The coordinate values are specified by considering various regions of a map in the form of triangles, circles, polygons etc. Here we often use <MAP> and <AREA> tags for creating client side image maps. Always remember that these tags are analogous to anchor <A> tag as both are meant for directing users to different web pages.
As said earlier, <MAP> and <AREA> tags are important tags for creating image maps on the current webpage. Usually <map> just follows the end of <img> tag. It carries only one attribute i.e. “name”, whose value is nothing but the name of the map. On the other hand <AREA> element is used to specify hot spots on the map which acts as hyperlink to redirect the user to various web pages.
Practice the demo of HTML Images Here