人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptを使って、GoogleMapのようなふきだしを使いたいと思っています。

ポイントとして

1:クリックすることで表示される
(マウスを離しても閉じない)
2:ふきだしには「×」など閉じるボタンがある
3:中にhtmlが自由にかける

です。

Prototype Window Classは試してみたのですが
やや動きが大胆すぎるので、
ただ出て閉じることのできるレベルのものを探しています。

無料かつ自由に使えるライブラリやサンプルがありましたら、是非ともお願いいたします。

●質問者: けんすう
●カテゴリ:インターネット ウェブ制作
✍キーワード: Class HTML JavaScript Prototype クリック
○ 状態 :キャンセル
└ 回答数 : 1/1件

▽最新の回答へ

1 ● susie-t

簡単なものですが。自作です。prototype.jsを使用してます。

(もっといいライブラリとかありそうな気はしますが)

×ボタンで消せます。メニューボックスのスタイルはid:menubox、ボタンはid:menubox_closeで指定できます。同時に複数表示はできません。

<html>
<head>
<title></title>
<style>
<!--
#menubox{
 border:solid blue 2px;
 width:100px;
 height:100px;
 background-color:yellow;
}
#menubox_close{
 float:right;
 width:20px;
 padding:0px;
 letter-spacing:0px;
}
-->
</style>
<script language="javascript" src="prototype.js" charset="utf-8"></script>
<script>
<!--
var menubox = function(html, obj, diff){
 if($('menubox') == null){
 new Insertion.Bottom(document.body,
 "<div id='menubox' style='position:absolute;'>"
 + "<button id='menubox_close' onclick='menubox.hide();'>×</button>"
 + "<div id='menubox_menu'></div>"
 + "</div>");
 }
 Element.show('menubox');
 Element.update('menubox_menu', html);
 var value = Position.cumulativeOffset(obj);
 var left = value[0];
 var top = value[1] + obj.offsetHeight;
 if(diff){
 left += (parseInt(diff.left) || 0);
 top += (parseInt(diff.top) || 0);
 }
 Element.setStyle('menubox', {'left':left, 'top':top});
}
menubox.hide = function(){
 Element.update('menubox_menu', '');
 Element.hide('menubox');
}
//-->
</script>
</head>
<body>
<span onclick="menubox('犬', this);">dog</span>
<span onclick="menubox('<b>猫<\/b>', this, {left:'20px', top:'-20px'});">cat</span>
</body>
</html>

簡単すぎますかね・・・^^;

ダミーURL http://q.hatena.ne.jp/1162981941

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ