frame

＜ｸﾘｯｶﾌﾞﾙ・ﾏｯﾌﾟとは＞

特定の領域にリンクを持つイラストや画像をクリッカブルマップと言う。

イメージを取り込む<img>タグの属性の一つであるusemapを使うと、右に示すように左上角を原点とするピクセル単位の座標(＊)を設定することがでる。

リンクが張れる形は、円、長方形、多角形であるが、その形、大きさ、座標を<map>および<area>タグで指定する。(下に示す例を参照のこと)

＜ｸﾘｯｶﾌﾞﾙ・ﾏｯﾌﾟを定義するコード例＞

●　<img>属性usemapで<map>のname="xxx"を指定する。
●　usemapの属性値の前に＃を記入すること。
●　<map name="xxx"><area>～</map>内<area>属性shapeおよびcoordsによりリンク領域の形、場所、大きさを指定する。

shape、coordsの指定方法
shape(形) 属性値	coords(座標) 座標値の順序	例
circle	円の中心のｘ座標、y座標、半径	<area shape="circle" coords="320,180,20" href="url"> -------------------------------------- (320,180)は円の中心座標、20は半径
rect	長方形の左上のｘ、ｙ座標、右下のｘ、座標ｙの順に	<area shape="rect" coords="271,260,387,291" href="url"> -------------------------------------- (271,260)は左上の角の座標、(387,291)は右下の座標
poly	多角形の角のｘ、ｙ座標 (右または左回りの順に)	<area shape="poly" coords="253,205,267,205,267,305,369,403,353,407,256,321" href="url"> -------------------------------------- (253,205)は六角形の左上、、(267,205)は次の角（反時計回り）、・・・・

*　座標は、Photoshop、Paint、PaintShop等の画像処理ソフトで簡単に得られる。
ペイント(ｽﾀｰﾄ⇒ｱｸｾｻﾘ⇒ﾍﾟｲﾝﾄ)を使った座標の求め方）

＜クリッカブルマップの例とそのコード＞
ここで示す例では武蔵野大学マップ(musashino_map_f.htmlに表示される)の特定箇所(４箇所)にリンクをはっている。これらのリンク先は次の表に示すフォルダーに保存されているhtmlまたはjpgファイルである。
演習にはこれらのファイルを所定のフォルダーに保存しておく必要であるが、これに関してはこの頁の最後で説明する。

フォルダー	ファイル	用途など
basicTag	aki.html
map	gingkotrees.html musashino_map.html musashino_map_f.html	演習用ファイル：座標の一部がブランク演習の確認用：完成版（以下にソースコードを示す）
frame	fr3.html
imageFiles	map418_470_1.jpg aki.jpg greenlawn250.jpg gingkotrees400.jpg bkc01.gif 1gouharu400.jpg	musashino_map.html/musashino_map_f.htmlに読み込まれる aki.htmlに読み込まれる第3フレームに直接表示される gingkotrees.htmlに読み込まれる fr3.htmlの壁紙 fr3.htmlのimg src

マップは次のファイルで定義している
musashino_map.html/musashino_map_f.html
これらのソースコードを以下に示す。

<html>
<head>
<title>musashinocampusmap</title>
</head>
<body bgcolor="#000030">
<hr>
<center>
<font size="5" color="006090">
クリッカブル・キャンパスマップ<br>
</font>
<img src="../imagefiles/map418_470_1.jpg" usemap="#campusmap">
<map name="campusmap">
<area shape="circle" coords="320,180,20" href="../basictag/aki.html">
<area shape="rect" coords="271,260,387,291" href="../frame/fr3.html">
<area shape="poly" coords="268,301,358,381,358,300" href="../imagefiles/greenlawn250.jpg">
<area shape="poly" coords="253,205,267,205,267,305,369,403,353,407,256,321" href="gingkotrees.html">
</map>
</center>
<br>
<hr>
</body>
</html>

演習にはファイルをコピーする必要がある。次の手順でファイルをコピーすること。

ファイルのコピー方法
①　予め、フォルダーを作成しておく。
②　ファイルを右クリックし、ポップアップメニューより「対象をファイルに保存」をクリック。
③　保存するフォルダーを選択し「保存」をクリック。

演習
①　１号館前の噴水のある三角形の領域（greenlawn250.jpg）の座標を求める。(座標の求め方)
②　musashino_map.htmlの次のタグの属性coords="　"に座標値を記入する。
<area shape="poly" coords="　" href="../imagefiles/greenlawn250.jpg">
③　同様に並木道(gingkotrees400.jpg)を多角形としてこの領域の座標を求める。
④　<area shape="poly" coords="" href="gingkotrees.html">に記入する。
⑤　クリッカブルマップになっているか確認。