 |
クリッカブルマップ画像 |
| |
普通、一つの絵にリンクを張ると一つのページにしか飛んでいきませんが、一つの絵の中に複数のリンクを指定することもできます。この画像はクリッカブルマップ、あるいはイメージマップといってあらかじめ座標で範囲を指定して、その範囲によってリンク先を振り分けています。
以下にサンプルを示しますがだいたいの考え方だけ分かれば結構です。 |
| |
サンプル：
考え方としてはこんな感じです。
左上の頂点を座標の起点(0,0)とします。
顔の部分をクリックすると、http://u-pageplus.so-net.ne.jpに飛ぶとしたい場合：
例えば顔の部分に円として範囲指定をします。この指定は円の中心点の座標と半径で指定します。
この範囲に対してリンクを張ります。
足の部分をクリックすると、http://www.so-net.ne.jpに飛ぶとしたい場合：
例えば足の部分に長方形として範囲指定をします。この指定は長方形の左上の頂点と右下の頂点の座標で指定します。
この範囲に対しては別のリンクを張ります。
この機能は本来、プロバイダのコンピュータの知識がないとちょっと難しかったのですが、ブラウザのバージョンアップによりクライアントサイド・クリッカブルマップという機能を用いて簡単に実現できるようになりました。
設定するとこんな感じになります。
rectは長方形を意味し、circleは円を意味します。
<html>
<head>
--ここで座標の設定とリンクの設定をして名前をつける
<map name="theMap">
<area shape="rect" coords="232, 101,
347, 240"
href="http://www.so-net.ne.jp">
<area shape="circle" coords="136, 93,
90"
href="http://U-Page+.so-net.ne.jp">
</map>
</head>
<body>
--イメージタグの中でマッピングの設定を呼びだす
<img src="sampleboy.gif" width=360 height=250
usemap="#theMap" alt="sample">
</body>
</html> |
| |
この機能を設定するのに一番ややこしいのは座標で範囲を設定することですが、ツールを利用すれば簡単にこの設定ができてしまいます。
座標測定のソフトはフリーウェアやシェアウェアとしてWeb上にございますので、お客さまの使いやすいものをご利用ください。 |
|
