How to make text appear in separate div onClick for area of Image Map?

Question

So I have an image map and I'm trying to make the sections of the image map clickable so that when the area is clicked, text will appear on the side of the image in a separate div.

All I have now is the image map:

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

I found this script that does what I want:

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

and it came with this code:

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

The script works but I tried integrating it into the image map but it doesn't work. Please help! How do I do this?

Answer 1

I did a fiddle. I hope that it help you. Mouse over the image and click on the points of coordinates

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

Bye