画像の表示その2

６．枠線の設定

枠線を設定するにはimg要素にスタイルシートの「border」プロパティで指定します。

<img src="画像URI" alt="代替テキスト" style="border:線の太さ 色　線の種類　;" >

    <h1>ライオン</h1>

    <p>
    ライオンの画像に枠線を設定してみます。
    </p>

    <p>
    <img src="../img/lion.png" alt="ライオン" style="border: 1px #000 solid;">
    <img src="../img/lion.png" alt="ライオン" style="border: 5px #f00 dotted;">
    <img src="../img/lion.png" alt="ライオン" style="border: 15px #00ff7f dashed ;">
    </p>

ブラウザで開く

７．イメージマップ

イメージマップとは、1つの画像内に複数のリンク先を設定できる機能のことです。img要素で画像を呼び込み、map要素でマップを定義し、area要素でリンク領域を設定します。今回は「Microsoft Expression Web 4」の「ホットスポット」機能を使った。

  1. リンク先となる3つのページを作成し、ファイル名をそれぞれgazo_maru.html、gazo_takaku.html、gazo_sikaku.htmlとしてtextホルダーに保存します。
  2. 新規ページを作成し、ファイル名をgazo_map.htmlとしてtextホルダーに保存します。
  3. h1要素「イメージマップ」、その直下のp要素に「画像の中の図形をクリックしてください。」を挿入します。
  4. 画像map.pngを取り込みます。
  5. 「画像ツールバー」を表示させます。
  6. 画面を「デザイン」ビューまたは「分割」ビューに切り替え、画像をクリックします。
  7. 画像ツールバーの「円形のホットスポット」をクリックします。
  8. マウスポインタを画像に移動すると鉛筆の形に変更されるので、丸図形の中心部からドラッグしてリンクする範囲を設定します。
  9. マウスボタンを離すと、「ハイパーリンクの挿入」ダイアログボックスが表示されるので、「ヒント設定」ボタンをクリックします。
  10. 「ハイパーリンクのヒントの設定」ダイアログボックスで、「ヒントのテキスト」ボックスにマウスに触れると表示するテキストを入力して［OK］ボタンをクリックします。ここでは「丸ページへ」とします。
  11. 「ハイパーリンクの編集」ダイアログボックスに戻るので、リンク先を指定します。ここでは「gazo_maru.html」を選択して「OK」ボタンをクリックします。
  12. 画像ツールバーの「多角形のホットスポット」をクリックします。
  13. マウスポインタを画像に移動すると鉛筆の形に変更されるので、５角形頂点を順次クリックしてリンクする範囲を設定します。
  14. 出発点を再度クリックすると「ハイパーリンクの挿入」ダイアログボックスが表示されるので、上記と同様に「ヒントのテキスト」と「リンク先」を指定します。ここではそれぞれ「多角形ページへ」、「gazo_takaku.html」とします。
  15. 画像ツールバーの「矩形のホットスポット」をクリックします。
  16. マウスポインタを画像に移動すると鉛筆の形に変更されるので、四角形の左上頂点から右下頂点へドラッグしてリンクする範囲を設定します。
  17. マウスボタンを離すと、「ハイパーリンクの挿入」ダイアログボックスが表示されるので、上記と同様に「ヒントのテキスト」と「リンク先」を指定します。ここではそれぞれ「四角形ページへ」、「gazo_sikaku.html」とします。
  18. トップページへ戻るリンクを設定します。
  19. 保存し、ブラウザで確認します。
  20. ページ上部の「gazo_sikaku.html」右クリックし、「作業中のファイルを”***に”パブリッシュ」をクリックして転送します（***は個人名）。