HTML Tutorial - HTML image








The img element allows you to embed an image into an HTML document.

It has local attributes:src, alt, height, width, usemap, ismap.

The border, longdesc, name, align, hspace, and vspace attributes are obsolete in HTML5.

To embed an image, you need to use the src and alt attributes as follows. 

<!DOCTYPE HTML>
<html>
<body>
  <img src="http://www.java2s.com/style/download.png" 
       alt="Triathlon Image" 
       width="200" 
       height="67" />
</body>
</html>

Click to view the demo

The src attribute specifies the URL for the image.

The alt attribute defines the content if the image cannot be displayed.

The width and height attributes set the image size (in pixels).





A common use of the img element is to create an image-based hyperlink in conjunction with the a element.

The following code shows how you can use the img and a elements together. 

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <a href="http://java2s.com/page.html">
       <img ismap src="http://www.java2s.com/style/download.png"/>
    </a><!--  ww w.j  a  va2 s .c  o  m-->
  </p>
</body>
</html>

Click to view the demo

If you apply ismap attribute to the img element, you create a server-side image map, which means that the position you clicked on the image is appended to the URL.

For example, if you clicked 4 pixels from the top and 10 pixels from the left edges of the images, the browser will navigate to the following:

http://java2s.com/page.html?10,4




Client-Side Image Map

You can create a client-side image map: clicking on different regions in an image causes the browser to navigate to different URLs.

The key element for a client-side image map is map with local attributes name.

If the id attribute is used, it must have the same value as the name attribute.

The map element can have one or more area elements.

Each area element marks a region in the image that can be clicked on.

The area element has local attributes:alt, href, target, rel, media, hreflang, type, shape, coords.

The rel, media, and hreflang attributes are new in HTML5. The nohref attribute is now obsolete.

  • href - The URL that the browser should load when the region is clicked on
  • alt - The alternative content. See the corresponding attribute on the img element.
  • target - The browsing content in which the URL should be displayed.
  • rel - Describes the relationship between the current and target documents.
  • media - The media for which the area is valid.
  • hreflang - The language of the target document
  • type - The MIME type of the target document

shape and coords attributes work together. The coords attribute depends on the value of the shape attribute.

  • rect
    This value represents a rectangular area.
    The coords attribute must consist of four comma-separated integers representing the distance from the following:
    • The image left edge the to the rectangle left side
    • The image top edge to the rectangle top side
    • The image left edge to the rectangle right side
    • The image top edge to the rectangle bottom side
  • circle
    This value represents a circular area.
    The coords attribute must consist of three comma-separated integers representing the following:
    • The distance from the image left edge to the circle center
    • The distance from the image top edge of to the circle center
    • The radius of the circle
  • poly
    This value represents a polygon.
    The coords attribute must be at least six comma-separated integers, each pair of which represents a point on the polygon.
  • default
    This value is the default area, which covers the rest of the entire image.
    No coords value is required when using this value for the shape attribute.

The following code shows how to use image map.

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <img src="http://www.java2s.com/style/download.png" usemap="#mymap"/>
  </p><!--from   w  w  w  . j  av  a  2s.  co  m-->
  <map name="mymap">
    <area href="a.html" shape="rect" coords="3,5,68,62" alt="test a" />
    <area href="b.html" shape="rect" coords="70,5,130,62" alt="test b" />
    <area href="c.html" shape="default" alt="test c" />
  </map>
</body>
</html>

Click to view the demo

The usemap attribute on the img element associates the map element with the image.