Comment créer un ASP dynamique: ImageMap

Question

Je veux créer un ASP: ImageMap avec un nombre dynamique de points chauds. J'ai essayé le code ci-dessous, mais il se plaint d'avoir un répéteur imbriqué dans une carte d'image. auriez vous des idées pour faire ça?

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

(S'il vous plaît ne pas tenir compte des problèmes de liaison de données. Je vais résoudre ces plus tard.)

Answer 1

Vous ne pouvez pas placer un répéteur dans une autre balise de serveur. La façon d'ajouter dynamiquement des zones sensibles à un ImageMap consiste à les ajouter dynamiquement dans le code derrière. Vous devriez être en mesure d'utiliser quelque chose de semblable à cela dans votre événement de chargement de page:

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

S'il vous plaît pardonnez le fait que la syntaxe exacte est probablement un peu hors que je ne l'ai pas écrit ce code dans un certain temps, mais vous devrait avoir l'idée. Si vous souhaitez ajouter plusieurs hotspots, vous pouvez coller ce bloc de code dans une boucle for/foreach et parcourir la liste des éléments que vous souhaitez transformer en hotspots.

Answer 2

Avez-vous besoin d'utiliser un contrôle serveur ou pourriez-vous faire le faire en HTML régulier? somthing comme ceci:

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