如何使文字显示在Image Map区域的单独div onClick中？

Question

因此，我有一个图像贴图，并且试图使图像贴图的各部分可单击，以便单击该区域时，文本将在单独的div中显示在图像的侧面。

我现在所拥有的只是图像地图：

<div id="aside">     
<img src="{{ 'image.jpg' | asset_url }}" alt="" usemap="#map" />
<map name="Map" id="Map">
<area alt="" title="" href="#" shape="rect" coords="33,110,395,217" /></a>
<area alt="" title="" href="#" shape="rect" coords="35,222,395,321" /></a>
<area alt="" title="" href="#" shape="rect" coords="34,325,395,397" /></a>
<area alt="" title="" href="#" shape="rect" coords="34,401,395,565" /></a>
<area alt="" title="" href="#" shape="rect" coords="33,571,399,628" /></a>
<area alt="" title="" href="#" shape="rect" coords="33,632,394,775" /></a>
<area alt="" title="" href="#" shape="rect" coords="409,127,584,275" /></a>
<area alt="" title="" href="#" shape="rect" coords="410,281,586,337" /></a>

我发现此脚本可以满足我的要求：

 function changeText(value) {
 var div = document.getElementById("div");
 var text = "";

if (value == 1) text += "a";
if (value == 2) text += "b";
if (value == 3) text += "c";
if (value == 4) text += "d";
if (value == 5) text += "e";
if (value == 6) text += "f";
if (value == 7) text += "g";

div.innerHTML = text;}

它带有以下代码：

<a href="javascript: changeText(1);">
<img src="abc.jpg" alt="abc" />
</a>
<a href="javascript: changeText(2);">
<img src="abc.jpg" alt="abc" />
</a>
<a href="javascript: changeText(3);">
<img src="abc.jpg" alt="abc" />
</a>

 <div class="section" id="div"></div>

该脚本有效，但我尝试将其集成到图像映射中，但不起作用。 请帮忙！ 我该怎么做呢？

Answer 1

我做了一个小提琴。 希望对您有所帮助。 将鼠标悬停在图像上，然后单击坐标点

 $(function(){ $("#Map area").click(function(){ $("#show_message").html($(this).attr('title')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="show_message" style="padding:10px; margin:10px; background:#FF0000;color:#FFF"> xxxxxx </div> <div id="aside"> <img src="http://www.sfbayshop.com/images/maps/HaightStreetMap.gif" alt="" usemap="#map" /> <map name="Map" id="Map" z-index:-1> <area alt="" title="Text to show in div 1" href="#" shape="rect" coords="33,110,395,217" /> <area alt="" title="Text to show in div 2" href="#" shape="rect" coords="35,222,395,321" /> <area alt="" title="Text to show in div 3" href="#" shape="rect" coords="34,325,395,397" /> <area alt="" title="Text to show in div 4" href="#" shape="rect" coords="34,401,395,565" /> <area alt="" title="Text to show in div 5" href="#" shape="rect" coords="33,571,399,628" /> <area alt="" title="Text to show in div 6" href="#" shape="rect" coords="33,632,394,775" /> <area alt="" title="Text to show in div 7" href="#" shape="rect" coords="409,127,584,275" /> <area alt="" title="Text to show in div 8" href="#" shape="rect" coords="410,281,586,337" /> </map> </div> 

再见