in this lesson you will learn how to create image in your web page and how to edit it’s size (width and height) also you will learn how to use map html tag with images.

If You Prefer Visual Explain, here is the video:

Image Maps

The <map> tag defines an image-map. An image-map is an image with clickable areas. In the image below, click on the loading circle or the loading rectangle :

Example:

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

<map name="workmap">
    <area shape="circle" target="_blank" coords="150,70,44" alt="circle" href="safhatech.com">
<area shape="rect" target="_blank" coords="50,160,250,190" alt="rectangle" href="www.google.com">
</map>

Result:

The name attribute of the <map> tag 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> tags, that define the clickable areas in the image-map.

This HTML map Tag lesson is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.

Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681