.NET TIPS ［ASP.NET］Webフォームでクリッカブル・マップを作成するには？［2.0のみ、C#、VB］ 山田 祥寛 2006/03/10

　クリッカブル・マップとは、複数のクリック領域を定義（マッピング）した画像のこと。クリッカブル・マップを利用することで、例えば地図画像において、任意のエリアをクリックすると対応する地域の情報が表示される、というような効果も容易に実現できるわけだ。

　もちろん、クリッカブル・マップは「クライアントの環境に依存しやすい」「画像データの多用によってページ・サイズが膨らむ原因になる」などの難点もあるので、過度な乱用はお勧めできない。しかし、適切な個所で補助的な機能として利用する限りは、効果的なナビゲーションを実現できるはずだ。

　そして、このクリッカブル・マップの機能をASP.NET上で実現するのがImageMapコントロールだ。

　シンプルなクリッカブル・マップを実現するならば、HTML標準の<map>タグも利用可能だが、ImageMapコントロールでは、単にほかのページへのリンクを定義するだけではない。自分自身へのポストバック処理を記述したり、クリック可能なエリアの有効／無効をサーバ側で動的に切り替えたりといった、より＜ASP.NET的＞な操作を実現できるようになっている。

　ImageMapコントロールを使った具体的な例を見てみよう。以下は1つの画像中に含まれた3つの図形（写真）をクリックすると、それぞれに対応するメッセージがLabelコントロール上に表示されるというサンプル・アプリケーションだ。

ImageMapコントロールを利用したクリッカブル・マップ

ImageMapコントロールを使って1枚の画像データに対して3つのクリック領域を定義したサンプル・アプリケーションを実行したところ。クリック領域としては写真が表示されている円、星、四角形の3つを定義している。

ユーザーが、3つの写真のうち、いずれか1つ（この例では真ん中の写真）を選択する。 　 写真に対応するメッセージがLabelコントロール上に表示される。

　それではさっそく、具体的な構築の手順をVisual Studio 2005（以降、VS 2005）環境を前提に見ていくことにしよう。なお、クリッカブル・マップの対象となる以下のような画像（ham.jpg）をあらかじめ用意しておくものとする。

クリッカブル・マップとして利用する画像（ham.jpg）

1. Webフォームをデザインする

　フォーム・デザイナ上には、以下の画面の要領でImageMapコントロールとLabelコントロールを配置する。そして、それぞれのコントロールのプロパティを、表の内容のとおりに設定する。

コントロール プロパティ名 設定値 ImageMap (ID) im HotSpotMode PostBack HotSpots ※後述（ここではまだ未設定でよい） ImageUrl ~/ham.jpg Label (ID) lbl Text △（ブランク）

Webフォーム（C#：imageMap_cs.aspx／VB：imageMap_vb.aspx）のフォーム・レイアウト フォーム・デザイナ上に、ImageMapコントロールとLabelコントロールを配置して、それぞれのプロパティを表のように設定する。

ImageMapコントロール（IDは「im」）。 　 Labelコントロール（IDは「lbl」）。

　ImageMapコントロールのHotSpotModeプロパティは、クリッカブル・マップをユーザーがクリックしたときの動作を示すもので、以下のような値を指定できる。

設定値	概要
NotSet	無指定（デフォルト。各領域でNotSetが指定された場合にはImageMapコントロールでの設定がデフォルト値として適用される）
Inactive	何も行わない（無効）
Navigate	それぞれの領域で指定されたURL（NavigateUrlプロパティ）へリンク
PostBack	サーバへのポストバックを行う
HotSpotModeプロパティで利用可能な設定値
HotSpotModeプロパティは、クリッカブル・マップをユーザーがクリックしたときのアクションの方法を示す。

2. クリック可能な領域を定義する

　次にクリック可能な領域を定義する。これには、（先ほど説明を省略した）プロパティ・ウィンドウのHotSpotsプロパティから［HotSpot コレクション エディタ］を起動することで行う。ここでは、画像データham.jpg上の円、星、四角形に対して、それぞれ領域を設定してみよう。

　新しい領域を作成するには、［HotSpot コレクション エディタ］の［追加］ボタンの右端の▼をクリックして領域の種類をCircleHotSpot（円形）、RectangeHotSpot（四角形）、PolygonHotSpot（多角形）の中から選択する。ここでは、CircleHotSpot、PolygonHotSpot、RectangleHotSpot、の順に3つの領域を追加する。さらに追加した各領域に対して、右にあるプロパティ・ウィンドウからそれぞれ以下の表のようなプロパティ値を設定しておこう。

領域の種類 プロパティ名 設定値 CircleHotSpot AlternateText 円形 HotSpotMode NotSet PostBackValue circle Radius 65 X 60 Y 60 PolygonHotSpot AlternateText 星形 HotSpotMode NotSet PostBackValue polygon Coordinates 210,5,225,50,280,50,235,75,252,114, 207,90,165,115,178,75,136,47,190,45 RectangleHotSpot AlternateText 四角形 HotSpotMode NotSet PostBackValue rect Bottom 110 Left 300 Right 425 Top 25

HotSpotコレクション・エディタ

HotSpotコレクション・エディタを利用することで、クリッカブル・マップ上のクリック可能な領域を編集することができる。

［追加］ボタンの右端の▼をクリックして領域の種類をCircleHotSpot（円形）、RectangeHotSpot（四角形）、PolygonHotSpot（多角形）の中から選択する。ここでは、CircleHotSpot、PolygonHotSpot、RectangleHotSpot、の順に3つの領域を追加する。 　 追加した各領域に対して、それぞれ表のようなプロパティ値を設定する

　HotSpotModeプロパティにNotSet（無指定）を指定した場合、それらの領域はImageMapコントロールにおけるHotSpotModeプロパティの設定値（この場合はPostBack）を引き継ぐことになる。

　通常は、ImageMapコントロールでデフォルトのアクションを指定しておき、それぞれの領域ではデフォルトと異なる場合のみNotSet以外の値を指定するようにするとスマートだろう。なお、ImageMapコントロールとそのイメージ内の各領域の双方のHotSpotModeプロパティがNotSetである場合、ImageMapコントロールはデフォルトでそれぞれの領域に設定されたURL（NavigateUrl属性）に対してリンクしようとする。

　それぞれの領域のHotSpotModeプロパティがPostBack（またはNotSetの場合で上位のImageMapコントロールがPostBack）である場合には、PostBackValueプロパティを指定する必要がある。

　PostBackValueプロパティは、クリッカブル・マップの各領域がクリックされたタイミングでサーバ側にポストバックされる値を指定するためのものだ。ここで指定した値は、後からImageMapコントロールのClickイベントを処理する際に参照することができる。

　ちなみに、HotSpotModeプロパティの値がNavigateである場合には、PostBackValueプロパティの代わりにNavigateUrl属性（リンク先のURL）とTargetプロパティ（リンク先のフレーム）を指定する必要がある。Targetプロパティでは、ターゲットとなる任意のフレーム名のほか、「_self」（自分自身）、「_parent」（親フレーム）、「_blank」（新たなウィンドウ）、「_top」（最上位フレーム）を指定可能だ。

　最後に領域の範囲を定義する方法であるが、これは領域の種類によって異なる。それぞれの領域で指定可能なプロパティは、以下の表にまとめておこう。

領域の種類	プロパティ	概要
CircleHotSpot	Radius	半径
	X	中心のX座標
	Y	中心のY座標
PolygonHotSpot	Coordinates	各点の座標を「x1,y1,……」で指定
RectangleHotSpot	Left	左上のX座標
	Top	左上のY座標
	Right	右下のX座標
	Bottom	右下のY座標
各領域の定義に必要なプロパティ

　これで、クリッカブル・マップの表示にかかわる設定は完了だ。ここで参考までにVS 2005によって自動生成されたコードを引用しておく。

<form id="form1" runat="server">   <div>   写真をクリックすると説明が表示されます。<br />   <asp:ImageMap ID="im" runat="server" Height="113px"     ImageUrl="~/ham.jpg" Width="396px" HotSpotMode="PostBack">     <asp:CircleHotSpot AlternateText="円形"       PostBackValue="circle" Radius="65" X="60" Y="60" />     <asp:PolygonHotSpot AlternateText="星形" PostBackValue="polygon"       Coordinates="210,5,225,50,280,50,235,75,252,114,207,90,165,115,178,75,136,47,190,45" />     <asp:RectangleHotSpot AlternateText="四角形"       PostBackValue="rect" Bottom="110" Left="300" Right="425" Top="25" />   </asp:ImageMap>   <asp:Label ID="lbl" runat="server" Width="382px"></asp:Label>   </div> </form>

VS 2005が生成したWebフォームのソース・コードの抜粋（C#：imageMap_cs.aspx／VB：imageMap_vb.aspx）

3. クリック時の処理を記述する

　各領域のHotSpotModeプロパティにNavigateを設定したならば、これでクリッカブル・マップは正しく動作するはずだ。しかし、今回はHotSpotModeプロパティをPostBackに設定しているので、それぞれの領域をクリックしたタイミングでサーバ側が行うべき処理を記述する必要がある。

　本稿の例では次のようなコードを記述すればよい。

using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class imageMap_cs : System.Web.UI.Page {   protected void im_Click(object sender, ImageMapEventArgs e)   {      // ポストバックされた値によってメッセージを分岐     switch (e.PostBackValue)     {       case "circle":   // 円形がクリックされた         lbl.Text = "参ったのポーズ？ いえいえ、爆睡中です。";         break;       case "polygon":  // 星形（多角形）がクリックされた         lbl.Text = "あどけない赤ちゃんの頃のトクジロウです。";         break;       case "rect":     // 四角形がクリックされた         lbl.Text = "将来美人に育つメスハム リンリンです。";         break;       default:         // そのほか         lbl.Text = "";         break;     }   } } Partial Class imageMap_vb   Inherits System.Web.UI.Page   Protected Sub im_Click(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ImageMapEventArgs) Handles im.Click      ' ポストバックされた値によってメッセージを分岐     Select Case e.PostBackValue       Case "circle"   ' 円形がクリックされた         lbl.Text = "参ったのポーズ？ いえいえ、爆睡中です。"       Case "polygon"  ' 星形（多角形）がクリックされた         lbl.Text = "あどけない赤ちゃんの頃のトクジロウです。"       Case "rect"     ' 四角形がクリックされた         lbl.Text = "将来美人に育つメスハム リンリンです。"       Case Else       ' そのほか         lbl.Text = ""     End Select   End Sub End Class

クリッカブル・マップのクリック時の動作（上：imageMap_cs.aspx.cs／下imageMap_vb.aspx.vb）

　im_Clickイベント・ハンドラの第2パラメータであるImageMapEventArgsオブジェクト（System.Web.UI.WebControls名前空間）は、クリッカブル・マップ上で発生したClickイベントの情報を管理するためのオブジェクトだ。そのPostBackValueプロパティを介することで、先ほどそれぞれの領域で定義したPostBackValueプロパティの値を取得できる。

　ここでは単純に渡されたポストバック値に基づいてラベルに異なる値を出力しているだけであるが、もちろん、実際のアプリケーションでは渡された値を基にデータベースを検索するなどの処理が発生するはずだ。

　以上を理解できたら、Webフォーム（imageMap_cs.aspx／imageMap_vb.aspx）を実行してみよう。冒頭に挙げたような結果が得られれば成功だ。

利用可能バージョン：.NET Framework 2.0のみ カテゴリ：Webフォーム　処理対象：ImageMapコントロール 使用ライブラリ：ImageMapコントロール 使用ライブラリ：ImageMapEventArgsクラス（System.Web.UI.WebControls名前空間）

この記事と関連性の高い別の.NET TIPS ある座標や領域がコントロールの領域内に含まれているかを確認するには？ クライアント領域やウィンドウ領域の座標を取得するには？ ［ASP.NET］GridViewコントロールでハイパーリンクを表示するには？ ［ASP.NET AJAX］PopupControlコントロールで標準コントロールにポップアップ機能を追加するには？ ［ASP.NET AJAX］DropDownコントロールでSharePoint風のドロップダウン・メニューを作成するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）