次の方法で共有

クリッカブルマップを作成する方法

  • [アーティクル]

download1.gif サンプル コードのダウンロード (aspnettips_ClickableMap.msi, 277 KB)

※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。

複数のクリック領域を設定した 1 つの画像のことをクリッカブルマップといいます。そのクリック領域から、別ページへのリンクを行ったりします。このようなクリッカブルマップは、HTML の <map> タグと <area> タグを使って実現できますが、ASP.NET 2.0 の ImageMap コントロールを使うと、より高機能なクリッカブルマップを作成できます。ImageMap コントロールを使うと、ほかのページに飛ぶだけでなく、自分自身へポストバックすることもできます。

次のようなページを作成してみます（図１）。このページには、1 枚の画像があり、その中の「今すぐダウンロード」というボタン部分をクリックすると、そのページにダウンロードと表示します。また、「詳細」という部分をクリックすると、別のページへジャンプします。

　図

　図 1 今回作成するページ

今回は、次の手順でクリッカブルマップのあるページを作成します。

  1. ImageMap コントロールの配置

  2. ImageMap コントロールの設定

  3. クリック領域の設定

  4. クリック時の処理を記述

  5. 実行

(1) ImageMap コントロールの配置

Web サイトのプロジェクトを新規に作成した後、まず shousai.aspx という Web ページを作成しておきます。メニューバーから [新規作成] - [ファイル] を選択し、「新しい項目の追加」ダイアログボックスで [Web フォーム] を選択します（図２）。ファイル名は、shousai.aspx にします。

Cc719205.ClickableMap_fig02(ja-jp,MSDN.10).gif

　図 2 「新しい項目の追加」ダイアログボックス

shousai.aspxでは、フォーム上に直接「詳細情報」と記述しておいてください。次に、Default.aspx に戻り、そのフォーム上に ImageMap コントロールを配置します（図３）。

　図

　図 3 ImageMap コントロール

(2) ImageMap コントロールの設定

ImageMapコントロールのプロパティを設定していきます。今回のサンプルでは、次のように指定しています。

プロパティ

設定値

HotSpotMode

PostBack

ImageUrl

~/image/MediaPlayer.jpg

HotSpotMode プロパティは、クリック領域をユーザーがクリックしたときのデフォルトの処理内容です。PostBack の場合、自分自身へのポストバックを行います。Navigate の場合は、ほかのページへリンクします。Inactive にすると、何も行われません。

(3) クリック領域の設定

ImageMap コントロール内の画像のクリック領域を設定します。

ImageMap コントロールの HotSpots プロパティで [...] ボタンを押し、「HotSpot コレクション エディタ」ダイアログボックスを表示します。

クリック領域は、円、長方形、多角形の 3 種類で定義できます。「HotSpot コレクション エディタ」で、[追加] ボタンの右側にある [▼] ボタンを押し、RectangleHotSpot (長方形) を選択すると、クリック領域が一つ作られます。今回は、2 つ RectangleHotSpot を作成してください（図４）。今回は次のようにプロパティを設定しました。それぞれのプロパティは、次のように設定します。

Cc719205.ClickableMap_fig04(ja-jp,MSDN.10).gif

　図 4 HotSpot コレクション   エディタ

ホットスポット 1 (「今すぐダウンロード」部分)

プロパティ

設定値

HotSpotMode

NotSet

PostBackValue

download

Bottom

205

Left

225

Right

365

Top

180

ホットスポッ2 (「詳細」部分)

プロパティ

設定値

HotSpotMode

Navigate

NavigateUrl

~/shousai.aspx

Bottom

230

Left

280

Right

310

Top

210

1 つ目のホットスポットでは、HotSpotMode を NotSet にしています。この場合、ImageMap コントロールで設定したデフォルトの HotSpotMode が使われます。この ImageMap コントロールの HotSpotMode は、PostBack です。PostBackValue は、ポストバックをする場合のパラメータです。

2 つ目のホットスポットでは、HotSpotMode を Navigate にし、shousai.aspx へリンクさせています。

(4) クリック時の処理を記述

今回、2 つ目のホットスポットをクリックした場合、自分自身へのポストバックが行われますが、次にそのときの処理を作成します。まず、Default.aspx に Literal コントロールを 1 つ貼り付けてください。ID は、Literal1 にします。

次に、Default.aspx.vb に次のように記述します。

Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub ImageMap1_Click(ByVal sender As Object, _
                                  ByVal e As System.Web.UI.WebControls.ImageMapEventArgs) _
                                  Handles ImageMap1.Click
        If (e.PostBackValue = "download") Then
            Literal1.Text = "ダウンロード"
        End If
    End Sub
End Class

リスト1

ImageMap コントロールの HotSpot コレクション エディタで設定した PostBackValue の値は、ImageMapEventArgs オブジェクトの PostBackValue プロパティを使って取得できます。今回は、この値が "download" のとき、Literal コントロールにテキストを設定しています。

(5) 実行

実行してみます。画像上の「今すぐダウンロード」という部分をクリックすると、同じページ上に「ダウンロード」と表示されると思います（図５）。また、「詳細」という部分をクリックすると、shousai.aspx へジャンプするはずです。

ClickableMap_fig05-1.gif Cc719205.ClickableMap_fig05-2(ja-jp,MSDN.10).gif

　図 5 実行したところ

以上のように、ASP.NET 2.0 を使えば簡単にクリッカブルマップを作成できます。ぜひ活用してみてください。