ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

イメージマップの作り方 !HTMLで1画像内に複数リンクを設定

イメージマップの作り方をご紹介。1枚の画像内部に複数個のリンクを設定できるイメージマップ。画像1つを丸ごとリンクにするのではなく、画像内の一部分だけをリンクにしたり、画像の中の座標ごとに移動先の異なる複数のリンクを作ったりできます。HTMLのmap要素とarea要素を使って、画像内を円形や矩形など自由な形で区切るだけです。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

イメージマップとは? 座標を指定して画像の一部分だけをリンクにできる

画像1枚をまるごとリンクにするのではなく、画像の一部分だけをリンクにしたいと思ったことはありませんか? また、1枚の画像のうち、場所によってリンク先を変えたい(=1画像内に複数のリンク先を設定したい)と思ったことはないでしょうか?

HTMLのイメージマップ(クリッカブルマップ)という仕組みを使うと、座標を指定してリンク範囲を限定し、1画像内に複数のリンク先を簡単に設定できます。
 
イメージマップを使えば、1枚の画像を座標で区切って複数個のリンクを設定できる

イメージマップを使えば、1枚の画像を座標で区切って複数個のリンクを設定できる


例えば、下記に掲載した1枚の画像を見て下さい。家と木のイラストです。この画像にはイメージマップの記述方法を使って、木の実・扉・窓の部分(合計12カ所)だけにリンクを設定しています。試しに画像の上をいろいろクリックしてみて下さい。それぞれ異なるページに飛びます。

ウェブ作成ソフト Microsoft Expression Web が無料化 Web上で使えるスペース(空白文字)いろいろ 基本認証でアクセス制限をかける方法 画像上の自由な位置に文字を重ねる方法 スタイルシートの class と id の使い分け 複数の画像がふわっと切り替わるスライドショーを作る 移転先へ自動的に移動(リダイレクト)させる 画像を使わずにCSSだけで角を丸くする方法 ウインドウ幅に合わせて画像サイズを変化させる方法 複数サイズでのファビコンの作り方と設置方法 .htaccessファイルの書き方と設置方法 PC版とスマートフォン版サイトを自動振り分けする方法

イメージマップサンプル


イメージマップでは、リンク範囲の形状は自由に設定できます。上記の例なら、扉や窓は四角形、木の実は円形、家の上側にある窓は五角形です。このように、四角や丸だけではなく多角形でも、その形に合うように領域を限定してリンクにできます。多角形は、正多角形に限らず複雑な形状も指定可能ですから、様々な図柄にぴったり合わせたリンクを作ることができます。
 

イメージマップはHTMLだけで作成でき、CSSやスクリプトは不要

画像を掲載するimg要素と、領域を指定するmap要素+area要素で実現

画像を掲載するimg要素と、領域を指定するmap要素+area要素で実現

このイメージマップを作るには、スクリプトやCSSは一切不要です。HTMLのimg要素・map要素・area要素の3要素を記述するだけで作れます。具体的な記述方法は次のページでご紹介しますが、記述方法の概要は以下の通りで、とても簡単なものです。
 
  • 画像の掲載には、img要素を使います。
  • 画像内のどの部分をどこにリンクしたいかという座標(領域)は、map要素とarea要素を使って記述します。

 
イメージマップは、かなり古いブラウザでも使える
このイメージマップは、1枚の画像の好きな部分だけをリンクにでき、1画像内に複数のリンク先を設定することもできる便利な仕組みです。CSSもスクリプトを使わない上、IE6などのかなり古いブラウザでも表示できますので、気軽に使えるでしょう。

ただし、何らかの事情で画像が表示されなかった場合にはリンクが利用できなくなるため、別途テキストリンクを掲載しておくなどの対策が必要です。詳しくは本記事の最後にご紹介いたします。

 
それでは次のページから、イメージマップの作り方を見ていきましょう。
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます