1

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.

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


<p id="namelist">Name List:<br>
  <a href="/imagemap-ki%C5%9Filer/193" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="" class="kisiler">John Doe</a>, 
  <a href="/imagemap-ki%C5%9Filer/192" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="" class="kisiler">Fred Flintstone</a>, 
  <a href="/imagemap-ki%C5%9Filer/191" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="" class="kisiler">Wilma Flintstone</a>, </p>
1

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('<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;"></div>');
        }, function() {
            jQuery('.tagbox'+maps[0]+maps[1]).fadeOut();
            setTimeout("jQuery('.tagbox"+maps[0]+maps[1]+"').remove();", 100);
        });

        console.log(txt, maps);
    });
})
|improve this answer|||||
0

You can simply achieve that by using the jQuery Map Hilight module

It enables the simple addition of mouseover highlighting of hotspots to HTML image maps without requiring the editing of theme files or knowledge of javascript/jquery.

Features

  1. provides simple interactive graphics via HTML image maps (no flash required).
  2. easy to use: either select the 'highlight all image maps' default setting or simply add class="jq_maphilight" to the tag of any specific image map you wish to highlight.
  3. no jquery or javascript knowledge required: plugin configuration is handled via an admin/settings screen rather than having to enter jquery code.
  4. fully configurable: options for fill, fill color, fill opacity, outline, outline color, outline opacity, outline thickness, as well as a fade effect.
  5. per image map settings: add image map specific options with an additional class.
|improve this answer|||||
  • Thanks Krishna, Map Hilight is already implemented but I only use it to style the highlight. But I got a tip from an IT guy. His solution is provided below. – Hermes Jul 4 '14 at 11:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.