Trigger highlight in maparea when mouseover on link I've created a content type where I can load an image into a text editor and use Image Map Editor to create area to be highlighted when mouse moves over mapped region. At the same time, below the image, a list of persons in that image is displayed. This names are coming from a taxonomy terms list. How can I highlight the area when I move my mouse on the name below the image? I guess I need a javascript which looks for the id namelist, grabs the text for each link, finds in the map with the map id "mapname123" the area hith the same name and changes its state to hovered. I hope I've used the correct words to describe the situation. Thanks in advance.

&lt;div style="background: url(http://image.url.jpg);"&gt;
  &lt;canvas style="width: 800px; height: 450px;"&gt;&lt;/canvas&gt;
  &lt;img src="image.url.jpg" usemap="#mapname123" alt="" class="maphilighted"&gt;&lt;/div&gt;
&lt;map id="mapname123" name="mapname123"&gt;
  &lt;area shape="circle" coords="213,301,36" alt="John Doe" title="John Doe" href="#1"&gt;
  &lt;area shape="circle" coords="334,312,32" alt="Fred Flintstone" title="Fred Flintstone" href="#2"&gt;
  &lt;area shape="circle" coords="437,317,33" alt="Wilma Flintstone" title="Wilma Flintstone" href="#3"&gt;
&lt;/map&gt;


&lt;p id="namelist"&gt;Name List:&lt;br&gt;
  &lt;a href="/imagemap-ki%C5%9Filer/193" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="" class="kisiler"&gt;John Doe&lt;/a&gt;, 
  &lt;a href="/imagemap-ki%C5%9Filer/192" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="" class="kisiler"&gt;Fred Flintstone&lt;/a&gt;, 
  &lt;a href="/imagemap-ki%C5%9Filer/191" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="" class="kisiler"&gt;Wilma Flintstone&lt;/a&gt;, &lt;/p&gt;
An IT guy delivered the solution. Here the code

jQuery(document).ready(function() {
    jQuery('a[typeof].kisiler').each(function() {
        var txt = jQuery(this).text();
        var maps = jQuery('area[title="'+txt+'"]').attr('coords').split(',');

        maps[0]-= maps[2];
        maps[1]-= maps[2];
        maps[2] = maps[2]*2;

        jQuery(this).hover(function() {
            jQuery('.maphilighted').before('&lt;div class="tagbox tagbox'+maps[0]+maps[1]+'" style="left:'+maps[0]+'px; top:'+maps[1]+'px; width:'+maps[2]+'px; height:'+maps[2]+'px; -moz-border-radius:'+maps[2]+'px; -webkit-border-radius:'+maps[2]+'px; border-radius:'+maps[2]+'px;"&gt;&lt;/div&gt;');
        }, function() {
            jQuery('.tagbox'+maps[0]+maps[1]).fadeOut();
            setTimeout("jQuery('.tagbox"+maps[0]+maps[1]+"').remove();", 100);
        });

        console.log(txt, maps);
    });
})