img
- The <img> HTML element embeds an image into the document.
- "src" attribute: The src attribute contains the file-path or url link of the image.
- "alt" attribute: The alt attribute contain a text, the text will be displayed in the web page if for any reason the image doesn't load. This text is also used for screen seader software to read the text when the image comes.
- "width" attribute: The width attribute value represents what should be the size of the image in the web-page.
-
Example:
Code:<img src="./images/tree.jpg" alt="niko-photos-unsplash" width="300px"> <img src="https://images.unsplash.com/photo-1458966480358-a0ac42de0a7a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image loaded by using 'copy image address' url" width="300px">Output
picture
- The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different screen size.
- The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches.
-
source
- The <source> tag will contain the image source and the condition when to show the image.
- "srcset" attribute will contain the file path of the image (just like "src" attribute in img element)
- "media" attribute will contain the condition. For example: "media="(min-width:1500px)"" , this means when the display width is atleast 1500px or greater, then the image of the source tag will be shown
-
Example:
Code:<p>Shrink the webpage width(on pc) to see the functionality</p> <picture> <source media="(min-width:1500px)" srcset="./images/img1.jpg" > <source media="(min-width:1000px)" srcset="./images/img2.jpg" > <img src="./images/img3.jpg" alt="" width="300px"> </picture>Output:
Shrink the webpage width(on pc) to see the functionality
map
- The <map> tag is used to define an image map. An image map is an image with clickable areas.
- The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
- The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.
- Search on googel of "image map" in visit a site for image mapping (Eg: URL), make the map on a image and copy paste the code.
- An real world application example: tagging friends in a instagram photo, clicking on different part of the photo we can visit different person's profile.
-
Example:
Code:<p>Click (or just move the cursor) on different part of the below image to see the functionality</p> <!-- Image Map Generated by http://www.image-map.net/ --> <img src="turtle.jpg" usemap="#image-map"> <map name="image-map"> <area target="" alt="Sea turtle" title="turtle" href="https://en.wikipedia.org/wiki/Sea_turtle" coords="37,282,51,258,95,242,81,221,111,205,168,158,298,104,391,106,415,123,452,95,491,93,497,136,457,165,479,191,455,258,419,335,424,265,425,226,411,257,365,310,303,347,257,359,318,285,340,244,295,266,238,266,139,252,93,299,65,318,42,308,42,295" shape="poly"> <area target="" alt="Blue sea" title="Sea" href="https://en.wikipedia.org/wiki/Sea" coords="73,214,102,198,150,160,218,122,304,95,383,95,414,109,442,90,480,81,505,90,505,108,509,130,499,149,477,166,489,186,484,213,457,282,421,353,402,354,412,278,382,312,313,356,267,369,236,367,249,345,287,306,309,272,265,282,221,278,149,266,111,296,76,327,33,321,25,286,36,258,60,214,1,2,1,399,639,396,638,1,9,0,-1,28,42,242,81,234" shape="poly"> </map>Output
Click (or just move the cursor) on different part of the below image to see the functionality
