Tips

【HTMLサンプル】<map>と<area>要素を使ったイメージマップの作り方

この記事では <map> と <area> 要素を使ったイメージマップの作り方を紹介します。

イメージマップとはクリック可能な領域のことで、<img> や <object> 要素で表示した画像の上に「円形・四角形・多角形」のリンクを作成することができます。

このサンプルでは <img> 要素に表示した画像に3つのクリック領域を作成する方法を紹介していきます。


 

デモ(実際にクリックすることができます)

 
 

動画

準備中
 
 

解説

HTML ファイル・画像の用意

はじめに4つの HTML ファイルを用意してください。

  • index.html
  • leaf.html
  • picture.html
  • plant.html

 

index.html にイメージマップを作成し、その他の HTML ファイルは「壁掛け・葉っぱ・植木鉢」がクリックされたときにそれぞれ遷移するページです。
 
 

使用している画像は https://www.pexels.com からダウンロードしており、以下のファイル名・サイズにしています。

ファイル名image.jpg
サイズ幅:320px 高さ:458px

 
 

画像と map の用意

まずは画像と map 要素を用意します。

index.html を開いて、以下のようにコードを書いてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ImageMapサンプル</title>
</head>
<body>
    <map name="sample">
        <!-- ここにリンクを用意していきます -->
    </map>
    <img usemap="#sample" src="image.jpg" alt="Image"/>
</body>
</html>

 

画像と map を関連付けるために、map 要素の name 属性の値と img 要素の usemap 属性の値を同じにする必要があります。

また、img 要素の usemap 属性には # を付けることに注意してください。
 
 

四角形のリンクを作成する

はじめに四角形のクリック領域を画像の壁掛けの部分に作成します。


 

クリック領域の作成には <area> 要素を使います。

2行目を追加してください。

<map name="sample">
    <area shape="rect" coords="175, 70, 290, 220" href="picture.html" alt="壁掛け">
</map>

 

shape="rect"

四角形なので shape 属性に rect を指定します。
 

coords

四角形の左上の座標を「x1, y1」右下の座標を「x2, y2」として
coords="x1, y1, x2, y2"
と指定します。
 

ここでは coords="175, 70, 290, 220" と書いたので、このような四角形になっています。


 

座標の取り方について

座標の取得には、Photoshop や ペイントを使うことができます。

 
 

href

クリックしたときに picture.html に遷移するようにしています。
 

alt

画像が表示されない・表示できない場合に、代わりに表示するテキストです。HTML5 では href 属性を使用する場合に必須になります。
 
 

円形のリンクを作成する

次に円形のクリック領域を作成します。

3 行目を追加します。

<map name="sample">
    <area shape="rect" coords="175, 70, 290, 220" href="picture.html" alt="壁掛け">
    <area shape="circle" coords="100, 214, 30" href="leaf.html" alt="葉っぱ">
</map>

 
 

shape="circle"

今回は円形なので shape 属性に circleを指定しています。
 

coords

円形は中心座標を「x, y」円の半径を「r」として
coords="x, y, r"
と指定します。
 

ここでは coords="100, 214, 30" として、中心が「100, 214」の位置に半径「30」の円形のクリック領域を用意しました。


 
 

多角形のリンクを作成する

最後に多角形のクリック領域を作成します。

4 行目を追加します。

<map name="sample">
    <area shape="rect" coords="175, 70, 290, 220" href="picture.html" alt="壁掛け">
    <area shape="circle" coords="100, 214, 30" href="leaf.html" alt="葉っぱ">
    <area shape="poly" coords="50, 340, 75, 354, 75, 385, 50, 400, 25, 385, 25, 354" href="plant.html" alt="鉢植え">
</map>

 
 

shape="poly"

今回は多角形なので shape 属性に polyを指定しています。
 

coords

多角形は、各頂点の座標を「x, y」を必要な頂点の数だけ書きます。

例えば頂点が3つある三角形の場合は、このように値を指定します。

<area shape="poly" coords="x1, y1, x2, y2, x3, y3">

 

今回は六角形のクリック領域を作成したので、6つの頂点の座標を指定しています。


 
 

完成

以上で完成です!
上手く動かない場合は、以下のサンプルコードと比較してみてください。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ImageMapサンプル</title>
</head>
<body>
    <map name="sample">
        <area shape="rect" coords="175, 70, 290, 220" href="picture.html" alt="壁掛け">
        <area shape="circle" coords="100, 214, 30" href="leaf.html" alt="葉っぱ">
        <area shape="poly" coords="50, 340, 75, 354, 75, 385, 50, 400, 25, 385, 25, 354" href="plant.html" alt="鉢植え">
    </map>
    <img usemap="#sample" src="image.jpg" alt="Image"/>
</body>
</html>

 
 

まとめ

画像をリンクにする方法は、<a> や <button> 要素に backgound-image(背景画像)を使うことも考えられますが、イメージマップを使えば画像を一枚用意するだけで複数のリンクを作成することができるので、とても便利です。

イメージマップを使ってウェブサイトに隠しリンクを用意したり、クリックしてアイテムを探す簡単なゲームも作ることもできそうですね。

ぜひ色々な方法で使ってみてください????
 
 

今回使用した HTML タグのリファレンス

<area>
<img>
<map>

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA