How To Use Image Map Using JavaScript?

Nov 16, 2021 . Admin

Hello Friends,

Now let's see example of how to use image map example. We will check how to use image map. This is a short guide on use image map. Let's get started with how to use image map in javascript.

Here i will give you many example how you can use image map javascript.

Example : 1

<html>
    <head>
        <title>How To Use Image Map Using JavaScript? - MyWebtuts.com</title>
    </head>

    <body style = "text-align: center;">
        <h3>How To Use Image Map Using JavaScript? - MyWebtuts.com</h3>
        <form name = "a1">
            <input type = "text" name = "res" size = "25px" style = "font-size: 25px; text-align: center; border: 2px solid darkgray; background-color: lightgray;"/>
        </form>
        <br>
        <img src = "jslogo.png" border = "5" usemap = "#names" height = "200px"/>

        <map name = "names">
            <area shape = "rect" coords = "0, 0, 325, 90" href = "#" onclick = "display('Rectangular Shape')" />

            <area shape = "circle" coords = "150, 140, 60" href = "#" onclick = "display('Circular Shape')" />
        </map>

        <script>
            function display(name) {
                document.a1.res.value = name;
            }
        </script>
    </body>
</html>

Output :

Example : 2

<html>
    <head>
        <title>How To Use Image Map Using JavaScript? - MyWebtuts.com</title>
    </head>

    <body style = "text-align: center;">
        <h3>How To Use Image Map Using JavaScript? - MyWebtuts.com</h3>
        <form name = "a1">
            <input type = "text" name = "res" size = "25px" style = "font-size: 25px;text-align: center;border: 2px solid darkgray; background-color: lightgray;"/>
        </form>
        <br>

        <img src = "itcmp.png" border = "5" usemap = "#a2" height = "300px"/>

        <map name = "a2">
            <area shape = "rect" coords = "0, 0, 325, 90" href = "laravel-logo.png" onclick = "display('Laravel')" />

            <area shape = "circle" coords = "150, 140, 60" href = "jslogo.png" onclick = "display('JavaScript')" />
        </map>
        <script>
            function display(name) {
                document.a1.res.value = name;
            }
        </script>
    </body>
</html>

Output :