jQuery ImageMapster:突出显示问题

时间:2012-10-12 13:15:26

标签: c# jquery asp.net imagemap imagemapster

我在使ImageMapster突出显示我的地图区域时遇到了一些麻烦。在阅读文档时,我的印象是只需使用 $('img')。mapster(); 我应该可以看到我的地图区域用鼠标突出显示。

我没有看到这种情况发生。我可以选择区域,但它们不会鼠标悬停。

但是,如果我在地图区域放置onMouseOver和onMouseOut属性,那么我可以使高亮功能起作用。

这是我的问题的症结所在。当我试图将ImageMapster与一些动态C#代码集成时,我无法在地图区域上放置onMouseOver和onMouseOut属性。 C#对象 WebControls.CircleHotSpot 不支持它看起来的自定义属性。

所以我的问题是双重的:

  1. 如何才能让地图区域突出显示才能使用ImageMapster代码?
  2. 有没有办法将属性添加到C#对象WebControls.CircleHotSpot?
  3. 以下是我目前使用的javascript和HTML标记。

    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'
                }
            })
        }
    ); 
    

    标记:

    <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>
    

1 个答案:

答案 0 :(得分:4)

解决方法是确保href不为空白。如果在我的情况下我设置了 href =“#”,那么ImageMapster正常工作 - 在 标记上没有鼠标悬停/鼠标悬停功能时突出显示。

现在对于C#,我可以设置 CircleHotSpot.NavigateURL =“#”,它以编程方式解决了我的解决方案。

感谢@joshingaround解决方案。