क्लाइंट-साइड इमेज मैप बनाने के लिए JavaScript का उपयोग करें। क्लाइंट-साइड इमेज मैप्स टैग के लिए यूज़मैप एट्रिब्यूट द्वारा सक्षम होते हैं और विशेष <मैप> और <एरिया> एक्सटेंशन टैग द्वारा परिभाषित होते हैं।
नक्शा बनाने वाली छवि को तत्व का सामान्य रूप से उपयोग करके पृष्ठ में डाला जाता है, सिवाय इसके कि इसमें usemap नामक एक अतिरिक्त विशेषता होती है। . यूज़मैप विशेषता का मान
उदाहरण
क्लाइंट-साइड इमेज मैप बनाने के लिए आप निम्न कोड को चलाने का प्रयास कर सकते हैं -
<html>
<head>
<title>Using JavaScript Image Map</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="/images/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="/perl/index.htm" alt="Perl Tutorial"
target="_self"
onMouseOver="showTutorial('perl')"
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>