ホームページを作る人のネタ帳

画像にメッセージを埋め込むflickr見たいな機能のJavaScript

JavaScriptサンプル

画像に領域を作成して、メッセージを残せるようにするJavaScript。
ダブルクリックすると領域を作成し、ツールチップを表示する。

そこにメッセージを残せばその領域にメッセージが表示される仕組み。
ちょっと面白いものが簡単に導入できるかもしれないですね。

jsは以下に


サンプルは以下です。
Tipmage

表示の方法は以下。

<img src="image.jpg" id="mainImage" />

<script type="text/javascript">
var tipmage = new Tipmage('mainImage', true);
tipmage.startup();
tipmage.setTooltip(150,80,40,30,'I've been up here! Ha ha! ;)');
tipmage.setTooltip(200,185,50,20,'Where is Wally?');
</script>

こんな感じで設置できるらしい。

どうやらこちらに高度な設定方法が書いてある。

ただ、説明を見るとデータベースにアクセスし、永続的なデータを残すうんたらと言うのを見たんですが、JavaScriptも英語もダメな私はよくわかりませんでした。

調べる時間も無いのでご紹介だけ・・・。
役立たずですいません。

それではまた。
@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 2

There are no comments yet.

smkn  

はじめまして

yamadaさん、いつもホントに楽しみに拝見しております!
いつも色々と参考になる事を書いてくださっているので、毎日のように巡回しております。

ところで、この記事でご紹介なさった、この「tipmage」。拝見してからあまりに興味が湧き上がって仕方がなかったので、どうにかうまく実用化できんもんかと思い某SNSにて相談をしたところ、ある方が好意により下記サイトにてサンプルコードを書いてくださいました。

http://code.nanigac.com/source/view/589

このサイトは「codeなにがし」という、汎用型ソースコード・ノウハウ共有サイトだそうで、こちらにサンプルコードを掲載させていただいております。

具体的には、この「tipmage」にphpとMySQLを使って「ニコニコ画像」のようなものを作ろうというイメージです。

もし良かったらご覧になってください!もしバグや誤記等を発見なされた場合は、お気軽に書き換えちゃってください(笑)

それでは、これからも楽しみにしてます!梅雨も明け暑さの厳しい季節となりますが、あまり無理をなさらないようにしてくださいね。

2008/07/20 (Sun) 00:47

Yamada  

はじめまして

smknさんはじめまして。

codeなにがしみました~。
サンプル良いですね!

色々なものを共有してコメントというサービスが構築できそうですね。
ありがとうございました。

あと、北海道は梅雨がなくて、きもちのいい日が続いていますよ(笑

2008/07/21 (Mon) 01:31

Leave a reply