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
RectangleHotSpot
PolygonHotSpot
- コンテナコントロールとは、ほかのコントロールの置き場所を提供するためのコントロールである。
PlaceHolder
Panel
MultiView
Content
- ユーザコントロールを利用することで、再利用可能なレイアウト部品を「.aspx」ファイルをデザインするのと同じ要領で作成できる。
以上
TOPへ