TOP　>　HP関連　>　ビルダーで画像内のリンク

ホームページビルダーでイメージマップ、クリッカブル・マップを作る方法

※下記は個人的メモです。この記事を参考にされたことに関して管理人は一切責任を負いませんので悪しからずご了承下さい。
2017/7/11 改訂　2014/7/1(火)　初版
　イメージマップ（別名クリッカブルマップ）とは画像の任意の場所をクリックすると[同じページの別の場所]または[別のページ]にジャンプできるリンク付きの画像のことです。

　ホームページビルダー をお使いならば比較的かんたんに作成できます。
また、普通の画像リンクと異なるのは「画像内の好きな場所」にリンクを「複数」付けることが可能な点です。
動作確認済みのビルダーのバージョン：　ver.19および15

※古くからある技術なので、これ以外のバージョンでもほぼ同じ操作方法だと思います
※19以降ではホームページビルダー・クラシックです。
●必要な知識：　[リンクの挿入]で「ラベルを付ける」方法をご理解されていること



●考えられる応用例
　・お店の場所、町内会の避難場所などの案内図。
　・学校・福祉施設内の教室、部屋の解説。
　・撮影した風景写真や趣味の写真をクリックしたら解説文に飛ぶ。
　・個人・会社のホームページを[一つの街]としてイメージ化して、クリックしたら各ページに移動する等。


●画像はビルダーの19および15のものが混在していますが、ほぼ同じです

1. あらかじめリンク先の項目にラベル(例. hinase)を貼っておきます
リンクのラベルを貼ります

※リンク先が複数あれば複数のラベルを貼ります

2. 地図を右クリックして[画像を編集]→[イメージマップの編集...]の順にクリック
ホームページビルダーのイメージマップの編集

●ワンポイント：設定したクリッカブル・マップが不要になったら「イメージマップの削除...」です。


▲トップへ▲

3. 下記の画面が表示されます。ここでは日生町(ひなせちょう)という地名にリンクを貼りたいので、イメージマップエディターのボタンで「日生町」を四角形で囲むように選択しました。選んだ範囲がリンクとなり、その範囲の大きさは自由です

[PR]Amazon パソコン・周辺機器ベストセラー


タップ（クリック）で拡大します
ホームページビルダーのイメージマップエディターの画面

※長方形の■にカーソルを置くことでサイズ変更や移動も可能で、マウスの先が十字なら移動、矢印ならサイズ変更です。

4. 3の長方形を追加した直後にリンク設定画面が開くので[ラベルへ]タブ→ ラベル(例 hinase)を選択します
リンクのラベルを選択します

★重要★もし間違ってこの画面を閉じても、赤い枠のチェーンマークのアイコンをクリックすれば開きます

●補足●別ページへのリンクの場合は、ラベルに関する項目を読み飛ばしのうえ、説明の４のリンク設定画面で「ラベルへ」タブではなく「ファイルへ」タブでファイル名を指定して下さい

5. リンクを複数設定したい場合は「説明の３，４」を繰り返します。すべてのリンクを設定したら、イメージマップエディターの画面の右下のOKをクリックすると、さらに下の画面が表示されます

ホームページビルダーのイメージマップエディターでリンクを設定したら確認画面が表示されます

管理人は代替テキストが不要なので「はい」を選びました


●ワンポイント：一度に全てのリンクを設定する必要はありません。一つずつリンクを追加することも可能で、その場合は説明の「２～５」を繰り返して下さい

6. その他のボタンについての説明です
イメージマップエディターのボタンです
　一度設定した範囲を再選択したい場合

イメージマップエディターのボタンです
　設定した範囲を削除したい場合


その他のボタンはとくに覚える必要はないと思いますので、ボタンの名称だけを列挙します
イメージマップエディターのボタンです
左から多角形、円形、長方形、選択、コピー、削除、編集

7. HTMLソースについての説明です
HTMLソースの<BODY>部に下記が追加されますが、特に意識する必要はありませんし、いじらない方が良いでしょう。


最後に、完成後に画像を変えたり、画像のサイズが変わった場合にはリンクの再設定が必要な場合があります。どうぞご注意下さい。
 

<MAP name="oka_map" id="oka_map">
    <AREA href="#kume" shape="rect" coords="205,129 243,147">
    <AREA href="#ochiai" shape="rect" coords="156,153 198,171">
    <AREA href="#kawakami" shape="rect" coords="57,267 99,286">
    <AREA href="#mabi" shape="rect" coords="128,311 168,330">
    <AREA href="#tamano" shape="rect" coords="230,384 262,402">
    <AREA href="#nadasaki" shape="rect" coords="204,359 248,375">
    <AREA href="#okayama" shape="rect" coords="220,290 255,319">
    <AREA href="#sanyou" shape="rect" coords="250,268 292,285">
    <AREA href="#oku" shape="rect" coords="282,295 322,313">
    <AREA href="#hinase" shape="rect" coords="336,271 378,287">
    <AREA href="#mimasaka" shape="rect" coords="305,165 336,182">
    <AREA href="#oohara" shape="rect" coords="348,101 390,121">
    <AREA href="#tsuyama" shape="rect" coords="252,117 281,136">
    <AREA href="#shouou" shape="rect" coords="286,130 324,146">
    <AREA href="#ihara" shape="rect" coords="65,318 95,341">
    <AREA href="#kasaoka" shape="rect" coords="82,357 110,381">
    <AREA href="#kurashiki" shape="rect" coords="172,322 201,347">
    <AREA href="#takahashi" shape="rect" coords="115,231 143,256">
    <AREA href="#soujya" shape="rect" coords="161,288 192,308">
    <AREA href="#yanahara" shape="rect" coords="269,172 304,188">
    <AREA href="#yakage" shape="rect" coords="99,324 138,338">
    <AREA shape="default" nohref>
  </MAP>




▲トップへ▲


TOP　>　HP関連　>　ビルダーで画像内のリンク

copyright©http://www2.oninet.ne.jp/sakigakesoft/pc/