新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

イメージマップで丸・長方形・多角形のクリッカブルエリアを作成する方法【HTML5】

2019.3.18

イメージマップで丸・長方形・多角形のクリッカブルエリアを作成する方法【HTML5】
Web制作 0 0

こちらの記事は、このような方におすすめです。

・html5のイメージマップを活用したい方
・おもに長方形以外の複雑な図形で、クリック可能なリンクボタンを作成したい方

妙高Web屋LINE@ 友だち追加

HTMLでリンクボタンを作るには、aタグでリンク先を指定して、それを含むコードをCSSなどでレイアウトしたり、成型したりしていくのが一般的です。

ただ、複雑なレイアウトの中のこの四角いエリアをクリッカブル(クリック可能)な要素にしたいという場合や、さらにはクリッカブルにしたい図形が円形や三角形などである場合というのも、ときどき発生するかもしれません。

そのような場合の対処方法として、「イメージマップを活用して、丸・長方形・多角形のクリッカブルエリアを作成する方法」をご紹介します。

この記事の目次

【結論】イメージマップで丸・長方形・多角形のクリッカブルエリアを作成する方法

まずは結論から。

こちらのコードを基本としてください。

<map name="className">
<area shape="circle" coords="x,y,r" href="page01.html">
<area shape="rect" coords="x1,y1,x2,y2" href="page02.html">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="page03.html">
</map>

順に、[shape=”circle”]というのが円形で、[shape=”rect”]は四角形、そして[shape=”poly”]が多角形です。

[coords]という属性に設定する値は、円形の場合は順に「円の中心のx座標、y座標、円の半径」です。

四角形の場合は順に「四角形の左上のx座標、y座標、四角形の右下のx座標、y座標」を示しています。

多角形の場合は、その頂点の数によって設定値の種類も変動しますが、「1つ目の頂点のx座標、y座標、2つ目の頂点のx座標、y座標、3つ目の頂点のx座標、y座標、…」と、頂点の数だけx座標とy座標の組を順に設定していきます。

そして[href]には、それぞれの図形をクリッカブルなエリア、つまりリンクボタンとする際の「リンク先URL」を設定します。

ページの先頭へ戻る

[発展]レスポンシブサイトにも対応できるプラグイン[jQuery RWD Image Maps]

さて。

上記において、座標の数値をきっちり定めるためのコードをご紹介しました。

こちらのコードを見て、

「それだと、レスポンシブサイトに対応できないんじゃないの!?」

とお考えになった方もいらっしゃるかもしれません。

でも!

「jQueryのプラグインを使えば、スマートフォン版でも希望する座標にクリッカブルなエリアを設定できるのです!」

それには、こちらのリンク先のjQueryプラグイン[jQuery RWD Image Maps]をご利用ください。

詳細な設定方法も記載されています。

ページの先頭へ戻る

地図や店内図などで「ここの図形ををクリックして別ページに…」という場合に、divタグやaタグをあーしてこうして…、という方法では大きく時間を消費してしまう場合もあります。

でも、これを使うと、複雑な図形を複雑な位置に入れてリンクボタンにすることができるほか、スマートフォンサイトでも画面の幅に応じて収縮してくれたりする効果が期待できるなど、使い勝手の良い実装方法にすることもできそうです。

選択肢として、ご参考になれば幸いです。

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ