Client Side मे Image Map को बनाने के लिए Javascript का उपयोग करते है. Javascript मे Hotspot Link प्रदान करने के लिए Shape, Rectangle, Circle, Polygon का उपयोग कर सकते है. यदि आप एक Rectangle Image का Map बनाना चाहते है तो आप दो अलग अलग Rules की आवश्यकता होगी.
Javascript मे Image Maps को Define करने के लिये MAP Element का उपयोग करते है. हर Image Maps का एक Unique Name होता है क्योंकि MAP Element मे Name Attribute की आवश्यकता होती है.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Image Map Example</title>
<script type="text/javascript">
<!--
function showTutorial(name){
document.myform.stage.value = name
}
//-->
</script>
</head>
<body>
<form name="myform">
<input type="text" name="stage" size="20" />
</form>
<!-- Create Mappings -->
<img src="usemap.gif" alt="HTML Map" border="0" usemap="#tutorials"/>
<map name="tutorials">
<area shape="poly"
coords="74,0,113,29,98,72,52,72,38,27"
href="/bootstrap/index.htm" alt="Bootstrap Tutorial"
target="_self"
onMouseOver="showTutorial('Bootstrap')"
onMouseOut="showTutorial('')"/>
<area shape="rect"
coords="22,83,126,125"
href="/html/index.htm" alt="HTML Tutorial"
target="_self"
onMouseOver="showTutorial('html')"
onMouseOut="showTutorial('')"/>
<area shape="circle"
coords="73,168,32"
href="/php/index.htm" alt="PHP Tutorial"
target="_self"
onMouseOver="showTutorial('php')"
onMouseOut="showTutorial('')"/>
</map>
</body>
</html>