Javascript 如何单击地图区域并在列表上显示数据？_Javascript_Html_Dictionary_Area

Javascript 如何单击地图区域并在列表上显示数据？

javascript html dictionary

Javascript 如何单击地图区域并在列表上显示数据？,javascript,html,dictionary,area,Javascript,Html,Dictionary,Area,我想知道是否有可能显示地图区域的数据。例如，在下面的链接中，如果我单击底部的head区域，它将显示在我在文本中单击head的列表中。我尝试了javascript，但它无法工作这是样品 <doctype! html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Body Assesssment&

我想知道是否有可能显示地图区域的数据。例如，在下面的链接中，如果我单击底部的head区域，它将显示在我在文本中单击head的列表中。我尝试了javascript，但它无法工作

这是样品

<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>


身体评估
#页面内容包装器{
左边距：300px；
}
h1{
左边距：-250px；
}














第二步：请在这些照片上标出你受伤的地方。

谢谢
 我将向以下方向推送您：
从每个区域中删除内联onclick=myFunction（）
代码

在区域中添加您的识别数据。目前，您无法识别哪个是哪个。一种非常简单的方法是将该信息添加到title
属性中

连接Javascript单击映射上的事件处理程序。通过检查e.target
使用事件委派，找出单击了哪个区域

使用title
属性来处理该数据
例如：
var map = document.getElementById("Map");
map.addEventListener("click", function(e) {
    callAction(e.target);
});
function callAction(area) {
    alert(area.title);
}

这里有一把小提琴来证明这一点。尝试单击左侧图像上的头部、颈部和左臂或右臂
小提琴示例：
希望对您有所帮助。
发布相关代码，顺便说一句，您的页面充满了JS错误。我得到了错误未捕获的引用错误：myFunction未定义
，因此您需要创建myFunction函数来处理点击。对于错误，我很抱歉，我忘记了编辑以前尝试创建输出时的域。但我在上面写了正确的代码。