クリッカブルマップ

クリッカブルマップをやってみました。下の画像の丸の部分がクリッカブルです。

html:

<img src="http://f.hatena.ne.jp/images/fotolife/m/miya2000/20090709/20090709195558.png" usemap="#myma1p">
<map name="mymap1">
<area shape="circle" coords="50,50,40" href="http://ja.wikipedia.org/wiki/○">
</map>

usemap="#mymap1" なんて書き方をするから id 属性でもよかろーと考えたんですが Firefox 3.5 では動かないようです。

html:

<img src="http://f.hatena.ne.jp/images/fotolife/m/miya2000/20090709/20090709195558.png" usemap="#mymap2">
<map id="mymap2">
<area shape="circle" coords="50,50,40" href="http://ja.wikipedia.org/wiki/○">
</map>

あと「ばけらの HTMLリファレンス」で

shape と coords は、クライアント側イメージマップのための属性です。HTML4.0ではAREA ではなく A を使ってクライアント側イメージマップを作ることが出来ます。この方法は AREA を使う方法に比べて互換性に優れているのですが、対応しているブラウザは少ないようです。
インライン要素 - ばけらの HTMLリファレンス

とあったので単純に A 要素に置き換えてみました。

html:

<img src="http://f.hatena.ne.jp/images/fotolife/m/miya2000/20090709/20090709195558.png" usemap="#mymap3">
<map name="mymap3">
<a shape="circle" coords="50,50,40" href="http://ja.wikipedia.org/wiki/○"></a>
</map>

Opera 10 ではとりあえず動くものの、タブ移動ができなくなってしまいました。
(はてなダイアリーでは A 要素の shape, coords 属性が削除されてしまって動きません。)

また同じく「ばけらの HTMLリファレンス」で

クライアント側イメージマップを定義します。中身はブロック要素もしくは AREA です。
AREA 要素を含むときは、AREA の shape や coords が使われます。これは HTML3.2 の時代からあった方法ですが、困ったことに AREA を理解しないブラウザには全く解釈できません。
ブロック要素を含むのは新しいやり方です。その場合、その中にはさらに A 要素が含まれていなければなりません。A 要素の shape や coords 属性がイメージマップの定義となります。この方法の賢いところは、MAP を理解しないブラウザにも理解できる A 要素を使っていることです。
これからは後者の方法を使っていきたいところですが、残念なことに A 要素の coords や shape を理解するブラウザは少ないようです。
インライン要素 - ばけらの HTMLリファレンス

とあったのですが、こんなかんじでしょうか？

html:

<map>
<div style="background-image: url('http://f.hatena.ne.jp/images/fotolife/m/miya2000/20090709/20090709195558.png'); width: 100px; height: 100px; border: black solid 1px;">
<a shape="circle" coords="50,50,40" href="http://ja.wikipedia.org/wiki/○"></a>
</div>
</map>

う、うごいてますか？
(上と同様に、はてなダイアリーでは A 要素の shape, coords 属性が削除されてしまって動きません。)

クリッカブルマップといえば「サーバサイドクリッカブルマップ」というのがあるらしいですね。
(上で私が言っているのは「クライアントサイドクリッカブルマップ」。)

サーバサイドクリッカブルマップは、どこをクリックしたらどのページにジャンプするという情報をサーバ側に保持する方法です。現在ではあまり使用することは少なくなってきましたが、地図上の移動など領域ではなく、座標に従った処理をする場合に利用されています。

<a href="xyz.cgi"><img src="map.gif" border=0 ismap></a>
上記の画像をクリックすると、画像の左上を 0, 0 とする座標情報が次の形式で CGI に渡されます。サーバ側にはこの情報を環境変数 QUERY_STRING で読み取り、座標情報に応じた処理結果を返す CGI（上記の例では xyz.cgi）を自作するなどして設置する必要があります。

smap.cgi?31,76
クリッカブルマップ

へええ。