---

Search posts under HTML5:

---

Image map in HTML5

How to set the image map using HTML5

Image map 

It is used to client side mapping which is used as the clickable events of the image in the given coodinates with the given reference to open the values

 <h2 style=" color:blue"><i>Image mapping is used to define the client imagemap which is used to map the image with the <span style="color:red">clickable areas</span> in the given coodinates</i> </h2>
    <img src="images/KidsFundaLoga.png"  width="200" height="100" alt="kids" usemap="#Kids"/>
    <map name="Kids">
        <area shape="rect" coords="0,0,82,116" alt="Kids" href="http://www.dotnetfunda.com" />
        <area shape="circle" coords="90,58,3" alt="Funda" href="http://www.techfunda.com">
    </map>

• In the above code snippet we have defined the image mapping, we are having the  image source as KidFunda  with the width and height values in the image, we have given the name as usemap as #KidsFunda
• In the nextline we are having the map element whare we have given the Kidsfunda id to the map element 
•   In the nextline we have given the area shape as circle, rectangle with the given coodinates and   alt as Kids and Funda ,the reference which we have given in the link of techfunda and dotnetfunda  
• If we click on the image of the given coodinate values, it opens the web page which it belongs to the value reference webpage  

output