Day07-1
概要
ImageMapコントロールでクリッカブルマップを作成しよう!
このレッスンの狙い
ImageMapコントロールを利用して，クリッカブルマップを作成する。
- クリッカブルマップとは，複数のクリック可能な領域を定義した画像のこと。
- 従来はHTMLの
<map>タグなどを利用しても実現できるものだったが，
これをASP.NETアプリケーションに対応させたものがImageMapコントロールである。
- また，ユーザコントロールによる部品化についても紹介する。
ImageMapコントロールの基本的な設定
ImageMapコントロールで，利用可能なプロパティは下記の通り
| プロパティ |
概要 |
| HotSpotMode |
クリック時の動作モード |
| HotSpots |
ホットスポットの定義 |
| ImageUrl |
画像URL |
| Target |
リンクターゲット |
HotSpotModeの設定値とその概要
| 設定値 |
概要 |
| NotSet |
無指定(デフォルト) |
| Inactive |
動作しない |
| PostBack |
ポストバック処理 |
NotSetを指定した場合，Navigate(指定リンクにジャンプ)であると見なす。PostBackを指定した場合，サーバ側で独自の処理を実装することができる。
HotSpotコントロールの設定の方法
HotSpotsプロパティの設定
- プロパティウィンドウの入力欄から[…]ボタンをクリックする。
XxxxxHotSpotクラスの主なプロパティ
| クラス |
プロパティ |
概要 |
| 共通 |
AltermateText |
代替テキスト |
| 共通 |
HotSpotMode |
クリック時の動作モード(inactive|Navigate|NotSet|PostBack) |
| 共通 |
NavigateUrl |
クリック時のリンク先(HotSpotMode=Navigateの場合のみ) |
| 共通 |
PostBackValue |
ポストバック時に渡される値(HotSpotMode=PostBackの場合のみ) |
| 共通 |
Target |
リンクターゲット(HotSpotMode=Navigateの場合のみ) |
| CircleHotSpot |
Radius |
円の半径 |
| CircleHotSpot |
X |
中心の座標(X軸) |
| CircleHotSpot |
Y |
中心の座標(Y軸) |
| RectangleHotSpot |
Left |
左上のX座標 |
| RectangleHotSpot |
Top |
左上のY座標 |
| RectangleHotSpot |
Right |
右下のX座標 |
| RectangleHotSpot |
Bottom |
右下のY座標 |
| PolygonHotSpot |
Coordinates |
各点の座標(x1,y1…の形式) |
クリッカブルマップからポストバック処理を行う
Protected Sub map_Click(ByVal sender As Object,ByVal e As System.Web.UI.WebControls.ImageMapEventArgs)
Dim link As New HyperLink()
link.Target = "_blank"
Select Case e.PostBackValue //クリックされたホットスポットで定義されたポストバック値を取得
Case "10Days"
link.NavigateUrl="http://www.wings.msn.to/index.php"
link.Text="10日のレッスン形式で確実にステップアップ"
...中略...
End Select
holder.Controls.Add(link) //プレイスホルダーに追加
End Sub
解説
ImageMapEventArgsオブジェクトのPostBackValueプロパティを介することでクリックされたホットスポットで定義されたポストバック値を取得できる。PlaceHolderコントロールのAddメソッドを利用することで，PlaceHolderに動的にコントロールを配置することが可能。
- このようなコントロールをコンテナコントロールという。
コンテナコントロール
- ASP.NET3.5で利用可能なコンテナコントロールには，以下のようなものがある。
| コントロール |
概要 |
| Panel |
コントロールを配置可能なコンテナ(スタイル定義が可能) |
| PanelHolder |
コントロールを配置可能なコンテナ(スタイル定義は不可) |
| ContentPlaceHolder/Content |
マスタページで使用するコンテンツ領域を定義 |
| MultiView/View |
複数のビューを管理するコンテナと個々のビュー |
| Wizard |
ウィザード形式のコンテナ |
ユーザコントロール
- 一言で言うなら「断片的なWebフォーム」である。
- レイアウト部品をカスタマイズして部品化できる。
使用方法
- ユーザコントロールは作成が終了したら、ソリューションエクスプローラから[.ascx]ファイルをドラッグ＆ドロップして、貼り付けることが可能。
<%@ Page Language="VB" ...%>
<%@ Register Src="ImageMap.ascx" TagName="ImageMap"
TagPrefix="uc1" %>
...中略...
<uc1:ImageMap ID="map" runat="server" />
解説
@Registerディレクティヴで、ユーザコントロールを「.aspx」ファイルに登録する。
-
Src属性で、「.ascx」ファイルのパスを設定する。TagPrefix/TagName属性で、接頭辞、タグ名を追加する。
- タグ名:
ImageMap 接頭辞: uc1、なのでコントロールの呼び出しは、<uc1:ImageMap ~>のようにする。
アプリケーション共通のページ設定を定義する
- 個々のページでいちいち
@importと@Registerディレクティヴで宣言せずに、web.configで登録しておくことができる。
<pages>
<controls>
<add tagPrefix="My" tagName="TagName"
src="~/Day09/MyControl.ascx" />
...中略...
</controls>
<namespaces>
<add namespace="System.IO" />
...中略...
</namespaces>
</pages>
解説
<controls>-<add>要素で@Registerディレクティブを追加できる。<namespaces>-<add>要素で@Importディレクティブを追加できる。
まとめ
ImageMapコントロールを利用することで、ASP.NETアプリケーションから操作可能なクリッカブルマップを作成することができる。- クリッカブルマップのホットスポットを定義するのは、
XxxxxHotSpotクラスの役割である。
XxxxxHotSpotクラスには、スポットの形状に下記三つがある。
CircleHotSpot
RectangleHotSpotPolygonHotSpot
- コンテナコントロールとは、ほかのコントロールの置き場所を提供するためのコントロールである。
PlaceHolderPanelMultiViewContent
- ユーザコントロールを利用することで、再利用可能なレイアウト部品を「.aspx」ファイルをデザインするのと同じ要領で作成できる。
以上
TOPへ