1枚の画像に複数のリンクを貼る事をクリッカブルマップと言います。
下は画像の中に4つのリンクを貼っています。
<img src="image/map.gif" alt="マップ" usemap="#map" border="0">
<map name="map">
<area shape="rect" coords="15,15,142,60," alt="リンク先の説明" href="URL">
<area shape="circle" coords="215,39,27," alt="リンク先の説明" href="URL">
<area shape="polygon" coords="45,128,97,160,70,100," alt="リンク先の説明" href="URL">
<area shape="rect" coords="125,118,225,165," alt="リンク先の説明" href="URL">
</map>
・ マップにする <img> に usemap="#マップの名前" を入れる。
・ <map> の name="名前" に <img> に入れた名前を入れる。
・ <area> でリンクする範囲を決める。alt属性も入れる。
リンクの形は 四角形・円形・多角形 の3種類有ります。
四角形 shape="rect" coords="左上横軸,左上縦軸,右下横軸,右下縦軸,"
四角形は2点の位置を決める事で作れます。
円形 shape="circle" coords="円中心の横軸,円中心の縦軸,円の半径,"
円形は中心1点の位置と、円の半径を決める事で作れます。
多角形 shape="polygon" coords="横軸,縦軸,横軸,縦軸,横軸,縦軸,
多角形は、角のなる点を3つ以上それぞれ決めていきます。
サンプルとしてこちらで用意した上のクリッカブルマップは、悪い例になります。
画像を見ただけではリンクと気がつかないし、行き先もマウスを乗せないと分かりません。
クリッカブルマップは上手く作らないと訪問者に嫌われます。
ブラウザのアドレスの部分やお気に入り登録した時に、作ったアイコンを表示させる事が出来ます。
IEでは認識したりしなかったりと不安定なものですが、ネットスケープではアドレスなどにしっかりアイコンが表示されます。
例えば Challenge HP のトップページをお気に入りに登録すると、
この画像が表示されると思います。
もし表示されないとしたら、既にお気に入りに登録していたか、またはPCの環境がファビコンを無視しているなどでしょう。
ファビコンはアイコンなので、アイコンを作るソフトやBMP画像をアイコンに変換するソフトが必要になります。
自分の場合はWindows付属のペイントで16px×16pxの画像を描いて、それをアイコンに変換するソフトを使いました。
また名前は favicon にした方が良いと思います。
Be! to I...ドラッグ&ドロップでBMPなどの画像ファイルをお好きな設定でアイコンにします。
白昼夢〜CloudCastle〜 DL Square → OnlineSoft と進みます。
ファビコンのHTMLへの取り込みは link タグで、<head> 〜 </head> の間に書き込みます。
<link rel="SHORTCUT ICON" href="http://www.est.hi-ho.ne.jp/gaia/hp/favicon.icn">
ファビコンについてはファビコンで検索すれば詳しいサイトが幾つもあります。またアイコンを作成するソフトもベクターなどで検索すれば
たくさん出てくると思います。
ホームページ作成 Q&A でたまに回答してたりするのですけど、
時々面白い話が舞い込みます。今回はその1つの<fieldset> <legend>の事例についてちょっと書いてみます。
<fieldset> と <legend> は本来フォームのグループ化のためにある要素なのですけど、それほど多くは利用されていません。
しかし <fieldset> と <legend> を引用などに用いる方がいるのですが、それが今後メジャーな使い方になりそうな気配さえあったりします?
<fieldset style="padding:10px;width:150px">
<legend>パソコン</legend>
・ <a href="*****.html">ソニーバイオPC</a><br>
・ <a href="*****.html">ソーテックPC</a>
</fieldset>
上はリンクをグループ化してみました。このような表示はテーブルを使わないと出来ないのですが、<fieldset> と <legend>
で簡単に出来てしまいます。ただし本来の使い方ではないのでそれによって問題があったとしても自己責任ですね。
ブラウザによっては正しく表示できない可能性もある訳ですし。
で、Challenge HP でこれを紹介するかどうか悩んだのですけど、NN7とオペラ7でもIEとほぼ同じように表示できるので紹介してみました。
本来の目的とは違う使い方をHTMLではよくある事なのですが、利便性の高いものはそれはそれで仕方ないですね。