Question

I’m using maphilight by David Lynch to create highlighted areas on a skeleton image so that a user can select joints. Everything works fine and dandy except the user now wants the selected areas to stay highlighted.

What I currently do now is have all of the image maps highlighed so the script is set to this:

<script>
    $(function () {
        $('.body').maphilight({ alwaysOn: true, fade: false, fillOpacity: 0.3 });
    });
</script> 

An example of current html code is (coordinates snipped out):

<asp:ImageMap class="body" ID="ImageMap1" runat="server"  
    ImageUrl="~/Images/body_hand_foot.jpg" HotSpotMode="PostBack" 
    OnClick="ImageMapEventHandler">

    <%-- TMJ --%>
    <asp:PolygonHotSpot AlternateText="Right TMJ"
    Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="TMJ-Right" />
    <asp:PolygonHotSpot AlternateText="Left TMJ"  Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="TMJ-Left" />

    <%-- SI Joint --%>
    <asp:PolygonHotSpot AlternateText="Left SI Joint" Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="SI-Joint Left"  />
    <asp:PolygonHotSpot AlternateText="Right SI Joint" Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="SI-Joint Right" />
</asp:ImageMap

The OnClick event handler stores the PostBackValue into a table for other uses

Is it possible I can create 2 ImageMap objects on top of each other and switch out the HotSpots between the two at the same time having another maphilight function with a different name and different options?

Or is there a better approach to this?

Answer 1

Take a look at my plugin Image Mapster as an alternative to MapHilight . Its usage is similar to MapHilight. By default areas remain highlighted when selected.

I am not sure I understand the question about using two imagemaps – is this just an idea about how to approach the selection problem? Generally, the way that both MapHilight and Image Mapster set up the DOM to do their effects is as follows:

• Create a div with a background image equal to the same as the image map source
• Create one or more “canvas” elements of the same size
• Overlay this div and all canvases on the image (but render the image last so it has the highest z-index, and therefore will respond to mouse events)
• Make the img opacity = 0 so it is transparent

The effect is that the image map responds to mouse events, but the div and canvas elements behind it are all visible since the actual img is transparent.

So you can have as many “layers” as you want. ImageMapster uses three of them:

• The background image div
• One to show the “highlight” effect canvas
• One to show all the static “selected” areas canvas

… in addition to the actual img. So I think the answer to your question is yes, but you don’t actually want to use two image maps, just two layers to show the effects. This is how the plugin works behind the scenes.