javascript - 如何使文本显示在图像映射区域的单独 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

我做了一个 fiddle 。我希望它能帮助你。鼠标悬停在图片上点击坐标点

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

再见