2008

5/27

「CoolTips」　設置説明　javascript

Last modified: 2008年5月28日 （水）　 pm 7時10分
Posted by jun  Published in java script

▼


とってもおしゃれにリンクのタイトルなどを表示してくれる「tooltips.js」のご紹介。　どのようにおしゃれかと言うと・・・フェードしながら表示され、しかも角丸、そして半透明なのです！！　しかも軽量で、画像も使用していないというすばらしさ！！　w(￣o￣)w オオー!
ちなみに、リンク以外でもマウスが乗ると表示できます！！<p>タグでも<input>タグでもＯＫです。　（＾∀＾）
表示されるスタイルもカスタマイズが簡単に可能！！　なかなか良い感じなのでおすすめです。　v(^o^")v

※使用には「prototype」 と 「script.aculo.us」が必要です。


設定方法

こちらからダウンロード

解凍後にできた「tooltips1.0」フォルダ内の「tooltips」フォルダを、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/tooltips/　に置いたものとして説明します。）

次に「JavaScript」 と「css」を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script src="http://example.com/wp-content/js/tooltips/lib/prototype.js" type=text/javascript></script>
<script src="http://example.com/wp-content/js/tooltips/lib/builder.js" type=text/javascript></script>
<script src="http://example.com/wp-content/js/tooltips/lib/effects.js" type=text/javascript></script>
<script src="http://example.com/wp-content/js/tooltips/tooltips.js" type=text/javascript></script>

<link rel="stylesheet" href="http://example.com/wp-content/js/tooltips/tooltips.css" type="text/css" media="screen" />
黄文字の部分にファイルの設置場所（アドレス）を指定
※上部分の3種のスクリプトをすでに使用している場合は「lib」フォルダ関係は記述する必要はありません。


使用方法

記述方法は、id指定とclass指定の２種類の方法があります。

id指定の場合　（これが一番基本的で簡単な記述方法・・・しかし、同ページ内に１回しか使えません。）

<a id="id名" title="ここに表示させたい文字を記述" href="#">ＴＯＰに戻る</a>

<script type="text/javascript" charset="utf-8">
new Tooltip('id名');
</script>
2ヶ所の「id名」は、名称は何でも構いませんが必ず同じ名称にしてください。　(⌒^⌒)ｂ　うん


<ul>タグ内のclass指定の場合

<ul>
<li><a class="class名" title="ここに表示させたい文字を記述" href="#">ＴＯＰに戻る</a></li>
<li>
<p class="class名" title="ここに表示させたい文字を記述"> p タグでもＯＫです。</p>
</li>
</ul>

<script type="text/javascript" charset="utf-8">
$$("ul .class名").each( function(link) {
new Tooltip(link);
});
</script>
3ヶ所の「class名」は、名称は何でも構いませんが必ず同じ名称にしてください。　(⌒^⌒)ｂ　うん


<form><input>タグ内のclass指定の場合

<form action="#" method="post">
<fieldset>
<legend>Form example</legend>
<input type="text" name="" value="マウスを此処へ・・・" id="" title="ここに表示させたい文字を記述" class="class名" />
</fieldset>
</form>

<script type="text/javascript" charset="utf-8">
$$("form input.class名").each( function(input) {
new Tooltip(input);
});
</script>
2ヶ所の「id名」は、名称は何でも構いませんが必ず同じ名称にしてください。　(⌒^⌒)ｂ　うん


上記３つを同じページ内にまとめて記述する場合は、サンプルを参考にしてください。


オプション

オプションを指定することによりカスタマイズ可能です。
  • backgroundColor：背景の色
  • borderColor： ボーダーの色
  • textColor： 文字の色
  • textShadowColor： 文字の影の色・・・Safari専用？
  • maxWidth： 最大横幅（pixels） デフォルト=250px
  • delay： マウスが乗ってから表示するまでの遅延時間（ミリ秒） デフォルト=250ms
  • mouseFollow： マウスと一緒に移動させるかどうか（true/false） デフォルト=true
  • opacity： 透明度 デフォルト「75%」
  • appearDuration： 表示されるまでのエフェクト時間（秒） デフォルト=0.25s
  • hideDuration： 表示が消えるまでのエフェクト時間（秒） デフォルト=0.25s

オプションの記述方法は下記のサンプルを参考にしてください。


サンプル


ＴＯＰに　も～～～ど～～～～～る～～～～～～～　(￣▽￣)ゞラジャ


オプション内容：
backgroundColor: '#00F', borderColor: '#444', textColor: '#FFF', textShadowColor: '#000', appearDuration: 2, hideDuration: 3



オプション指定無し


Form example

オプション内容：
backgroundColor: "#FC9", borderColor: "#C96", textColor: "#00F", textShadowColor: "#FFF", delay: 500, mouseFollow: false, maxWidth: 80



記述内容
<a href="#" title="ここに表示させたい文字を記述" id="coool">ＴＯＰに戻る</a>

<ul>
<li><a href="#" title="ここに表示させたい文字を記述" class="tips">ＴＯＰに戻る</a></li>
<li>
<p title="ここに表示させたい文字を記述" class="tips">此処にもマウスを乗せてください・・・「p タグ」</p>
</li>
</ul>

<form method="post" action="#">
<fieldset> <legend>Form example</legend> <input type="text" class="cooltips" title="ここに表示させたい文字を記述" size="60" id="" value="マウスを此処へのせて、0.5秒待ってね～～～ペコリ(o_ _)ｏ))" name="" /> </fieldset>
</form>


<script type="text/javascript" charset="utf-8">
new Tooltip('coool', {backgroundColor: '#00F', borderColor: '#444', textColor: '#FFF', textShadowColor: '#000', appearDuration: 2, hideDuration: 3});
$$("ul .tips").each( function(link) {
new Tooltip(link);
});
$$("form input.cooltips").each( function(input) {
new Tooltip(input, {backgroundColor: "#FC9", borderColor: "#C96", textColor: "#00F", textShadowColor: "#FFF", delay: 500, mouseFollow: false, maxWidth: 80});
});
</script>


・・・参考までに書いておきますと、上記の下部分のスクリプトを毎回書くのは、やはり面倒・・・そこで、このスクリプトを使い続けるのならば、「footer.php」ファイル内の</body>タグより上の辺にスクリプト部分を記述してしまえば、使いたいときに「id名」や「class名」を記述するだけですみます。
・・・自分の場合は、
<script type="text/javascript" charset="utf-8">
$$("a.class名-1").each( function(link) {
new Tooltip(link, {backgroundColor: "#FC9", borderColor: "#C96", textColor: "#11F", textShadowColor: "#FFF", appearDuration: 0.75});
});
$$("a.class名-2").each( function(link) {
new Tooltip(link, {backgroundColor: "#11F", borderColor: "#08C", textColor: "#FFF", textShadowColor: "#000", appearDuration: 0.75});
});
$$("p.class名-3").each( function(link) {
new Tooltip(link, {backgroundColor: "#11F", borderColor: "#08C", textColor: "#FFF", textShadowColor: "#000", appearDuration: 0.75});
});
</script>
と、記述しておきました。
この場合、すべての<a>タグのうち、「class名-1」か「class名-2」を指定したものだけが「CoolTips」が使えるようになります・・・何故2個あるかというと、オプションに違いがあり「オレンジ系」と「青系」になっていて、気分によって使い分けるためです。　　ε＝（＞ε＜） プッー！
そしてもうひとつ<p>タグバージョンも、なんとなぁ～く作っておいてみました・・・使うかな？　(＞▽＜;; アセアセ


以上、終了です。

人気度 : 26 %

「20点」　まったく役に立たなかったよ　。。｡･ﾟﾟ･(＞Д＜；)･ﾟﾟ･｡。。。「40点」　ちょっとだけ役に立ったかな　(T^T)「60点」　まぁ～まぁ～の記事だね　v（＾∀＾）v「80点」　良い記事だけど、あとちょっと・・・　(ノ´▽｀)ノオオオッ♪「100点」　探していたのはこの記事だ！！　(*ﾟ oﾟ*) マジっすか！？ (1 投票, 平均値/最大値: 4 / 5)

Previous Top



関係のある記事

No user の書き込みがあります

Subscribe to this post コメント RSS or トラックバック URL
コメントほしぃ～よぉ～　σ(^◇^;)

 お名前 (* 必須)

 メールアドレス (* 非公開)

 ウェブサイト (* 任意)