けとけと。の自由帳

『画像に範囲を指定してリンク』

◆ 画像に範囲を指定してリンクとは？

クリッカブルマップ というものです．
画像上に複数のリンクを設定できるので，画像をクリックする位置によってリンクの設定を変えることができます．

このタグの設定をソフトで作成できるので，リンク範囲の設定なのが面倒な方は，最後に紹介するソフトなど使ってみてください．

◆ 要素名

　IMG  ・・・ リンクを設定する画像を表示する
　MAP  ・・・ リンク範囲の管理を設定する
　AREA ・・・ リンク範囲を設定する

◆ 使用可能な属性と値

 IMG 

　　src    ・・・ 表示する画像のアドレス

　　usemap ・・・ リンク範囲の管理名（#をつけて指定）

　　alt    ・・・ 画像の代わりの文字列

　　border ・・・ 枠の太さ（０ならば枠なし）

 map 

　　name   ・・・ リンク範囲の管理名

 area 

　　href  ・・・ リンク先のアドレス

　　target・・・ リンク先のウインドウ
　　  _blank:別ウインドウで表示
　　  指定しなければ今のウインドウに表示

　　shape  ・・・ リンク範囲の形状
　　　default: 画像範囲全体
　　　rect   : 四角形
　　　circle : 円形
　　　poly   : 多角形

　　coords ・・・ リンク範囲の座標（画像の左上の座標を(0,0)）として考える
　　　shape="rect"の時，四角形の左上の座標を(X1,Y1)，右下の座標を(X2,Y2)とすると

 coords="X1,Y1,X2,Y2" 
と記述する．

　　　shape="circle"の時，円の中心点の座標を(X,Y)，円の半径を r とすると

 coords="X,Y,r" 
と記述する．

　　　shape="poly"の時，多角形の最初の点を(X1,Y1)として多角形の n 個の点の座標を設定すると

 coords="X1,Y1,X2,Y2, .... ,Xn,Yn,X1,Y1" 
と記述する．
　　　※最後に最初の点を指定することで線が繋がるので書き忘れないように．

◆ 記述

　<IMG src="表示する画像のアドレス" usemap="#リンク範囲の管理名" alt="画像の代わりの文字列" border="枠の太さ">
　<MAP name="リンク範囲の管理名">
　　<AREA href='リンク先のアドレス' alt="画像の代わりの文字列" shape="リンク範囲の形状" coords="リンク範囲の座標">
　</MAP>

◆ 使用例 （上：結果　下：記述 ※但し自動改行なしの設定で記述）

<IMG src="うしの画像のアドレス" usemap="#pic1" alt="うし" border="0">
<MAP name="pic1">
<AREA href="リンク先１" alt="TOP" target="_blank" shape="rect" coords="22,3,102,93">
<AREA href="リンク先２" alt="bbs" target="_blank" shape="circle" coords="56,121,26">
<AREA href="リンク先３" alt="日記" target="_blank" shape="poly" coords="21,146,2,168,17,176,56,159,91,178,109,178,116,174,99,146,21,146">
</MAP>
顔とおなかと足の部分でリンク先を変えています．

《クリッカブルマップ作成ソフトの紹介》
す～さんという方の『す～のお家』へ行きましょう．

そこで左のメニューから Software→List All とクリックしてスクロールして『まっぷエディタ』を探してダウンロードしましょう．

ダウンロードしたファイルは LZH という圧縮されたファイルになっております．

ファイル解凍ソフトを使い解凍して， まっぷエディタ.exe を実行しましょう．

圧縮・解凍についてはコチラの日記の周辺をご覧ください．

もしわからない方はもっとわかりやすい説明ができる人に聞いてください（＾＾；

さて，ソフトを起動させたら，メニューの ファイル→新規作成 を選択して入力画面を表示させます．

この入力画面では次の項目を設定して行きます．

■イメージファイル
　　これはＨＰに表示させたい画像指定します．
　　画像倉庫の画像を使う場合は，一度ＰＣに保存して，そのファイルを参照ボタンを押して入力すると良いでしょう．
　　画像倉庫に画像を登録するやり方と同じですね．

■実行時のファイルパス
　　これは画像ファイルの「http://」から始まるアドレスです．
　　詳しく書くとＨＰにIMGタグを使って表示するときの src= に指定しているアドレスです．

■マップ名
　　複数の領域の管理名って言ったところでしょうか．
　　例えるなら各都道府県をリンクの範囲としたとき，マップ名は日本ってところでしょうねぇ．
　　ちなみにココの指定するのは 半角英数字だけ です．

■ALT
　　画像が表示されなかったときに表示される文字です．
　　画像の上にマウスを持っていったときにも表示されます．

■枠線の太さ
　　画像の線の太さです．

■マップのサイズ指定
　　画像のサイズの指定です．
　　そのままのサイズで表示したいときは指定しなくても良いです．

上記の設定を行ったら， マップを作成 ボタンを押します．

次にリンク範囲の設定を行います．

『範囲指定のタイプ』より指定の方法を選択します．

四角形： 四角形のリンク範囲を作成します．
　　　　　画像上をマウスで押すと始点が決定します．
　　　　　押したままマウスを動かし，離した位置が終点となり，これで四角形の範囲が設定できます．
　　　　　指定した後にリンクアドレスなどを入れる画面が表示されます．
　　　　　その説明は後ほど．

　円　： 円形のリンク範囲を作成します．
　　　　　画像上をマウスで押すと中心点が決定します．
　　　　　押したままマウスを動かし，離した位置が円の大きさとなります．
　　　　　指定した後にリンクアドレスなどを入れる画面が表示されます．
　　　　　その説明は後ほど．

多角形： 多角形のリンク範囲を作成します．
　　　　　画像上をマウスでクリックするとリンクアドレスなどを入れる画面が表示されます（説明は後ほど）．
　　　　　その点が始点となり次々画面上をクリックして点を決めて行きます．
　　　　　終点は始点と同じ点をクリックしてください．

　※注意
　　　途中でキャンセルしたい場合は，今の処理を最後まで行ってからメニューの １つ戻す で元に戻してください．

『リンク情報の設定』

　　範囲を指定するときに表示されたリンクアドレスの画面の説明を行います．

ＵＲＬ： リンク先のＨＰアドレス

ＡＬＴ： リンク範囲にマウスを当てたときに表示する文字

Target： 別のウインドウひ開いてリンク先を見せる場合はチェックを入れて _blank と入力．

決定ボタンでリンクの設定は終了です．

　範囲の設定，リンク情報の設定を繰り返し複数範囲を設定できます．

これらの処理の結果は左の方にタグとして表示されます．

コピーボタンを押すとクリップボードに取り込まれますので，設定したいページに CTRL＋V なので貼り付けてください．

ジャンル別一覧