How to create a dynamic ASP:ImageMap

Question

I want to create an ASP:ImageMap with a dynamic number of hot spots. I tried the code below, but it complains about having a repeater nested inside an image map. Any ideas on how to do this?

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

(Please ignore problems with databinding. I'll solve those later.)

Answer 1

Do you need to use a server control or could you do do it in regular HTML? somthing like this:

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

Answer 2

You can't place a repeater inside another server tag. The way to dynamically add hotspots to an ImageMap is to dynamically add them in the code behind. You should be able to use something similar to this in your page load event:

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

Please forgive the fact that the exact syntax is probably a little off as I haven't written this code in a while, but you should get the idea. If you would like to add multiple hotspots you can stick this block of code in a for/foreach loop and iterate over your list of items that you want to turn into hotspots.