Gewusst wie: Reagieren auf Mausklicks in ImageMap-Webserversteuerelementen

  • Artikel

Aktualisiert: November 2007

Sie können ein ImageMap-Steuerelement oder einen abgegrenzten Bereich (Hotspot) innerhalb eines Steuerelements so konfigurieren, dass beim Klicken darauf eine andere Seite aufgerufen oder ein Postback ausgeführt wird. Sie können die Einstellungen des Steuerelements für jeden Hotspot überschreiben.

Wenn das ImageMap-Steuerelement oder ein einzelner Hotspot für den Zugriff auf einen bestimmten URL konfiguriert wurde, können Sie nicht direkt auf das Klicken reagieren. Wenn das Steuerelement bzw. der Hotspot für das Ausführen eines Postbacks konfiguriert ist, können Sie einen Handler für das Ereignis schreiben und ermitteln, auf welchen Hotspot geklickt wurde.

So reagieren Sie auf einen Mausklick in einem ImageMap-Steuerelement

  1. Fügen Sie einen Click-Ereignishandler für das ImageMap-Steuerelement hinzu. Das zweite Argument des Handlers muss vom Typ ImageMapEventArgs sein.

  2. Lesen Sie im Ereignishandler die PostBackValue-Eigenschaft des ImageMapEventArgs-Objekts aus, um zu bestimmen, auf welchen Hotspot geklickt wurde.

Beispiel

Das folgende Codebeispiel zeigt, wie Sie auf einen Mausklick in einem ImageMap-Steuerelement reagieren können. Die Seite enthält ein ImageMap-Steuerelement mit vier rechteckigen Hotspots. Die PostBackValue-Eigenschaft der einzelnen Hotspots wird auf einen eindeutigen Wert festgelegt. Der Code im Handler prüft, ob es sich um einen der Werte handelt, und zeigt eine entsprechende Antwort an.

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

Siehe auch

Konzepte

Übersicht über das ImageMap-Webserversteuerelement

Weitere Ressourcen

Gewusst wie: Hinzufügen von ImageMap-Webserversteuerelementen zu einer Web Forms-Seite