MopTip 2.2

MopTipは同ページ内のボックスレベル要素(divやpなど)やインライン要素(spanなど)をツールチップとして表示することができるjqueryプラグインです。

画面上のポジションにより、自動的に形状が変化します。

マウスオーバーで表示、マウスアウトで閉じる'overOut'、マウスオーバーで表示、クローズボタンクリックで閉じる'overClick'の2種類があります。

名称
MopTip 2.2
配布元
MopStudio
必要なモジュール
jquery-1.3.2
jquery.pngFix-1.2
動作確認済みブラウザ
Mac:Firefox 3.5.7, Safari 4.0.4, Google Chrome, Opera 10.10
Win:IE 7, 8, Firefox 3.5.7, Safari 4.0.4, Google Chrome, Opera 10.10, IE 6(IETester)
ライセンス
MIT License

デモ

四神(しじん)は、中国・朝鮮・日本で伝統的に、天の四方の方角を司る霊獣である。四獣(しじゅう)、四象(ししよう)、四霊(しれい)ともいう。
東の青竜(せいりゅう)・南の朱雀(すざく)・西の白虎(びゃっこ)・北の玄武(げんぶ)である。五行説にも中央に黄竜を加え数を合わせた上で取り入れられている。

青竜
青竜(せいりゅう、せいりょう、拼音: qīnglóng)は、四神(四霊・四象)の1つで四竜の1つである竜。東方青竜。蒼竜ともいう。
その名前から青色をしていると受け取られることが多いが、「青」の原義は青山(せいざん)・青林(せいりん)のように緑色植物の色であり、本来は緑色をしているとされる。
東方を守護する。長い舌を出した竜の形とされる。青は五行説では東方の色とされる。また、青竜の季節は春とされている。
朱雀
朱雀(すざく・しゅじゃく、拼音: zhūquè チューチュエ)とは、中国の伝説上の神獣(神鳥)で、四神(四獣・四象)・五獣の一つ。南方を守護する。翼を広げた鳳凰状の鳥形で表される。朱は赤であり、五行説では南方の色とされる。鳳凰、不死鳥と同一視されることがあり、インド神話に登場するガルーダとの類似も指摘されている。また、フェニックスとも間違われる事もある。
白虎
白虎(びゃっこ、拼音: báihŭ パイフー)は、中国の伝説上の神獣で、西方を守護する。西方白虎。
細長い体をした白い虎の形をしている。また、四神の中では最も高齢の存在であるとも言われている。(逆に、最も若いという説もある)
白は、五行説では西方の色とされる。
玄武
玄武(げんぶ、拼音: xuánwŭ ショワンウー)は、中国の神。北の星宿の神格化。玄天上帝ともいう。宋代には避諱のため、真武と改名されている。清代には北極佑聖真君に封じられている。上帝翁、上帝公などとも呼ばれる。
北方を守護する。脚の長い亀に蛇が巻き付いた形で描かれることが多い(尾が蛇となっている場合もある)。ただし玄天上帝としては黒服の男性に描かれる。
玄とは黒を意味し、五行説では北方の色とされる。

※以上、Wikipediaより引用

設置方法

  1. 読み込むJavaScript、CSSをhead要素内に記述します。
    パスは環境に合わせて変更してください。
    <link rel="stylesheet" href="css/mopTip-2.2.css" />
    	<script type="text/javascript" src="js/jquery.js"></script>
    	<script type="text/javascript" src="js/jquery.pngFix.js"></script>
    	<script type="text/javascript" src="js/mopTip-2.2.js"></script>
    
  2. head要素内に以下を記述します。
    <script type="text/javascript">
    	$(document).ready(function(){
    	$("#Btn1").mopTip({'w':200, 'style':"overOut", 'get':"#seiryu"});
    	$("#Btn2").mopTip({'w':200, 'style':"overOut", 'get':"#suzaku"});
    	$("#Btn3").mopTip({'w':200, 'style':"overClick", 'get':"#byakko"});
    	$("#Btn4").mopTip({'w':200, 'style':"overClick", 'get':"#genbu"});
    	});
    	</script>
    #Btn1は、ツールチップを表示させたい部分にマークアップするidです。
    'w':200はツールチップの幅です。
    'style':の値は、overOutはマウスオーバーで表示、マウスアウトで閉じる、overClickはマウスオーバーで表示、クローズボタンクリックで閉じます。
    #seiryuはツールチップとして表示する内容にマークアップするidです。
  3. ツールチップを表示させたい部分にidを設定します。
    <a href="#Btn1" id="Btn1">青竜</a>
  4. ツールチップとして表示する内容にidを設定します。
    <dd id="seiryu">青竜(せいりゅう、せいりょう、諡シ音:qトォnglong)は、四神(四霊・四象)の1つで四竜の1つである竜。東方青竜。蒼竜ともいう。(以下省略)</dd>

ページトップに戻る