KandZ – Tuts

We like to help…!

HTML 9 – img, map and area elements in HTML

<img src="path/to/image" alt="description of the image" width="600" height="400">
  • The image element is used to add an image into a webpage
  • You can specify the image source with the src attribute
  • The src attribute can take relative or absolute URL
  • alt attribute provides an alternative text for the users who cannot see the image
  • width and height attributes specify the width and the height of the image
<img src="path/to/image" usemap="#image-map">
<map name="image-map">
  <area shape="rect" coords="316,11,603,198" alt="Lesson 5" href="5.htlm">
    <area shape="rect" coords="100,280,230,555" alt="Lesson 6" href="6.htlm">
    <area shape="rect" coords="244,215,608,566" alt="Lesson 7" href="7.htlm">
</map>
  • map is used to create an interactive image map
  • Allows to users to click on specific areas within the image and navigate to different pages
  • usemap attribute in specifies the id of the map that will be used
  • map’s attribute name specifies the id/name of the map
  • map contains one or more area elements which represents a clickable area
  • shape attribute specifies the shape of the area (rect, circle and polygon)
  • cords attribute specifies the coordinates of the area(x1, y1, x2, y2)
  • href attribute specifies the URL for when the user clicks on the area

Leave a Reply