リボン画像にイメージマップを指定する
最後に、リボン画像を表示するimg要素に、先ほど作成したイメージマップを指定すれば完了です。 以下のように記述します。
imgタグの中に、usemap属性を用いてイメージマップの名前を指定します。 その際、マップ名の先頭に半角「#」記号を付ける必要がありますので忘れないようにして下さい。
リンク付きリボン画像を作るソースのまとめ
イメージマップを作る部分からリボン画像を作る部分まで、全部をまとめたHTMLソースは以下のようになります。
<area href="ribbon.html" shape="polygon" coords="0, 111, 0, 150, 150, 0, 111, 0">
</map>
<img src="ribbon.gif" width="150" height="150" border="0" alt="りぼん" usemap="#ribbonmap" style="position: absolute; top: 0px; left: 0px;">
※上記のソースは、リボン画像のファイル名が「 ribbon.gif 」で、リボンをクリックした際の移動先が「 ribbon.html 」の場合の例です。
リボン画像の表示部分に関して詳しくは、前回の記事「ページの左上や右上に「リボン」を掛ける」をご参照下さい。
おわりに
今回は、ページの左上や右上に表示した「リボン」をクリック可能にする方法をご紹介いたしました。 ぜひご活用下さい。
なお、ナビゲーション（メニューやパンくずリストなど）の上に重ねてリボンを表示させると、（透過部分であっても）ナビゲーションが利用できなくなってしまうので注意して下さい。 リボン画像は、ナビゲーション部分に重ならないように配置しましょう。
もっと簡単にリボンを貼り付けられるサービス
これまでに解説してきた内容を「面倒くさい！」と思われるなら、色を選択して文字列を入力するだけでリボンを貼り付けられる下記のようなサービスを利用すると良いでしょう。
◇「Free Website Ribbon Generator」（英語サイト）
このサイトでは、リボンとして使いたい画像を選択して、リボンに表示させたい文字列を入力し、「Generate」ボタンをクリックするだけで、リボン画像をページ右上に貼り付けられるJavaScriptソースを生成してくれます。 そのソースを望みのHTML内に記述すれば、リボン画像を簡単に表示させられます。 （ただし、表示させる文字列に日本語は使えないようです。）
【関連記事】
