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.
<!DOCTYPE HTML> <html> <body> <img src="http://www.studentsempire.com/images/androidbook.png" alt="Triathlon Image" width="200" height="67" /> </body> </html>
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.
!DOCTYPE HTML> <html> <body> <p> <a href="http://studentsempire.com/"> <img ismap src="http://www.studentsempire.com/images/androidbook.png"/> </a> </p> </body> </html>
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.
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.
shape and coords attributes work together. The coords attribute depends on the value of the shape attribute.
This value represents a rectangular area
The coords attribute must consist of four comma-separated integers representing the distance from the following:
This value represents a circular area
The coords attribute must consist of three comma-separated integers representing the following:
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.
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 usemap attribute on the img element associates the map element with the image.
<!DOCTYPE HTML> <html> <body> <p> <img src="http://www.studentsempire.com/images/androidbook.png" usemap="#mymap"/> </p> <map name="mymap"> <area href="#" shape="rect" coords="3,5,68,62" alt="test a" /> <area href="#" shape="rect" coords="70,5,130,62" alt="test b" /> <area href="#" shape="default" alt="test c" /> </map> </body> </html>