ImageMap クラスとは何？わかりやすく解説 Weblio辞書

.NET Framework クラスライブラリリファレンス

索引トップ用語の索引ランキング

ImageMap クラス

メモ : このクラスは、.NET Framework version 2.0 で新しく追加されたものです。

ページ上にイメージを表示するコントロールを作成します。ImageMap コントロール内に定義されたホットスポット領域がクリックされると、このコントロールはサーバーへのポストバックを生成するか、指定された URL に移動します。

名前空間: System.Web.UI.WebControls
アセンブリ: System.Web (system.web.dll 内)
構文

Visual Basic (宣言)

Public Class ImageMap
    Inherits Image
    Implements IPostBackEventHandler

Visual Basic (使用法)

Dim instance As ImageMap

public class ImageMap : Image, IPostBackEventHandler

C++

public ref class ImageMap : public
 Image, IPostBackEventHandler

public class ImageMap extends Image implements
 IPostBackEventHandler

JScript

public class ImageMap extends
 Image implements IPostBackEventHandler

解説

ImageMap コントロールを使用して、定義済みのホットスポット領域を含んだイメージを作成します。ユーザーがホットスポット領域をクリックすると、このコントロールはサーバーへのポストバックを生成するか、指定された URL に移動します。たとえば、このコントロールを使用して地理的な領域を表す地図を表示できます。ユーザーが地図上の特定の領域をクリックすると、このコントロールは選択した領域に関する追加情報を提供する URL に移動します。また、このコントロールを使用して、サーバーへのポストバックを生成し、クリックされたホットスポット領域に応じた特定のコードを実行することもできます。たとえば、ImageMap コントロールを使用して投票などのユーザー回答を収集できます。賛成の意思表示のために定義したホットスポット領域をユーザーがクリックすると、賛成の回答をデータベースに記録するコードが呼び出されます。反対の意思表示のために定義したホットスポット領域をユーザーがクリックした場合、回答は記録されません。これら 2 つの使い方を 1 つの ImageMap コントロール内に混在させることもできます。たとえば、あるホットスポット領域を URL への移動用に指定し、もう 1 つのホットスポット領域をサーバーへのポストバック用に指定できます。

ImageUrl プロパティを使用して、ImageMap コントロールに表示するイメージのパスを指定します。ImageMap コントロールには、任意の数の HotSpot オブジェクトを定義できます。CircleHotSpot、RectangleHotSpot、および PolygonHotSpot の各クラスを使用して、ホットスポット領域を定義できます。別の方法として、抽象クラスの HotSpot を継承して、独自のカスタムホットスポットオブジェクトを定義することもできます。

HotSpot がクリックされたときの ImageMap コントロールの HotSpot オブジェクトの動作を指定するには、2 つの方法があります。ImageMap コントロールの HotSpotMode プロパティ、または個々の HotSpot オブジェクトの HotSpotMode プロパティのいずれかを使用できます。これらのプロパティは、HotSpotMode 列挙値の 1 つを使用して設定します。両方のプロパティが設定された場合、ImageMap コントロールの HotSpotMode プロパティよりも、各 HotSpot オブジェクトに指定された HotSpotMode プロパティが優先されます。

URL に移動するには、ImageMap.HotSpotMode プロパティか HotSpot.HotSpotMode プロパティに HotSpotMode.Navigate を設定します。NavigateUrl プロパティを使用して、移動先の URL を指定します。

サーバーへのポストバックを生成するには、ImageMap.HotSpotMode プロパティか HotSpot.HotSpotMode プロパティに HotSpotMode.Postback を設定します。PostBackValue プロパティを使用して、ホットスポット領域の名前を指定します。この名前は、ポストバックイベントが発生したときに、ImageMapEventArgs イベントデータに渡されます。ポストバックの HotSpot がクリックされると、Click イベントが発生します。ポストバックの HotSpot がクリックされたときに実行されるアクションをプログラムによって制御するには、Click イベントのイベントハンドラを実装します。

ImageMap コントロールのすべての HotSpot オブジェクトが同じ動作となるようにするには、ImageMap.HotSpotMode プロパティを使用して動作を指定します。次に、個々の HotSpot オブジェクトの HotSpot.HotSpotMode プロパティに HotSpotMode.NotSet を設定するか、HotSpot.HotSpotMode プロパティに値を指定しないようにします。

ImageMap の各 HotSpot オブジェクトに異なる動作を指定するには、個々の HotSpot オブジェクトの HotSpot.HotSpotMode プロパティに HotSpotMode.Navigate か HotSpotMode.PostBack を設定します。

メモ
ImageMap コントロールの ImageMap.HotSpotMode プロパティ、またはそれに含まれる任意の HotSpot オブジェクトの HotSpot.HotSpotMode プロパティに HotSpotMode.NotSet を設定するか、または値を設定しない場合、既定の動作は HotSpotMode.Navigate となります。

ユーザー補助

このコントロールに既定でレンダリングされるマークアップは、Web Content Accessibility Guidelines (WCAG) 1.0 の優先度 1 ガイドラインなどのユーザー補助に関する標準に適合しない可能性があります。このコントロールのユーザー補助サポートの詳細については、「ASP.NET コントロールとユーザー補助」を参照してください。

Topic	Location
方法 : ImageMap Web サーバーコントロールでのユーザーのクリックに応答する	ASP .NET Web アプリケーションの作成
方法 : Web フォームページに ImageButton Web サーバーコントロールを追加する	ASP .NET Web アプリケーションの作成
方法 : Web フォームページに ImageMap Web サーバーコントロールを追加する	ASP .NET Web アプリケーションの作成
方法 : Web ページに ImageMap Web サーバーコントロールを追加する (Visual Studio)	Visual Studio での ASP .NET Web アプリケーションの作成

使用例

2 つの CircleHotSpot オブジェクトを含む ImageMap コントロールを、宣言によって作成する方法を次のコード例に示します。HotSpot.HotSpotMode プロパティは HotSpotMode.Navigate に設定されます。この場合、ユーザーがいずれかの円形のホットスポット領域をクリックするたびに、指定された URL にページが移動します。この例を正常に動作させるには、ImageUrl プロパティにユーザー独自のイメージを提供し、アプリケーションがそのイメージを見つけられるように、イメージへのパスを適切に更新する必要があります。

Visual Basic

<%@ Page Language="VB" %>

<html>
<head id="Head1" runat="server">
  <title>ImageMap Class Navigate Example</title>
</head>
  <body>
    <form id="Form1" runat="server">
    
      <h3>ImageMap Class Navigate Example</h3>
      
      <h4>Shopping Choices:</h4>
      
       <asp:imagemap id="Shop"           
        imageurl="Images/ShopChoice.jpg"
        alternatetext="Shopping choices" 
        runat="Server">    
        
        <asp:circlehotspot
          navigateurl="http://www.tailspintoys.com"
          x="145"
          y="120"
          radius="75"
          hotspotmode="Navigate"
          alternatetext="Shop for toys">      
     
        </asp:circlehotspot> 
        
        <asp:circlehotspot
          navigateurl="http://www.cohowinery.com"
          x="145"
          y="290"
          radius="75"
          hotspotmode="Navigate"
          alternatetext="Shop for wine">
        </asp:circlehotspot>     
          
      </asp:imagemap>                 
                 
    </form>      
  </body>
</html>

<%@ page language="C#" %>

<html>
<head id="Head1" runat="server">
  <title>ImageMap Class Navigate Example</title>
</head>
  <body>
    <form id="Form1" runat="server">
    
      <h3>ImageMap Class Navigate Example</h3>
      
      <h4>Shopping Choices:</h4>
      
      <asp:imagemap id="Shop"           
        imageurl="Images/ShopChoice.jpg"
        width="150" 
        height="360"
        alternatetext="Shopping choices" 
        runat="Server">    
        
        <asp:circlehotspot
          navigateurl="http://www.tailspintoys.com"
          x="75"
          y="290"
          radius="75"
          hotspotmode="Navigate"
          alternatetext="Shop for toys">        
   
        </asp:circlehotspot> 
        
        <asp:circlehotspot
          navigateurl="http://www.cohowinery.com"
          x="75"
          y="120"
          radius="75"
          hotspotmode="Navigate"
          alternatetext="Shop for wine">
        </asp:circlehotspot>     
          
      </asp:imagemap>                 
                 
    </form>      
  </body>
</html>

2 つの RectangleHotSpot オブジェクトを含む ImageMap コントロールを、宣言によって作成する方法を次のコード例に示します。ImageMap.HotSpotMode プロパティは HotSpotMode.PostBack に設定されます。この場合、ユーザーがいずれかのホットスポット領域をクリックするたびに、ページがサーバーにポストバックされます。この例を正常に動作させるには、ImageUrl プロパティにユーザー独自のイメージを提供し、アプリケーションがそのイメージを見つけられるように、イメージへのパスを適切に更新する必要があります。

Visual Basic

<%@ Page Language="VB" %>

<script runat="server">
  
  Sub VoteMap_Clicked(ByVal sender As
 Object, ByVal e As ImageMapEventArgs)
    Dim coordinates As String
    Dim hotSpotType As String
    Dim yescount As Integer
    Dim nocount As Integer
    
    If (ViewState("yescount") IsNot
 Nothing) Then
      yescount = Convert.ToInt32(ViewState("yescount"))
    Else
      yescount = 0
    End If
    If (ViewState("nocount") IsNot
 Nothing) Then
      nocount = Convert.ToInt32(ViewState("nocount"))
    Else
      nocount = 0
    End If
      
    
    ' When a user clicks the "Yes" hot spot,
    ' display the hot spot's name and coordinates.
    If (e.PostBackValue.Contains("Yes"))
 Then
      
      yescount += 1
      coordinates = Vote.HotSpots(0).GetCoordinates()
      hotSpotType = Vote.HotSpots(0).ToString()
      Message1.Text = "You selected " & hotSpotType
 & " " & e.PostBackValue & ".<br>"
 & _
                      "The coordinates are " &
 coordinates & ".<br>" & _
                      "The current vote count is "
 & yescount.ToString() & _
                      " yes votes and " & nocount.ToString()
 & " no votes."
       
      ' When a user clicks the "No" hot spot,
      ' display the hot spot's name and coordinates.
    ElseIf (e.PostBackValue.Contains("No"))
 Then
      
      nocount += 1
      coordinates = Vote.HotSpots.Item(1).GetCoordinates()
      hotSpotType = Vote.HotSpots.Item(1).ToString()
      Message1.Text = "You selected " & hotSpotType
 & " " & e.PostBackValue & ".<br>"
 & _
                     "The coordinates are " &
 coordinates & ".<br>" & _
                      "The current vote count is "
 & yescount.ToString() & _
                      " yes votes and " & nocount.ToString()
 & " no votes."
      
    Else
      
      Message1.Text = "You did not click a valid hot spot region."
                
    End If
      
    ViewState("yescount") = yescount
    ViewState("nocount") = nocount
    
  End Sub
  
</script>

<html>
<head id="Head1" runat="server">
  <title>ImageMap Class Post Back Example</title>
</head>
  <body>
    <form id="Form1" runat="server">
    
      <h3>ImageMap Class Post Back Example</h3>
      
      <asp:imagemap id="Vote"           
        imageurl="Images/VoteImage.jpg"
        width="400" 
        height="200" 
        alternatetext="Vote Yes or No"
        hotspotmode="PostBack"
        onclick="VoteMap_Clicked"
        runat="Server">            
          
        <asp:RectangleHotSpot          
          top="0"
          left="0"
          bottom="200"
          right="200"
          postbackvalue="Yes"
          alternatetext="Vote yes">
        </asp:RectangleHotSpot>
          
        <asp:RectangleHotSpot 
          top="0"
          left="201"
          bottom="200"
          right="400"
          postbackvalue="No"
          alternatetext="Vote no">
        </asp:RectangleHotSpot>
      
      </asp:imagemap>
            
      <br /><br />
          
      <asp:label id="Message1"
        runat="Server">
      </asp:label>                 
                 
    </form>      
  </body>
</html>

<%@ page language="C#" %>
<script runat="server">
  
  void VoteMap_Clicked (Object sender, ImageMapEventArgs e)
  {
    string coordinates;
    string hotSpotType;
    int yescount = ((ViewState["yescount"] != null)?
 (int)ViewState["yescount"] : 0);
    int nocount = ((ViewState["nocount"] != null)?
 (int)ViewState["nocount"] : 0);

    // When a user clicks the "Yes" hot spot,
    // display the hot spot's name and coordinates.
    if (e.PostBackValue.Contains("Yes"))
    {
      yescount += 1;
      coordinates = Vote.HotSpots[0].GetCoordinates();
      hotSpotType = Vote.HotSpots[0].ToString ();
      Message1.Text = "You selected " + hotSpotType + " " + e.PostBackValue
 + ".<br>" +
                      "The coordinates are " + coordinates + ".<br>"
 +
                      "The current vote count is " + yescount.ToString()
 + 
            " yes votes and " + nocount.ToString() + " no votes.";
    }
      
    // When a user clicks the "No" hot spot,
    // display the hot spot's name and coordinates.
    else if (e.PostBackValue.Contains("No"))
    {
      nocount += 1;
      coordinates = Vote.HotSpots[1].GetCoordinates();
      hotSpotType = Vote.HotSpots[1].ToString ();
      Message1.Text = "You selected " + hotSpotType + " " + e.PostBackValue
 + ".<br>" +
                      "The coordinates are " + coordinates + ".<br>"
 +
            "The current vote count is " + yescount.ToString() +
            " yes votes and " + nocount.ToString() + " no votes.";
    }
    
    else
    {
      Message1.Text = "You did not click a valid hot spot region.";
    }

    ViewState["yescount"] = yescount;
    ViewState["nocount"] = nocount;
  }           
  
</script>

<html>
<head id="Head1" runat="server">
  <title>ImageMap Class Post Back Example</title>
</head>
  <body>
    <form id="Form1" runat="server">
    
      <h3>ImageMap Class Post Back Example</h3>
      
      <asp:imagemap id="Vote"           
        imageurl="Images/VoteImage.jpg"
        width="400" 
        height="200" 
        alternatetext="Vote Yes or No"
        hotspotmode="PostBack"
        onclick="VoteMap_Clicked"
        runat="Server">            
          
        <asp:RectangleHotSpot          
          top="0"
          left="0"
          bottom="200"
          right="200"
          postbackvalue="Yes"
          alternatetext="Vote yes">
        </asp:RectangleHotSpot>
          
        <asp:RectangleHotSpot 
          top="0"
          left="201"
          bottom="200"
          right="400"
          postbackvalue="No"
          alternatetext="Vote no">
        </asp:RectangleHotSpot>
      
      </asp:imagemap>
            
      <br /><br />
          
      <asp:label id="Message1"
        runat="Server">
      </asp:label>                 
                 
    </form>      
  </body>
</html>

動作の異なるホットスポットを含んだ ImageMap コントロールを作成する方法を次のコード例に示します。背景の領域は、サーバーへのポストバックを行う単一の RectangleHotSpot として定義されます。同じ領域に 3 つの RectangleHotSpot オブジェクトが定義されます。これらのホットスポットはそれぞれボタンのような外観をしており、URL に移動します。ImageMap コントロールで 2 つのホットスポットが重なり合った領域がクリックされると、最初に定義されたホットスポットが優先されます。この例では、ボタンのホットスポットが最初に宣言され、それらを含んだ背景のホットスポットは最後に宣言されます。したがって、ユーザーがボタンのホットスポットをクリックしたときの動作は、背景の RectangleHotSpot オブジェクトではなくボタンの RectangleHotSpot オブジェクトの動作となります。この例を正常に動作させるには、ImageUrl プロパティにユーザー独自のイメージを提供し、アプリケーションがそのイメージを見つけられるように、イメージへのパスを適切に更新する必要があります。

Visual Basic

<%@ page language="VB" %>

<script runat="server">
  Sub ButtonsMap_Clicked(ByVal sender As
 Object, ByVal e As ImageMapEventArgs)
    ' When a user clicks the "Background" hot spot,
    ' display the hot spot's value.
    If (e.PostBackValue = "Background")
 Then
      
      Dim coordinates As String
      coordinates = Buttons.HotSpots(3).GetCoordinates()
      Message1.Text = "You selected the " & e.PostBackValue
 & "<br>" & _
                      "The coordinates are " &
 coordinates
      
    End If
  End Sub

</script>

<html>
<head id="Head1" runat="server">
  <title>ImageMap Class Mixed HotSpotMode Example</title>
</head>
  <body>
    <form id="Form1" runat="server">
    
      <h3>ImageMap Class Mixed HotSpotMode Example</h3>
      
      <!--In this scenario, the ImageMap.HotSpotMode
      property is not set,
 because the 
      HotSpotMode property is set
 on each individual
      RectangleHotSpot object to specify its
 behavior.-->
      <asp:imagemap id="Buttons"           
        imageurl="Images/MixedImage.jpg"
        width="350"
        height="350" 
        alternatetext="Navigate buttons"
        hotspotmode=NotSet     
        onclick="ButtonsMap_Clicked"
        runat="Server">                 
        
        <asp:RectangleHotSpot
          hotspotmode="Navigate"
          NavigateUrl="http://www.contoso.com"
          alternatetext="Button 1"
          top="50"
          left="50"
          bottom="100"
          right="300">
        </asp:RectangleHotSpot>
        
        <asp:RectangleHotSpot  
          hotspotmode="Navigate"
          NavigateUrl="http://www.tailspintoys.com"
          alternatetext="Button 2"        
          top="150"
          left="50"
          bottom="200"
          right="300">          
        </asp:RectangleHotSpot>
        
        <asp:RectangleHotSpot
          hotspotmode="Navigate"
          NavigateUrl="http://www.cohowinery.com"
          alternatetext="Button 3"          
          top="250"
          left="50"
          bottom="300"
          right="300">
        </asp:RectangleHotSpot> 
        
        <asp:RectangleHotSpot 
          hotspotmode="PostBack"
          PostBackValue="Background"
          alternatetext="Background"
          top="0"
          left="0"
          bottom="350"
          right="350">
        </asp:RectangleHotSpot>       
      
      </asp:imagemap>
            
      <br />
          
      <asp:label id="Message1"
        runat="Server">
      </asp:label>                 
                 
    </form>      
  </body>
</html>

<%@ page language="C#" %>
<script runat="server">
  
  void ButtonsMap_Clicked(object sender, ImageMapEventArgs e)
  {       
    // When a user clicks the "Background" hot spot,
    // display the hot spot's value.
    if (e.PostBackValue == "Background")
    {
      string coordinates = Buttons.HotSpots[3].GetCoordinates();
      Message1.Text = "You selected the " + e.PostBackValue + "<br>"
 +
                                "The coordinates are " + coordinates;
    }
  }
  
</script>

<html>
<head id="Head1" runat="server">
  <title>ImageMap Class Mixed HotSpotMode Example</title>
</head>
  <body>
    <form id="Form1" runat="server">
    
      <h3>ImageMap Class Mixed HotSpotMode Example</h3>
      
      <!--In this scenario, the ImageMap.HotSpotMode
      property is not set, because the 
      HotSpotMode property is set on each individual
      RectangleHotSpot object to specify its behavior.-->
      <asp:imagemap id="Buttons"           
        imageurl="Images/MixedImage.jpg"
        width="350"
        height="350" 
        alternatetext="Navigate buttons"
        hotspotmode=NotSet     
        onclick="ButtonsMap_Clicked"
        runat="Server">                 
        
        <asp:RectangleHotSpot
          hotspotmode="Navigate"
          NavigateUrl="http://www.contoso.com"
          alternatetext="Button 1"
          top="50"
          left="50"
          bottom="100"
          right="300">
        </asp:RectangleHotSpot>
        
        <asp:RectangleHotSpot  
          hotspotmode="Navigate"
          NavigateUrl="http://www.tailspintoys.com"
          alternatetext="Button 2"        
          top="150"
          left="50"
          bottom="200"
          right="300">          
        </asp:RectangleHotSpot>
        
        <asp:RectangleHotSpot
          hotspotmode="Navigate"
          NavigateUrl="http://www.cohowinery.com"
          alternatetext="Button 3"          
          top="250"
          left="50"
          bottom="300"
          right="300">
        </asp:RectangleHotSpot> 
        
        <asp:RectangleHotSpot 
          hotspotmode="PostBack"
          PostBackValue="Background"
          alternatetext="Background"
          top="0"
          left="0"
          bottom="350"
          right="350">
        </asp:RectangleHotSpot>      
      
      </asp:imagemap>
            
      <br />
          
      <asp:label id="Message1"
        runat="Server">
      </asp:label>                 
                 
    </form>      
  </body>
</html>

.NET Framework のセキュリティ

AspNetHostingPermission (ホスト環境での動作に必要なアクセス許可)要求値 : LinkDemand; アクセス許可値 : Minimal。
AspNetHostingPermission (ホスト環境での動作に必要なアクセス許可)要求値 : InheritanceDemand; アクセス許可値 : Minimal。

継承階層

System.Object
   System.Web.UI.Control
     System.Web.UI.WebControls.WebControl
       System.Web.UI.WebControls.Image
        System.Web.UI.WebControls.ImageMap

スレッドセーフ

この型の public static (Visual Basic では Shared) メンバはすべて、スレッドセーフです。インスタンスメンバの場合は、スレッドセーフであるとは限りません。

プラットフォーム

Windows 98, Windows 2000 SP4, Windows Server 2003, Windows XP Media Center Edition, Windows XP Professional x64 Edition, Windows XP SP2, Windows XP Starter Edition

開発プラットフォームの中には、.NET Framework によってサポートされていないバージョンがあります。サポートされているバージョンについては、「システム要件」を参照してください。

バージョン情報

.NET Framework
サポート対象 : 2.0

参照

関連項目
ImageMap メンバ
System.Web.UI.WebControls 名前空間
HotSpotMode
Click
CircleHotSpot クラス
RectangleHotSpot
PolygonHotSpot
その他の技術情報
ImageMap Web サーバーコントロール

>> 「ImageMap クラス」を含む用語の索引
ImageMap クラスのページへのリンク

ImageMap クラスとは？わかりやすく解説

ImageMap クラス

ユーザー補助

「ImageMap クラス」の関連用語


	© 2025 Microsoft.All rights reserved.

ImageMap クラスとは？ わかりやすく解説

ImageMap クラス

ユーザー補助

急上昇のことば

「ImageMap クラス」の関連用語

ImageMap クラスとは？わかりやすく解説