No:009           質    問                       
イメージマップでのリンク

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

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

                   回    答             
●ここでは、1画像から3つのリンクを設定しています。               
  長方形で雪山のあたり:JC21SP−website
  円形でお店のあたり:杜のみつばち21-website
  多角形で桜のあたり:HP作成勉強会-website    の3つにリンクを設定しています。
 


●操作手順
1.画像を選択します。
2.かんたんナビバーの [画像の効果] ボタンをクリックし、表示されるメニューから
「イメージマップの編集」を選択します。 「イメージマップ エディタ」ダイアログが表示されます。
 3.領域の設定

長方形ボタン、 円形ボタン、または多角形 ボタンから1つを選択、クリックします。
長方形をクリックし、雪山のあたりを選択しました。

画像上で、選択したい領域が入るように対角線方向へ左マウス ボタンでドラッグします。
左マウス ボタンを離すと領域が確定し、リンク先を指定するための「属性」ダイアログが表示されます。
  
  キャンセルします。リンクは後で設定
  ・・雪山あたりに長方形があります。
・下の欄の長方形をクリック
・代替テキストにJC21SP-websiteと入力
 同様に、円形、多角形の作業を行います。
  円形をクリック、代替テキストを入力
 
  多角形をクリック、代替テキストを入力
  
*ヒント
円形の領域を作るには、 ボタンをクリックして、画面上をドラッグします。
多角形の領域を作るには、 ボタンをクリックしてから画像上を頂点の数だけクリックします (クリックした点が多角形の頂点になります)。そして、最後の頂点をダブルクリックして終了します。
 これで、3つの領域を設定しました。
4.3つの領域にリンク設定
 A:HP作成勉強会のサイトにリンク
  「イメージマップ エディタ」ダイアログの状態で
 ・下の欄から多角形をクリックし、リンクのマークをクリック
 ・リンク先を指定するための「属性」ダイアログが表示されます。
  ファイル>参照ボタン>index.html を選択。 
 
  OKを押す。 「イメージマップ エディタ」ダイアログに戻ります。
 B:JC21SPのサイトにリンク
  「イメージマップ エディタ」ダイアログの状態で
 ・下の欄から長方形をクリックし、リンクのマークをクリック
 ・リンク先を指定するための「属性」ダイアログが表示されます。
  URLの欄に、URLを入力する。 
  ターゲット>新しいウインドウを選択(任意です)
 
  OKを押す。 「イメージマップ エディタ」ダイアログに戻ります。
 C:杜のみつばち21のサイトにリンク
  「イメージマップ エディタ」ダイアログの状態で
 ・下の欄から円形をクリックし、リンクのマークをクリック
 ・リンク先を指定するための「属性」ダイアログが表示されます。
  URLの欄に、URLを入力する。 
  ターゲット>新しいウインドウを選択(任意です)
 
  OKを押す。 「イメージマップ エディタ」ダイアログに戻ります。
 
下の欄のURL欄に3つのURLが登録されていることを確認する。
 終了するには、「イメージマップ エディタ」ダイアログでOKを押します。
 追記:
リンク先を変更するには、「イメージマップ エディタ」ダイアログで目的の項目をクリックし、 ボタンをクリックすると、リンク先を変更するための「属性」ダイアログが表示されます。「属性」ダイアログに別のリンク先を指定してください。
リンクを解除するには、「イメージマップ エディタ」ダイアログで目的の項目をクリックし、 ボタンをクリックすると、その項目に対応する領域が消えて、リンクが解除されます。
(完)
  
Q&A一覧に戻る

Copyright (C)  JC21シニアプロジェクト All Right-Reserved
     
Q&A一覧に戻る