Lavora con noi

ASP.Net

Siti tematici

ASP.Net » Articoli » Programmazione ASP.NET

Pagine:

RSS

Image Map in ASP.net

di: Angelo Ranucci 02 Maggio 2006

Nel nostro esempio, mettiamo 4 CircleHotSpot in corrispondenza delle città Milano, Torino, Firenze e Roma ed un PolygonHotSpot in corrispondenza del Mar Tirreno.

Figura 4. HotSpot sulla mappa

Facciamo in modo che tutti gli HotSpot provochino un PostBack ed inviino un valore che definisca l'area geografica in cui sono situati e l'HotSpot su Roma provochi l'apertura di una pagina dedicata a Roma.

Il codice sorgente, che può anche essere scritto a mano in modo molto semplice è il seguente:

Listato 1. Codice generato dalla creazione degli HotSpot

<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Immagini/italy_map.gif" OnClick="ImageMap1_Click">
<asp:CircleHotSpot HotSpotMode="PostBack" PostBackValue="Milano" Radius="10" X="84"
Y="65" AlternateText="Sei su Milano" />
<asp:CircleHotSpot HotSpotMode="PostBack" PostBackValue="Torino" Radius="10" X="49"
Y="77" AlternateText="Sei su Torino" />
<asp:CircleHotSpot HotSpotMode="PostBack" PostBackValue="Firenze" Radius="10" X="129"
Y="122" AlternateText="Sei su Firenze" />
<asp:CircleHotSpot HotSpotMode="Navigate" NavigateUrl="~/Roma.aspx" Radius="10" X="159"
Y="185" AlternateText="Pagina dedicata a Roma" />
<asp:PolygonHotSpot Coordinates="111,150,87,146,94,271,153,303,233,297,238,262" HotSpotMode="PostBack"
PostBackValue="Mar Tirreno" AlternateText="Sei sul Mar Tirreno" />
</asp:ImageMap>
</div>
</form>
</body>

Dobbiamo però implementare il gestore dell'evento OnClick sulla mappa. In Design view clicchiamo due volte sulla mappa ed implementiamo il gestore che ci viene proposto, ad esempio nel seguente modo:

Listato 2. Semplice metodo delegato per testare la mappa

protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
  Response.Write("Hai cliccato su " + e.PostBackValue);
}

dove visualizziamo semplicemente un messaggio con il valore che viene inviato nel PostBack.

Se vogliamo accedere dinamicamente agli HotSpot, dobbiamo considerare che essi sono definiti in una Collection, e quindi, possono essere recuperati come elementi di un array, impostando il relativo indice, che parte da zero.

Ad esempio: vogliamo impostare dinamicamente l'AlternateText dei primi tre HotSpot:

Listato 3. Modificare il testo alternativo "da codice"

ImageMap1.HotSpots[0].AlternateText = "Sei su Milano e provincia";
ImageMap1.HotSpots[1].AlternateText = "Sei su Torino e provincia";
ImageMap1.HotSpots[2].AlternateText = "Sei su Firenze e provincia";

Salviamo il tutto e testiamo l'applicazione premendo F5:

Cliccando ad esempio su Milano:

Figura 5. Esempio di esecuzione

Verifichiamo il funzionamento degli hotspot circolari e di quello poligonale posto sul Mar Tirreno. Verifichiamo poi che cliccando su Roma si apre un'altra pagina.

Il sorgente dell'esempio sviluppato in questo articolo può essere scaricato da qui.