Procedura: rispondere al clic degli utenti nei controlli server Web ImageMap
Aggiornamento: novembre 2007
È possibile configurare un controllo ImageMap, oppure una singola area sensibile di tale controllo, in modo che, quando gli utenti fanno clic sul controllo o sulla relativa area sensibile, venga eseguito il passaggio a un'altra pagina o un postback. È possibile eseguire l'override delle impostazioni del controllo per ogni area sensibile.
Se il controllo ImageMap o una singola area sensibile è stata configurata in modo da indirizzare gli utenti a un URL specifico, non sarà possibile rispondere direttamente al clic. Se, invece, il controllo o la singola area sensibile è stata configurata in modo da eseguire un postback, sarà possibile scrivere un gestore per l'evento e determinare l'area sensibile su cui è stato fatto clic.
Per rispondere al clic di un utente in un controllo ImageMap
Aggiungere un gestore eventi Click per il controllo ImageMap. Il secondo argomento del gestore deve essere di tipo ImageMapEventArgs.
Nel gestore eventi leggere la proprietà PostBackValue dell'oggetto ImageMapEventArgs per determinare l'area sensibile su cui è stato fatto clic.
Esempio
Nell'esempio di codice riportato di seguito viene illustrato come rispondere al clic di un utente in un controllo ImageMap. La pagina contiene un controllo ImageMap con quattro aree sensibili rettangolari. La proprietà PostBackValue di ogni area è impostata su un valore univoco. Mediante il codice scritto nel gestore viene verificato ogni valore e visualizzata una risposta appropriata.
<%@ Page Language="VB" %>
<script >
Protected Sub ImageMap1_Click(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.ImageMapEventArgs)
Dim region As String
Select Case e.PostBackValue
Case "NW"
region = "Northwest"
Case "NE"
region = "Northeast"
Case "SE"
region = "Southeast"
Case "SW"
region = "Southwest"
End Select
Label1.Text = "You clicked the " & region & " region."
End Sub
</script>
<html>
<body>
<form id="form1" >
<div>
<asp:Label ID="Label1" />
<br />
<br />
<asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG"
HotSpotMode="PostBack"
OnClick="ImageMap1_Click">
<asp:RectangleHotSpot Bottom="100" Right="100"
HotSpotMode="PostBack" PostBackValue="NW" />
<asp:RectangleHotSpot Bottom="100" Left="100" Right="200"
HotSpotMode="PostBack" PostBackValue="NE" />
<asp:RectangleHotSpot Bottom="200" Right="100" Top="100"
PostBackValue="SW" />
<asp:RectangleHotSpot Bottom="200" Left="100" Right="200"
Top="100" PostBackValue="SE" />
</asp:ImageMap>
</div>
</form>
</body>
</html>
<% @ Page Language="C#" %>
<script >
protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
String region = "";
switch(e.PostBackValue)
{
case "NW":
region = "Northwest";
break;
case "NE":
region = "Northeast";
break;
case "SE":
region = "Southeast";
break;
case "SW":
region = "Southwest";
break;
}
Label1.Text = "You clicked the " + region + " region.";
}
</script>
<html>
<body>
<form id="form1" >
<div>
<asp:Label ID="Label1" />
<br />
<br />
<asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG"
HotSpotMode="PostBack"
OnClick="ImageMap1_Click">
<asp:RectangleHotSpot Bottom="100" Right="100"
HotSpotMode="PostBack" PostBackValue="NW" />
<asp:RectangleHotSpot Bottom="100" Left="100" Right="200"
HotSpotMode="PostBack" PostBackValue="NE" />
<asp:RectangleHotSpot Bottom="200" Right="100" Top="100"
PostBackValue="SW" />
<asp:RectangleHotSpot Bottom="200" Left="100" Right="200"
Top="100" PostBackValue="SE" />
</asp:ImageMap>
</div>
</form>
</body>
</html>
Vedere anche
Concetti
Cenni preliminari sul controllo server Web ImageMap
Altre risorse
Procedura: aggiungere controlli server Web ImageMap a una pagina Web Form