CODEWITHSUNDEEP
c#jqueryasp.netimagemapimagemapster
Benjamin Higgins
Benjamin Higgins

Reputation: 91

jQuery ImageMapster: Highlighting Issues

I'm having some trouble making ImageMapster highlight my map areas. In reading the documentation, I'm under the impression that by simply using $('img').mapster(); I should be able to see my map areas highlight with mouse over.

I'm not seeing this happen. I am able to select the areas, but they do not mouse over.

However, if I put onMouseOver and onMouseOut attributes on the map areas, then I can make the highlight function work.

Here's the crux of my issue. As I'm trying to integrate ImageMapster with some dynamic C# code, I am unable to put onMouseOver and onMouseOut attributes on the map area. The C# object WebControls.CircleHotSpot does not support custom attributes it seems.

So my question is two-fold:

  1. How can I get map area highlighting to work with ImageMapster code only?
  2. Is there a way to add attributes to the C# object WebControls.CircleHotSpot?

Here is the javascript and HTML markup that I am currently using.

JavaScript:

$(document).ready(
    function()
    {
        $('#Image1').mapster({
            fillOpacity: 0.5,
            mapKey: 'alt',
            staticState:true,
            render_highlight: 
            {
                fillColor: '2aff00',
            },
            render_select: 
            {
                fillColor: 'ff000c',
            }
        });

        $('#Image2').mapster({
            mapKey: 'alt',

            stroke: true,
            strokeOpacity: 1.0,
            strokeColor: '000000',
            strokeWidth: 2,

            fill: true,
            fillColor: '0000ff',
            fillOpacity: 0.25,

            render_select: 
            {
                fillOpacity: 0.75,
                fillColor: 'ff0000'
            },
            render_highlight: 
            {
                fillOpacity: 0.5,
                fillColor: '00ff00'
            }
        })
    }
);

Markup:

<img id="Image1" src="bicycleparts.png" usemap="#ImageMap1" />

<map name="ImageMap1" id="ImageMap1">
    <area shape="circle" coords="100,50,50" href="" title="1" alt="1" onMouseOver="$('#Image1').mapster('highlight','1')" onMouseOut="$('#Image1').mapster('highlight',false)" />
    <area shape="circle" coords="200,100,50" href="" title="2" alt="2" onMouseOver="$('#Image1').mapster('highlight','2')" onMouseOut="$('#Image1').mapster('highlight',false)" />
    <area shape="circle" coords="300,150,50" href="" title="3" alt="3" onMouseOver="$('#Image1').mapster('highlight','3')" onMouseOut="$('#Image1').mapster('highlight',false)" />
    <area shape="circle" coords="400,200,50" href="" title="4" alt="4" onMouseOver="$('#Image1').mapster('highlight','4')" onMouseOut="$('#Image1').mapster('highlight',false)" />
    <area shape="circle" coords="500,250,50" href="" title="5" alt="5" onMouseOver="$('#Image1').mapster('highlight','5')" onMouseOut="$('#Image1').mapster('highlight',false)" />
</map>

<img id="Image2" src="bicycleparts.png" usemap="#ImageMap2" />

<map name="ImageMap2" id="ImageMap2">
    <area shape="circle" coords="100,50,50" href="" title="1" alt="1"/>
    <area shape="circle" coords="200,100,50" href="" title="2" alt="2"/>
    <area shape="circle" coords="300,150,50" href="" title="3" alt="3"/>
    <area shape="circle" coords="400,200,50" href="" title="4" alt="4"/>
    <area shape="circle" coords="500,250,50" href="" title="5" alt="5"/>
</map>

Upvotes: 2

Views: 3368

Answers (1)

Benjamin Higgins
Benjamin Higgins

Reputation: 91

The solution to this is to make sure that href is not blank. If in my case I set href="#" then ImageMapster works properly - highlighting without the mouseover/mouseout functions on the tags.

Now for C#, I am able to set CircleHotSpot.NavigateURL = "#" which solves my solution programatically.

Thanks to @joshingaround for the solution.

Upvotes: 5

Related Questions