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

リボン部分だけをクリック可能にする(2ページ目)

ウェブページの左上端や右上端に表示させた「リボン」を、クリックできるように作り替えてみましょう。透過色部分は除いて、リボンのある部分だけをクリック可能にする方法をご紹介いたします。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

リボンの座標を指定する

イメージマップを使うと、1枚の画像全体ではなく、画像の中で指定した範囲だけをリンクにできます。
リボン部分だけをリンクにした例は、下記の通りです。マウスを載せてみて下さい。リボンの存在する箇所だけがクリック可能になっていることが分かります。

リボン赤(リボン部分だけクリック可能)   リボン赤(リボン部分だけクリック可能)

クリック可能にする範囲は、画像中の座標を列挙することで指定します。 この記事で使用しているリボン画像は、下記のような座標の範囲内にあります。

リボンの各座標(ペイントで表示させた例)
▲リボンの各座標(ペイントで表示させた例)

座標は、Windowsに付属の「ペイント」でも上図のように調べられます。(マウスを画像内の任意の位置に移動させると、そこの座標がステータスバーに表示されます。)
これら4つの座標をすべて列挙することで、その座標に囲まれた内側だけをリンクにすることができます。

イメージマップを記述する

座標が分かったら、イメージマップを作るHTMLソースを記述しましょう。
イメージマップは、map要素と area要素を使って下記のように記述します。

<map name="ribbonmap">
<area href="ribbon.html" shape="polygon" coords="0, 111, 0, 150, 150, 0, 111, 0">
</map>

map要素(<map ...>~</map>)で、1つのイメージマップを作成します。 map要素の中には、リンクにする範囲を指定するarea要素を記述します。area要素は空要素なので終了タグはありません。

■map要素

name属性の値に、マップ名を指定します。上記では「 ribbonmap 」としていますが、何でも構いません。
複数のイメージマップを用意する場合は、それぞれで名称を変えて下さい。

■area要素

リンクにする範囲や、リンク先などを指定します。

  • href属性: リンク先のURL
  • shape属性: 範囲の形状(円=circle/四角形=rect/多角形=polygon)
  • coords属性: 座標

上記の例では、href属性に「 ribbon.html 」と指定しているので、リボンをクリックするとribbon.htmlページに移動します。 ファイル名だけでなく「 http:// 」から記述しても構いません。a要素でリンクを作る場合と同様です。

リボン図形の頂点は4つですが、正方形や長方形ではないのでshape属性の値には「多角形(polygon)」を指定します。 そして座標は、以下のようにして記述します。

coords="X座標1, Y座標1, X座標2, Y座標2, X座標3, Y座標3, ……"

このように、「X座標 , Y座標」のセットを頂点の数だけ列挙します。例えば以下のように。
※この記述方法は、shape属性に値「polygon」を指定した場合のみの方法です。

coords="0, 111, 0, 150, 150, 0, 111, 0"

以上で、リボン部分をリンクにするイメージマップの作成ができました。
あとは、リボン画像を表示させるHTMLに、このイメージマップを参照するよう記述を追加するだけです。

リボン画像にイメージマップを指定する方法へ >>

  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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