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 :
It will help you...