如何创建动态ASP:ImageMap

Question

我想创建一个具有动态数量热点的ASP:ImageMap。我尝试了下面的代码，但它抱怨图像映射中嵌套了一个中继器。你有什么建议吗？

    <asp:ImageMap ID="imgMap" runat="server" ImageUrl="~/circles.png" 
                  HotSpotMode="PostBack">
       <asp:Repeater runat="server" id="repeat" DataSource=<%#circles %>>
            <asp:CircleHotSpot PostBackValue="<%#name %>" 
                               Radius="<%#r %>" 
                               X="<%#x %>" 
                               Y="<%#y %>" />
        </asp:Repeater>
    </asp:ImageMap> 

(请忽略数据绑定的问题。我将在稍后解决这些问题。)

Answer 1

您不能将中继器放入另一个服务器标记中。将热点动态添加到ImageMap的方法是在后台代码中动态添加它们。您应该能够在页面加载事件中使用类似以下内容：

CircleHotSpot hotSpot = new CircleHotSpot();
hotSpot.PostBackValue = "xxxx";
hotSpot.X = xx;
hotSpot.Y = yy;
hotSpot.radius = r;
imgMap.HotSpots.Add(hotSpot);

由于我已经有一段时间没有写这段代码了，所以请原谅我的语法可能有点问题，但你应该明白我的意思。如果想要添加多个热点，可以将这段代码放在for/foreach循环中，并迭代要转换为热点的项目列表。

Answer 2

你需要使用服务器控件吗?或者你可以用普通的HTML来做吗？像这样的东西：

<map id="map1">
    <asp:Repeater ID="rep" runat="server">
    <ItemTemplate>
    <div align=center> 

    <area href="<%# DataBinder.Eval(Container.DataItem,"page")%>" 
     shape="circle" 
     coords="<%# DataBinder.Eval(Container.DataItem,"Coords")%>" 
     alt="area1" />
    </ItemTemplate>
    </asp:Repeater>
    </map>
    <img src="Images/HPIM1784.jpg" alt="bajs" usemap="#map1" />