Il Webserver Control Image Map

Il controllo Server Image Map è usato per visualizzare una immagine, o porzione di essa, cliccabile, all'interno di una pagina web. Tale immagine è usata per inviare dinuovo al server una richiesta (tale azione è definita PostBack), quando su di essa viene fatto click. Questo controllo differisce dall'ImageButton in quanto l'Imagemap permette di definire delle "porzioni" (hot spot) che causano o il PostBack oppure permettono di navigare in una pagina interna al sito o in un sito esterno alla pagina che si sta visitando.

Le proprietà del controllo Imagemap sono:

  • ImageUrl: indica il path dell'immagine (il percorso della cartella);
  • AlternateText: il testo visualizzato, inerente l'area sensibile, quando l'immagine non è disponibile;
  • HotSpotMode: la proprietà che specifica la modalità dell'HotSpot; essa può essere impostata su:
    • NotSet
    • Inactive
    • Navigate
    • PostBack
  • NavigateUrl: l'URL che viene preimpostato quando l'area viene cliccata;
  • PostBackValue: la stringa di testo che viene visualizzata quando si scatena l'evento su una porzione dell'immagine
  • TabIndex: il numero che può essere assegnato all'area quando ci si vuole spostare tramite il tasto TAB;
  • Target: il target da impostare quando viene linkata una porzione sensibile.

Adesso che sono state illustrate le proprietà, vediamo 2 esempi su 2 immagini distinte; su una vedremo, al click su una porzione, un messaggio; sull'altra, invece, come impostare un link per visitare un altro sito.

La nostra immagine è composta da 4 quadrati colorati di 100 pixel ciascuno, per un totale di 400 pixel. Su ogni zona verrà impostata l'area sensibile ed in puù verrà visualizzato un messaggio il quale stamperà a video l'area in cui abbiamo cliccato.

Mappa Immagine Zona BluZona Arancio

Il codice per ottenere quanto appena visto è il seguente:

Protected Sub ImageMap1_Click(ByVal sender As Object, ByVal_
    e As System.Web.UI.WebControls.ImageMapEventArgs) Handles ImageMap1.Click
        Label1.Text = "Hai cliccato nella " & e.PostBackValue
End Sub

Tra i tag form, invece, scriveremo:

<asp:ImageMap ID="ImageMap1" runat="server" 
        ImageUrl="NomeImmagine.gif" Width="400" HotSpotMode="PostBack">
        
<asp:RectangleHotSpot Top="0" Right="200" Bottom="100" Left="0" 
        AlternateText="Zona Blu" PostBackValue="Zona Blu della mappa" />
        
<asp:RectangleHotSpot Top="0" Right="400" Bottom="100" Left="200" 
        AlternateText="Zona Arancio" PostBackValue="Zona Arancio della mappa" /> 
</asp:ImageMap>


<asp:Label ID="Label1" runat="server" Text=""></asp:Label>

Associare un link su ogni area sensibile

Se volessimo associare un link su ogni area, non è per nulla difficile in quanto il codice cambia leggermente rispetto a quello appena visto. Infatti abbiamo:

<asp:ImageMap ID="ImageMap1" runat="server" 
        ImageUrl="NomeImmagine.gif" HotSpotMode="Navigate">
        
<asp:RectangleHotSpot Top="0" Bottom="100" left="200" 
    AlternateText="Link esterno" NavigateUrl="http://www.NomeSito.it" />
    
<asp:RectangleHotSpot Top="0" Bottom="100" Right="0" 
        Left="400" AlternateText="Link esterno" NavigateUrl="http://www.NomeSito.com" />
</asp:ImageMap>

Da notare la differenza tra HotSpotMode="PostBack" e HotSpotMode="Navigate" nei 2 esempi. Credo si pieghi da solo in quanto si ottengono 2 risultati differenti.