如何使文本出现在图像地图区域的单独 div onClick 中？答案

【问题标题】：How to make text appear in separate div onClick for area of Image Map?如何使文本出现在图像地图区域的单独 div onClick 中？
【发布时间】：2015-09-04 16:29:27
【问题描述】：

所以我有一个图像映射，我正在尝试使图像映射的部分可点击，以便在单击该区域时，文本将出现在图像侧面的单独 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>

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

【问题讨论】：

尝试将：javascript: changeText( number ); 添加到每个<area> 标记的href 属性以及您正在使用的脚本中，看看是否会发生某些事情。还将div.innerHTML = text; 更改为alert(text);，以便更好地调试它。

标签： javascript jquery html css image

【解决方案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>

再见

【讨论】：