05 April 2017

How To Use HTML's Map Area with Pure JavaScript

If you're looking for an easier way to create a clickable area/s in the image (or image map), you might consider using the HTML's <map> tag and JavaScript.


<!DOCTYPE html>
        Sample Use of Map Area with JavaScript
        function writeText(txt) {
            document.getElementById("AboutTheLocation").innerHTML = txt;


<map name="targetLocation">
    <area shape="poly" coords="74,261,49,250,80,103,117,113" onmouseover="writeText('My home is located somewhere here.')" onmouseout="writeText('')" />
<map name="targetLocation">
    <area shape="circle" coords="124,58,8" onmouseover="writeText('My office is located somewhere here.')" onmouseout="writeText('')" />

<img src ="vs.png" alt="Visual Studio" usemap="#targetLocation" width="145" height="126" />
<p id="AboutTheLocation"></p>


No comments:

Post a Comment