ホームページ作り−クリッカブルマップ
クリッカブルマップの作り方
画像の内部に複数のリンクが張ってあるものを見かけることがあります。 これをクリッカブルマップと言います。 例えば下の画像には、INDEXとBACKという２箇所の文字の周りに別々のリンクを張っています。
クリッカブルマップの作り方は少し複雑です。
まずはツールボタンの画像
を押してイメージフォームを出します。
そして、参照ボタン「…」から元の画像を選択します。
そして中ぐらいにあるmapにするにチェックを入れ、
マップ名を記入してＯＫを押します。
上図のようにファイル、マップ名を指定すると下のようなタグが入力されます。
<img src="img/map.jpg" （中略） usemap="#maptest"> <map name="maptest"> </map>
次に<map>〜</map>の間にカーソルを置き、ツールボタンの画像
のドロップダウンメニューからArea作成を選択します。
Map Helperが起動します。 まずは画像読み込みボタンを押して、マップ画像を表示します。
次にArea形状を選択します。 矩形・多角形・円形・defaultの４種類ありますが、 今回は「矩形」を選択します。 リンクを張りたい位置の左上→右下の順にクリックします。 選択範囲が反転表示されます。
選択範囲がうまくいかなかった場合は、 やり直しボタンを押して再び選択し直します。 満足ならば、登録ボタンを押します。
登録ボタンを押すと、ファイルを選択するダイアログが出ます。 リンクしたいファイルを選択してＯＫを押します。 Map Helper右下の枠に、作成されたエリアコードが表示されます（下図）。
別のエリアを選択したい場合は、またArea形状→範囲指定→登録を繰り返します。 全てのエリアを選択し終えたら、Area挿入ボタンを押します。 <map>〜</map>の間に、エリアタグが挿入されます。 altには説明文を付け足しておきましょう。
<map name="maptest"> <area shape="rect" coords="74,27,213,75" alt="" href="../index.html"> <area shape="rect" coords="74,109,212,160" alt="" href="6.html"> </map>
因みに矩形以外の選択方法ですが、 「多角形」は各頂点を順に、 「円形」は中心→円周上の１点をクリックしていきます。
defaultは、エリア指定された以外の場所のことです。 defaultを選択した場合は、すぐに登録ボタンを押してリンク先を設定します。
「矩形」の選択は左上→右下の順。 「多角形」の選択は、各頂点を順にクリック。 「円形」の選択は、中心→円周上の１点。 「default」は範囲指定せず、すぐ登録ボタンを押す。