それと、大きめの集合写真の顔の辺りにマウスを持ってくると、人名を吹き出しで表示するようにしてみた。どうしたかというと、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 件のコメント:
コメントを投稿