HTML Images

Inserting Image in HTML is very simple and it can be done using the <img> tag and Image Map In HTML is possible. If you want to insert any image in HTML then you have to define the path of the image using src attribute of the <img> tag. The syntax is as follows:

<img src=”path of image” width=”width in pixel” height=”height in pixel”>

For example:
<img src=”eit.jpg” width=”100px” height=”100px”>

At eitworld.com you can learn about Image map In HTML and inserting image in html in easy way.

Inserting Image in HTML



  • <img> tag is used to insert image in HTML which is known as the image tag.
  • This is a single tag, not in pair.
  • To mention the image to be used, src attribute is used.
  • The path of the image must be given as the value of src attribute.
  • Image name is always followed by its extension like ".jpg", ".png" etc.

Syntax



<img src="images/path" ...attributes-list/>


Image Tag : The alt attribute



  • (Optional) It defines an alternate text that would be displayed if the image was not loaded.
  • The alt attribute should be introduced in the <img> tag without it webpage is not validate correctly.
  • Example



    <!DOCTYPE html >
    <html>
    <body>
    <img src="images/html_tut.JPG" alt="First Image" />
    <img src="images/sample.jpg" alt="Second Image" />
    </body>
    </html>


  • First Images is present in the path defined in its src attribute. Therefore, the image will be displayed.
  • Second Image is not found in the path defined in its src attribute. Therefore, its alternate text means the value of alt attribute is displayed in output.
To see live output : Visit Try Yourself Editor

Output





Set Width and Height of Image



  • You can set image width and height based on your requirement using width and height attributes.
  • width attribute (Optional) defines the desired width of the image. The image will not be clipped but it will be fitted in the given width.
  • height attribute (Optional) defines the desired height of the image. The image will not be clipped but it will be set in the given height.
  • You can specify width and height of the image in terms of either pixels or percentage of its actual size.
  • Example



    <!DOCTYPE html >
    <html>
    <body>
    <p>Set Width and Height of Image</p>
    <img src="images/html_tut.JPG" alt="HTML Tutorial" width="100px" height="100px" />
    </body>
    </html>


  • Here the image will be displayed with the size of 100px*100px.
To see live output : Visit Try Yourself Editor

Output





Setting The Location of Image



  • If not mentioned the browser search the image in the same folder as the web page.
  • But sometime the image may be present in the sub-folder so we have to refer the folder in the image name:
  • Example



    <!DOCTYPE html >
    <html>
    <body>
    <p>Setting The Location of Image</p>
    <img src="images/images/download.JPG" alt="Test Image" />
    </body>
    </html>


  • In the above example image download.JPG is present in the image subfolder that is why we refer the folder images in the image name as images/download.JPG.
To see live output : Visit Try Yourself Editor

Output





Image as Link



  • You can also use a image as link. See here the example:

Example



<!DOCTYPE html>
<html>
<body>
<p>Click on the given image it will redirect you to our html tutotrial's home page:</p>
<a href="http://www.eitworld.com/Popular_Tutorials/HTML%20Tutorial/
html_tutorial.html">
<img src="images/html_tut.jpg" alt="HTML tutorial"> </a>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output



Setting The Border of The Image



  • You can apply the border arround the image by using border attribute. "border=0" means, there is no border around the image.
  • See the given example:
  • Example



    <!DOCTYPE html >
    <html>
    <body>
    <p>Setting The Border of The Image</p>
    <img src="images/images/download.JPG" alt="Test Image" border="4" />
    </body>
    </html>


  • In the above example border=4 this attribute will draw the boder around the image download.JPG.
To see live output : Visit Try Yourself Editor

Output





Setting The Alignment of The Image



  • You can set the image to the center, right or left by using align attribute. By default image will align at the left side of the page.
  • See the given example:
  • Example



    <!DOCTYPE html >
    <html>
    <body>
    <p>Setting The Border of The Image</p>
    <img src="images/images/download.JPG" alt="Test Image" border="4" align="right" />
    </body>
    </html>


  • In the above example align="right" this attribute will align the image download.JPG at the right side of web page.
To see live output : Visit Try Yourself Editor

Output





Image mapping



  • Image mapping is making some part of the image clickable. By doing this, a single image can be used as multiple links.
  • <map> and <area> tags are used for image mapping.
  • <map> defines an image- map.
  • It must have name attribute, which will be used to link the image with the image- map. Image Element (<img>) uses usemap attribute for linking the image- map.
  • <img src="images/html_tut.JPG" usemap= "#imap1">

    <map name= "imap1">

  • This is how an image- map is linked to an image. The name of the map is given in usemap attribute of <img>.
  • <area> defines the area that would be clickable in the image. It is always enclosed by <map>. It has following attributes-
  • shape= It defines the shape of the clickable area. It may have following values-
    • default= It represents the whole image the clickable area.
    • circle= It represents a circle as the clickable area.
    • poly= It represents a polygonal as the clickable area.
    • rect= It represents a rectangle as the clickable area.
  • coords= (Required) It defines the coordinates of the clickable area. It will have different values for different shapes.
    • For circle- It will have three values in which first two values will be the x and y coordinate of the center of the circle and the third value is the length of its radius. coords= "x,y,radius"

    • For polygonal- It will have the coordinates of its continuous edges. coords= "x1,y1,x2,y2,...,xn,yn"

    • For rectangle- It will have four coordinates. First two will be the x and y coordinates of top- left corner and last two will be of the bottom- right corner. coords= "x1,y1,x2,y2"

    • The coordinates of top- left corner of the frame are 0,0.
  • href= (Required) It defines the address where the clickable part will direct to on clicking.
  • Syntax



    <img src= "address" usemap= "#mapname" />
    <map name= "mapname" >
    <area shape = "rect|circle|poly|default" coords= "x1,y1,..." href= "address" />
    </map>


    Example



    <!DOCTYPE html>
    <html>
    <body>
    <p>Click on the ashok chakar to watch it closer:</p>
    <img src="images/flag.jpg" alt="Indian flag" usemap="#flag">
    <map name="flag">
    <area shape="circle" coords="242,130,10" alt="ashok chakr" href="ashokchkr.jpg">
    </map>
    </body>
    </html>


  • In the above example whenever you click on the ashok chakar in the flag it will show you a closer look of the ashok chakar. To see the output use our try it editor.
To see live output : Visit Try Yourself Editor