3.3 画像にリンクを指定

リンクは、文字だけでなく、画像にも指定することができます。画像にリンクを指定する場合には、<a href=”リンク先”><img src=” 画像名“></a>のように記述し、リンクを指定したい画像を<a>タグで囲みます。
では、先ほど作成した[link2.html]のソースコードに少し記述を加えて、画像にリンクを指定する方法を学びましょう。

画像にリンクを指定

1. 準備

[link2.html]をテキストエディタで開き、[link3.html]という名前で保存してください。フォルダ内の構成は以下のようになります。

図 3.3.1-1

2. HTMLファイルのソースコードの記述

続いて、[link3.html]のソースコードに、以下のように記述を追加してください。

①ソース・フォルダー :webpage/ch03
②ファイル名     :link3.html

➢ link3.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>リンクの設定</title>
    </head>
    <body>
        <h1>ここはリンク練習ページです。</h1>
        <img src="../img/cat.jpg" alt="猫">
        <p><a href="link/imgtest.html">【imgtest.htmlへの相対リンク】</a></p>

        <p><a href="http://www.google.co.jp"><img src="../img/cat.jpg" alt="猫"></a></p>
        <p><a href="http://www.google.co.jp">【Googleへの絶対リンク】</a></p>
    </body>
</html>

<a href=”http://www.google.co.jp”>の後に、<img src=”cat.jpg” alt=” “>という記述を追加しました。このように、画像にリンクを設定するには、画像である<img>タグを、<a>タグで囲みます。

3. ブラウザでリンクを確認

ブラウザで確認しましょう。

Google」へ絶対リンク】という文字の左側に、猫の画像が追加されました。この画像にはリンクが設定されていますので、クリックすると、Googleのホームページへリンクします。

図 3.3.1-2

インターネット上の多くのWEBページでは、画像にリンクが設定されています。画像にリンクを指定する方法を、しっかりと理解しておきましょう。