HTML BASICS PART III

HTML Images

• Use the HTML <img> element to define an image
• Use the HTML src attribute to define the URL of the image
• Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
• Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
• Use the CSS float property to let the image float to the left or to the right

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">

The image will float to the right of the text.</p>

HTML Image Maps 

The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.

• The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

• The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

• Then, add a <map> element.
• The <map> element is used to create an image map, and is linked to the image by using the required name attribute:

<map name="workmap">

• The name attribute must have the same value as the <img>'s usemap attribute .

• Then, add the clickable areas. A clickable area is defined using an <area> element.
• You must define the shape of the clickable area, and you can choose one of these values:

1. rect - defines a rectangular region
2. circle - defines a circular region
3. poly - defines a polygonal region
4. default - defines the entire region

• You must also define some coordinates to be able to place the clickable area onto the image.

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm"> 

Integrating with Javascript

<map name="workmap">

  <area shape="circle" coords="337,300,44" onclick="myFunction()">

</map>

<script>

function myFunction() {

  alert("You clicked the coffee cup!");

}

</script> 

 

Refrence : https://www.w3schools.com/html/html_images_imagemap.asp

Background Image on a HTML element

<div style="background-image: url('img_girl.jpg');">

<style>

body {

  background-image: url('img_girl.jpg');

}

</style>

To avoid the background image from repeating itself, set the background-repeat property to no-repeat

body {

  background-image: url('img_girl.jpg');

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

}