Highlight Section of Mapped Image when Mouseover Text on Webpage

Question

Scenario:

• Image with several areas mapped.
• A list of text on the page

Desired functionality: When I mouseover the different pieces of text in the list, corresponding areas in the mapped image will become highlighted.

Does anyone know of a good javascript tool that can do this?

I have found a jquery plugin (map hilight) that will highlight the section of the image as you move your mouse over the image itself. I am looking for the next step - triggering the highlights from a source outside of the image.

Answer 1

Highslide is not exactly what you asked for, but worth a look.

Answer 2

I looked at the source code for the plugin you mentioned and it should be fairly easy to extend it so that it will do what you want it to do, here a few hints:

Line 127-136 of jquery.maphighlight.js:

mouseover = function(e) {
   var shape = shape_from_area(this);
   add_shape_to(canvas, shape[0], shape[1], $.metadata ? $.extend({}, options, $(this).metadata()) : options);
};

if(options.alwaysOn) {
   $(map).find('area[coords]').each(mouseover);
} else {
   $(map).find('area[coords]').mouseover(mouseover).mouseout(function(e) { clear_canvas(canvas); });
}

This is where all the event magic happens. The mouseover function is used to highlight an area.\

In your code you could try to find the area coordinates you want to highlight by doing something like this:

$(map).find('#id_of_the_area[coords]').each(moseover);

Where id_of_the_area would be an id that you gave the <area> tag that you want to highlight.

If you put that into a function you can call that from wherever you need it from.

Edit:

Based on your question in the comment, here are some more pointers:

The functions to highlight/unhighlight an area could look something like this:

function highlight(e) {
   $(map).find('#id_of_the_area[coords]').each(moseover);
} 
function unHighlight(e) {
   clear_canvas($(canvas));
}

In this example id_of_map and id_of_canvas would be the id of the map and canvas elements.

The scope of the mouseover or clear_canvas functions and map or canvas variables might be an issue there. You need to be careful on where to place this code. I'd suggest reading up on jquery plugins a bit before you try to add this functionality.

In jquery you can attach events to any html element. Like this:

$('#id_of_element').mouseover(highlight); 
$('#id_of_element').mouseout(unHighlight);

id_of_element would be the id of the element that you would like to trigger the highlighting.

Hope this helps!

Answer 3

Hello Yaakov, while this is not super-elegant, you can trigger the mouseover event of the area element in question manually:

<a href="..." onmouseover="$('#certain-area')
       .trigger('mouseover');">link text</a>

Same holds for mouseout. Of course, this is better done unobtrusively than using onmousover and onmouseout.

Cheers, Tom