I'm really liking the jQuery addin Image Mapster. However, I've really reached a brick wall I could use some help climbing.

I need to do the following:

1. Highlight all image map areas with a border and color prior to any interaction
2. Enable mouseover highlighting and mouseout dehighlighting (returning to the state #1 above) with potentially different border and color
3. Enable selection with a third different border and color

I was initially under the impression that the following JavaScript would be able to do that for me:

    $('#Image1').mapster({
        fillOpacity: 0.5,
        fillColor: FF0000,

        stroke: true,
        strokeOpacity: 1.0,
        strokeColor: 00FF00,
        strokeWidth: 2,

        render_highlight: 
        {
             fillOpacity: 0.5,
             fillColor: 00FF00,

             stroke: true,
             strokeOpacity: 1.0,
             strokeColor: FF0000,
             strokeWidth: 2,
        },
        render_select: 
        {
             fillOpacity: 1.0,
             fillColor: 0000FF,

             stroke: false
        }
    });

It appears to support mouseover/mouseout (#2) and selection (#3) - but does not light up my areas as I want (#1).

Does anyone a bit more experienced with ImageMapster have any suggestions?

Thanks!

I'm really liking the jQuery addin Image Mapster. However, I've really reached a brick wall I could use some help climbing.

I need to do the following:

1. Highlight all image map areas with a border and color prior to any interaction
2. Enable mouseover highlighting and mouseout dehighlighting (returning to the state #1 above) with potentially different border and color
3. Enable selection with a third different border and color

I was initially under the impression that the following JavaScript would be able to do that for me:

    $('#Image1').mapster({
        fillOpacity: 0.5,
        fillColor: FF0000,

        stroke: true,
        strokeOpacity: 1.0,
        strokeColor: 00FF00,
        strokeWidth: 2,

        render_highlight: 
        {
             fillOpacity: 0.5,
             fillColor: 00FF00,

             stroke: true,
             strokeOpacity: 1.0,
             strokeColor: FF0000,
             strokeWidth: 2,
        },
        render_select: 
        {
             fillOpacity: 1.0,
             fillColor: 0000FF,

             stroke: false
        }
    });

It appears to support mouseover/mouseout (#2) and selection (#3) - but does not light up my areas as I want (#1).

Does anyone a bit more experienced with ImageMapster have any suggestions?

Thanks!

• javascript
• jquery
• imagemap
• imagemapster

1 Answer 1

Several ments:

1. Your code before "render_highlight" is to define how the area looks like when highlighted by default. Even if it worked, it's for highlight rather than select.

2. But you add an optional rendering key "render_highlight" and that will disable the previous options you set. That's why when you move your mouse over the areas you cannot see the effects you defined above "render_highlight"

3. For your #1, my suggestion is to delete all the options before "render_highlight", and add this line staticState: true,. This will enable all areas selected all the time but that will disobey your goal #3. I can't find a better way to achieve all of your three goals. Waiting for others to help.

Here is the documentation you might want to have a look http://www.outsharked./imagemapster/default.aspx?docs.html