下記の画像にカーソルをあわせるとハイライトされ、ハイライトされた部分によってコメントが変わるっす。
更に、画面をクリックし、別のコメントを作成したりもできるっす。(コメントを保存するにはサーバサイドプログラムが必要だね)
予め出したいメッセージを事前に用意しておき、スクリプトを作成しておきます。JavaScriptなので作成したメッセージを動的に変更しているように見えますが、リロードすると、勿論元に戻ります。動的に変更したい場合は下記で説明するようにajaxとやらを使います。
導入までの手順
- argilla: TipmageでTipmage-1.0.jsとTipmage-1.0.cssをダウンロードする。
- <head>〜</head>内でCSSを読み込む。
<link rel="stylesheet" type="text/css" href="Tipmage-1.0.css" /> - <body>〜</body>内でjavascriptを読み込む。
<script type="text/javascript" src="Tipmage-1.0.js"></script> - IMGタグで画像ファイルを読む際にid属性をつける(今回の例だとid=mainImageにしてみた)
<img src="img01.jpg" id="mainImage" /> - 下記のようにscriptを追加する
<script type="text/javascript">
var tipmage = new Tipmage('mainImage',true);
tipmage.startup();
tipmage.setTooltip(110,6,173,337,'これが本体だね。カッコイイね');
tipmage.setTooltip(158,91,65,57,'Appleのロゴだねー<br />リンゴだな。');
tipmage.setTooltip(156,148,72,36,'Appleのロゴだねー<br>iPodって書いてあるねー');
</script>
なお、クリップした場所とか書き込んだ内容を保存するにはサーバサイドのプログラミングが必要っす。上記サイトでは
<script type="text/javascript">
tipmage.onInsert = function (identifier,posx,posy,width,height,text) {
// do something, like an AJaX call or whatever...
};
</script>
って感じでイベントを拾ってAjaxでなんとかしろと書いてある。うーむ。確かにできそーな予感だねー。
なお、上記の画像のよーに、指定範囲の中に更に指定範囲が包含されている場合は広い方の範囲を先にsetTooltipで指定しなきゃだめっぽい。早く宣言した方が下のレイヤーになるんだね。
ニコニコ動画じゃないけど、ニコニコ画像くらいはこれで作れそうかもねー。
