I wanna know if it's possible to be able to display data from a map area. For example, at the link below if I click the head area, at the bottom,it would display in a list that I've clicked head in text. I've tried the javascript, but it couldn't work.
Here is the sample.
<doctype! html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Body Assesssment</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootdstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/simple-sidebar.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.maphilight.min.js"></script>
<script type="text/javascript"></script>
<style>
#page-content-wrapper{
margin-left:300px;
}
h1{
margin-left:-250px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">View</a>
</li>
<li>
<a href="#">Tutorial</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Log Out</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<div id="page-content-wrapper">
<h1>Step 2: Please mark on these pictures where it is you hurt.</h1>
<img id="themap" src="img/Capture.JPG" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area ref="#" shape="poly" coords="19,317,45,317,50,334,58,365,55,367,46,367,44,379,35,385,22,378,17,345,4,353,3,341" />
<area class="red" alt="" title="" onclick="" href="#" shape="poly" coords="32,224,18,316,47,317,68,224" />
<area class="red" alt="" title="" onclick="" href="#" shape="poly" coords="45,119,37,137,35,223,67,228,61,159,45,119" />
<area class="red" alt="" title="" onclick="" href="#" shape="poly" coords="96,297,136,297,128,318,111,320" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="167,216,198,216,212,314,187,315,177,273,169,250" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="178,109,164,159,168,213,195,213,197,176,191,124,189,115" />
<area id="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="86,557,110,559,112,622,96,632,75,627" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="144,557,145,591,153,619,129,634,114,623,120,557" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="155,453,157,495,145,558,119,558,118,453" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="92,72,107,88,124,88,137,72,137,90,143,95,119,107,90,95,96,88," />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="90,16,114,5,136,16,145,58,135,74,115,87,96,72,84,60" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="45,119,90,97,118,111,145,97,175,110,165,175,62,175" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="62,180,170,173,165,218,162,243,165,265,142,293,95,294,65, 270,70,245,64,219" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="188,318,208,316,217,324,230,347,222,350,212,342,209,376,193, 380,183,375,183,355,174,364,180,338,184,318" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="67,274,119,340,116,452,79,452,78,433,61,363" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="119,340,167,266,176,314,172,359,157,452,154,453,117,453" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="78,453,77,512,87,557,109,558,115,454" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="369,4,351,17,350,44,360,66,396,66,404,45,407,21,387,4" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="361,66,354,93,377,97,401,92,396,68" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="353,92,307,115,325,173,323,249,374,258,420,249,424,171,442,114,403,92,376,100" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="305,116,298,142,294,219,321,225,323,170" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="444,116,453,219,425,227,420,205,430,139" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="293,219,285,239,280,303,301,309,319,246,319,228" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="426,228,455,222,462,249,464,308,446,310,437,281" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="322,250,313,305,335,326,361,332,372,325,385,330,404,329,430,315,429,289,421,253,374,258" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="277,308,260,335,280,372,289,373,303,365,307,332,302,310" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="443,312,466,309,485,330,476,358,460,370,442,359" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="312,306,344,331,363,331,373,327,370,436,331,435,319,376" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="375,325,399,330,430,314,428,368,415,407,414,436,376,435,377,400,374,372" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="333,436,366,440,365,453,371,486,366,515,,365,542,342,543,344,535,334,492" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="377,436,414,437,410,452,413,487,400,543,378,543,376,516,374,487,377,456" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="340,545,341,586,335,613,360,633,371,630,366,570,368,545" />
<area class="red" alt="" title="" onclick="myFunction()" href="#" shape="poly" coords="377,546,390,540,401,543,405,553,403,587,410,614,390,633,374,631,372,610,378,565" />
</map>
</div>
</body>
</html>
http://79.170.44.80/sicuandomain.com/
Thanks!
I will nudge you in the direction:
onclick=myFunction() code from each of the areas.areas. Currently, there is no way you could identify which one is which. One very easy way would be to add that information in the title attribute.click event handler on the map. Use event delegation via checking the e.target to find out which area was clicked.title attribute to do what you want to do with that data.For Example:
var map = document.getElementById("Map");
map.addEventListener("click", function(e) {
callAction(e.target);
});
function callAction(area) {
alert(area.title);
}
Here is a fiddle to demonstrate that. Try clicking on head, neck, and left or right arm on the left image.
Example Fiddle: http://jsfiddle.net/abhitalks/qpmxnv2g/
Hope that helps.