2

我在让 ImageMapster 突出显示我的地图区域时遇到了一些问题。在阅读文档时，我的印象是只需使用$('img').mapster(); 鼠标悬停时，我应该能够看到我的地图区域突出显示。

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

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

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

所以我的问题有两个：

  1. 如何使地图区域突出显示仅与 ImageMapster 代码一起使用？
  2. 有没有办法向 C# 对象 WebControls.CircleHotSpot 添加属性？

这是我当前使用的 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>
4

1 回答 1

5

解决方案是确保 href 不为空。如果在我的情况下我设置href="#"那么 ImageMapster 可以正常工作 - 突出显示没有鼠标悬停/鼠标悬停功能标签。

现在对于 C#，我可以设置CircleHotSpot.NavigateURL = "#"以编程方式解决我的解决方案。

感谢@joshingaround 的解决方案。

于 2012-10-16T14:32:21.120 回答