2009年1月27日火曜日

AjaxとBubbleToolTips

これもweb絡みのお話。ちょっとネットでAjaxについて調べてみた。一番興味を引かれたのはアムステルダムのサッカーチームだったけど、これはちょっと領域外。問題のAjaxは一言で言うと、JavaScriptを使って、ページの再読み込みをあまりさせないで、かつ、マウスの動きに応じてボタンの色が変わったり、写真が入れ替わったりするってやつみたい。同窓会のページはcgiで再読み込みしまくってるから、Ajax風にできないかと思って少し挑戦したけど、めんどくさくなってやめちゃった。それでも何かおもしろい事できないかと思って、メニューボタンの上にマウスを持って行くと、色が変わるようにしておいた。これは色の違う画像を用意しておいて、onMouseOverで違う色の画像に置き換えて、onMouseOutで元の色の画像に戻してるだけだけどね。
 それと、大きめの集合写真の顔の辺りにマウスを持ってくると、人名を吹き出しで表示するようにしてみた。どうしたかというと、BubbleToolTipsと<area>タグを使ってみた。BubbleToolTipsは簡単に風船状の吹き出しをつけてくれるスクリプト。基本的にJavaScriptで書いてある。だけど、今回の用途にはちょっと改造が必要だった。それは<area>タグに対して作用するようにしたかったから。

 今回の作戦は、まず大きな写真を用意する(というか、大きな写真がありきだった)。
(1) 適当なwebページを作って、画像を表示させ、画像のプロパティを読み取っておく。必要なのは画像の大きさ。何ポイント×何ポイントの大きさか、が必要。
(2) 次に、その中の好きなポイント(今回は各人物の顔の中心付近)の座標を読み取る。これが一番大変な作業。今回はAcrobat (Readerじゃないやつ)の物差を使ってみた。縦と横の長さを求めておいて、左上を原点にして、各人物の顔の中心付近の座標をx, yの長さで読み取って、Excelの表にしておく。その座標を、web上の画像の縦横の長さ情報から、webの画像上の座標に変換する。
(3) その座標の情報を<area>タグを使って、画像につけておく。そのためには
<div id="names">
<img src="./xxx.jpg" alt="picture" usemap="#pictall" width="2000" height="1000">
<map name="pictall">
<area href="" title="まつ" shape=circle coords="200,300,20" alt="まつ">
<area href="" title="つぴ" shape=circle coords="250,600,20" alt="つぴ">
   ......
</map>
</div>
のように書く。<div>を使うのはBubbleToolTipsでの識別のため。今回は人物の顔なので、半径20ぐらいの円にして、中心座標を与えてみた。とりあえず<img>の中にusemap属性というのを入れておき、<map>...</map>で囲んだ範囲に<area>コマンドを書き並べる。今回は135行も書いてしまった。
(4) もともとBubbleToolTipsは<a>タグの中のtitle属性の情報を読み取って、吹き出しをつけてくれるスクリプト。BubbleToolTipsの使い方は<head>パートの中に
<script type="text/javascript" src="./BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("names")};
</script>
ってのを置いておいたぐらい(当然BubbleTooltips.jpなどのファイル必要だけど)
(5) 実はこれだけでは動かなかった。なぜかというとBubbleTooltipsは、リンクタグ<a>なんかにつけてあるtitle属性を読み取って、吹き出しをつけるソフトなので、<area>タグのtitle属性ではうまく働かなかった。しばらく放置していたのだが、今回Ajaxに挑戦してごちゃごちゃやってる時に、ふと気づいて、BubbleTooltips.jsを覗いてみた。そこで、
if(id==null) links=document.getElementsByTagName("a");
else links=document.getElementById(id).getElementsByTagName("a");
という行を発見した。どうやらこれが<a>タグを指定してるみたい。そこで、これらの行を以下のように変えてみた("a"を"area"にしてみた)。
if(id==null) links=document.getElementsByTagName("area");
else links=document.getElementById(id).getElementsByTagName("area");
するとうまくいった。意外と簡単だった。わからない時は煮詰まってしまってどうしようもなかったが、わかると簡単なのよねぇ。

0 件のコメント: