Students Empire
Learn Something New
Home
About Us Contact Donate

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.


                    <!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).


Image Link


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 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.


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 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>