画像へのリンク設定

リンクを設定する場合はa要素のコンテンツの部分に記述されたテキストをクリックするとリンク先へ移動しますが、コンテンツにはテキストだけではなく画像を表すimg要素を記述することもできます。

img要素に対してリンクを設定する場合は次のように記述します。

<a href="リンク先を表すURI"><img src="画像ファイル" /></a>

※なお画像ファイルにはalt属性が必須です。画像ファイルの詳細については「画像の表示」を参照して下さい。

具体的には次のように記述します。

<a href="index.html"><img src="home.png" alt="トップへ戻る" /></a>

この場合は表示された画像をクリックするとリンク先に設定された「index.html」へ移動します。

サンプル

では実際に試してみます。今回は「index.html」ファイルを次のように記述しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>お出かけ日記</title>
  </head>
  <body>
    <h1>お出かけ日記</h1>

    <p>
    外出した時の記録を残して行きます。
    </p>

    <p>
    <a href="diary/zoo.html"><img src="img/lion_s.png" alt="動物園へ" /></a>
    </p>

  </body>
</html>

では「index.html」ファイルをブラウザで表示させてみます。

p6-1

表示された画像にはリンクが設定されています。画像をクリックすると画像に設定されたリンク先へ移動します。

p6-2

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。