松原駅前商店会 パソコン研修会 WEB版

ホーム > PC研修会 > ホームページビルダー活用

イメージマップの作成

イメージマップ(「クリッカブルイメージ」と呼ばれることもあります。)は特定の領域をマウスでクリックすると、指定された URL にアクセスすることができるグラフィックイメージです。イメージ上の領域は、図形(多角形、円形、長方形)とその座標を定義することによって与えられます。

たとえば、地図上の任意の場所をクリックするとその場所に関する情報を表示する、といった利用方法が考えられます。イメージマップを上手に利用すれば見栄えがよく、読む人がナビゲーションしやすいページを作ることができます。

イメージマップの作成は「イメージマップ エディタ」ダイアログで行います。

1つの画像に複数のリンクを貼る

  1. 画像を選択します。
  2. メニューバーから「編集」→「かんたん編集」→「イメージマップの編集」を選択します。

    「イメージマップ エディタ」ダイアログが表示されます。

  3. ボタン、 ボタン、または ボタンをクリックします。
  4. ダイアログの画像上で、選択したい領域が入るように対角線方向へ左マウスボタンでドラッグします。

    左マウスボタンを離すと領域が確定し、リンク先を指定するための「属性」ダイアログが表示されます。

    ヒント 円形の領域を作るには、 ボタンをクリックしてから画面上をドラッグします。多角形の領域を作るには、 ボタンをクリックしてから画像上を頂点の数だけクリックします(クリックした点が多角形の頂点になります)。そして、最後の頂点をダブルクリックして終了します。

  5. 「属性」ダイアログでリンク先を指定します。
    • URL をブラウザより取得:Web ブラウザで開いている URL にリンクを設定します。
    • ファイルから:「開く」ダイアログでリンク先のファイルを選びます。

    選択したファイル名とパスや URL が[ファイル名]に表示されます。

  6. [OK]ボタンをクリックします。

    「イメージマップ エディタ」ダイアログに項目が追加されます。

  7. 「イメージマップ エディタ」ダイアログの)ボタンをクリックします。

    項目の一覧が表示されます。

  8. 各項目を選択して、[代替テキスト] に領域の意味やリンク先の説明などを入力します。

    注意 [代替テキスト] に何か文字を入れておけば、画像を表示できないWeb ブラウザでもリンク先にジャンプできるようになりますので、必ず入力してください。

  9. 上記の操作を繰り返して、1 つの画像に複数のリンクを設定します。

ヒント

2003/8/26
尚、このテキストは松原駅前商店会 PC研修会で使用されたテキストです。
ご意見・ご質問・リクエスト等は、専用掲示板にご記入下さい。  【 事業部 】
Copyright(C)  2000.-2003. Isono.biz AllRights Reserved