次の方法で共有

方法 : ImageMap Web サーバー コントロールでのユーザーのクリックに応答する

  • [アーティクル]

更新 : 2007 年 11 月

ImageMap コントロール、またはその中の各領域 (ホット スポット) を設定できます。これによって、ユーザーが特定のホット スポットをクリックするとコントロールは別のページに移るか、ポストバックを実行します。各ホット スポットに関するコントロールの設定は上書きできます。

ImageMap コントロールまたは各ホット スポットが特定の URL にジャンプするように設定されている場合、クリックに直接応答する機会はありません。ただし、コントロールまたはホット スポットがポストバックを実行するように設定されている場合は、イベントのハンドラを記述してどのホット スポットがクリックされたかを確認できます。

ImageMap コントロールでのユーザーのクリックに応答するには

  1. ImageMap コントロールの Click イベント ハンドラを追加します。ハンドラの 2 番目の引数は ImageMapEventArgs 型である必要があります。

  2. イベント ハンドラでは、ImageMapEventArgs オブジェクトの PostBackValue プロパティを読み取ってどのホット スポットがクリックされたか決定します。

使用例

ImageMap コントロールでのユーザーのクリックに応答する方法を次のコード例に示します。このページには、4 つの四角形のホット スポットを持つ ImageMap コントロールが含まれます。各ホット スポットの PostBackValue プロパティは一意の値に設定されます。ハンドラのコードは各値をチェックし、適切な応答を表示します。

<%@ Page Language="VB" %>
<script runat="server">
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" runat="server">
    <div>
    <asp:Label runat="server" ID="Label1" />
    <br />
    <br />
        <asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG" 
            runat="server" 
            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 runat="server">
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" runat="server">
    <div>
    <asp:Label runat="server" ID="Label1" />
    <br />
    <br />
        <asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG" 
            runat="server" 
            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>

参照

概念

ImageMap Web サーバー コントロールの概要

その他の技術情報

方法 : Web フォーム ページに ImageMap Web サーバー コントロールを追加する