window.onload は、最初に読み込まれたものが後から読み込まれたものに上書きされてしまうため、ひとつのページで1回しか使用できない。
そのため、いくつもの javascript を使用していると、動かないものがでてきてしまう。
そこで、window.onload が複数使用されている場合の代替案をいくつかご紹介します。
頭脳外部メモリー SINCE 2008/3
Just another WordPress site
サーチ
注意書き
当ブログの内容は管理人の覚え書がメインです。書き間違い勘違いもあるでしょう。なので、一切の責任を持ちません。各自の責任で行ってください。答えられることは、お答えします。
ペコリ(o_ _)ｏ))
スポンサードリンク
スポンサードリンク
スポンサードリンク
2009
7/23
window.onload を複数使用する場合の代替え方法
Created: 2009年7月23日 （木） am 6時55分modified: 2009年8月21日 （金） am 11時46分
Posted by jun Published in java script
window.onload は、最初に読み込まれたものが後から読み込まれたものに上書きされてしまうため、ひとつのページで1回しか使用できない。
そのため、いくつもの javascript を使用していると、動かないものがでてきてしまう。
そこで、window.onload が複数使用されている場合の代替案をいくつかご紹介します。
no comment
2008
6/6
「Highslide JS」 「jun」 の設定 & 使い方
Created: 2008年6月6日 （金） am 12時34分modified: 2020年1月28日 （火） pm 3時04分
Posted by jun Published in java script
このブログで「Highslide JS の設置説明」ページが一番人気のため、調子にのって自分の「設定 & 使い方」の記事を書いてみた。 （＾∀＾）
これをそのまま説明通りに設定（コピペ）すれば非常に簡単に設置ができ、「jun」と同じ使い方ができる・・・・・・・・と思う。 ﾍ(__ﾍ)☆＼(^^;)オイオイ ・・・すべて理解するのはちょっと難しいので使えれば良いと言う人におすすめ！
※この設定説明で使用できるものは、下記になります。
- 画像表示
- コントロールバー表示 （画像内）
- コントロールバー表示 （キャプション内）
- web表示
- inline表示
※オリジナルで頑張りたい方は、「Highslide JS の設置説明」 と 「Highslide JS の カスタマイズ」のページをご覧ください。
下準備
※ファイルの置き場を下記の状態で説明します。 （もちろん同じじゃなくても、以降の説明のアドレスをすべて置き換えてくれれば問題ないです。）- example.com
- wp-content 「フォルダ」
- js 「フォルダ」
- highslide 「フォルダ」
- highslide-with-html.js 「ファイル」
- highslide.css 「ファイル」
- graphics 「フォルダ」
- 各種画像ファイル 「ファイル」
- js 「フォルダ」
- wp-content 「フォルダ」
下準備 其の一 「highslide-with-html.js」の入手
こちらの「Highslide JS の カスタマイズページ」のオプションも使用できるように、「コンフィギュレータページ」で「highslide-with-html.js」を作成します。
右の画像と同じになるようにチェックして「Update」をクリック、表示されたら「Download highslide.js」をクリックし、下段にある「Highslide Download」の「Yes」をクリックしてダウンロードします。 「highslide-with-html.js」という名前で保存（又はリネーム）してください。 ※商業的に使用する場合は「有料」になります。・・・面倒だ！！と言う方は、「Highslide JS」からダウンロードし解凍したものの中に入っている「highslide-full.packed.js」をご使用ください・・・※サイズがちょっと大きいです。 この場合、下記の説明文の「highslide-with-html.js」を「highslide-full.packed.js」に置き換えてください。
または、「オプション」は必要ない！！という方は「Highslide JS」からダウンロードし解凍したものの中に入っている「highslide-with-html.js」をご使用ください。・・・※この場合、同じ名前ですがオプションは何個か使えません。
または、「inline表示」 & 「web表示」 & 「オプション」は必要ない！！という方は「Highslide JS」からダウンロードし解凍したものの中に入っている「highslide.js」をご使用ください。・・・※この場合、下記の説明文の「highslide-with-html.js」を「highslidel.js」に置き換えてください。
または、「jun」が使用している、「highslide-with-html.js」を使用する・・・ﾍ(__ﾍ)☆＼(^^;)オイオイ
または、「オプション」は必要ない！！という方は「Highslide JS」からダウンロードし解凍したものの中に入っている「highslide-with-html.js」をご使用ください。・・・※この場合、同じ名前ですがオプションは何個か使えません。
または、「inline表示」 & 「web表示」 & 「オプション」は必要ない！！という方は「Highslide JS」からダウンロードし解凍したものの中に入っている「highslide.js」をご使用ください。・・・※この場合、下記の説明文の「highslide-with-html.js」を「highslidel.js」に置き換えてください。
または、「jun」が使用している、「highslide-with-html.js」を使用する・・・ﾍ(__ﾍ)☆＼(^^;)オイオイ
下準備 其の弐 「highslide.css」の入手
下記をコピーして「highslide.css」で保存してください。※「jun」が使っているファイルですが・・・不要部分は削除したと思うのですが、もし不具合があったら言ってください。
σ(^◇^;)ヒヤアセ
※細かな指定は、ご自分の環境に合わせて行ってください。 ペコリ(o_ _)ｏ))
※6ヶ所ある画像アドレスは各自必ず指定してください。
下準備 其の参 「各種画像ファイル」の入手
「Highslide JS」からダウンロードして、解凍したフォルダの中にある「graphics」フォルダを使用します。・・・これで下準備は終了です。 (￣▽￣)ゞ
設定方法
<head>～</head>部分の記述※3ヶ所あるアドレスは各自必ず指定してください。
各自のテーマの「footer.php」の</body>より上の部分に下記を記述
（これは、コントロールバー（画像内）を簡単に使用するための記述です。）
使用方法
※記述例は、すべてテキストリンクですが画像リンクも、もちろん使えます。・・・下記の水色文字を<img>タグに変更してください。※「title="～"」などは、紛らわしくなるので省かせていただきました。 ・・・もちろん使えます。
※黄色文字は、各自アドレスを指定してください。
※緑色文字は各自お好きなようにしてください。
※白色文字 & 赤色文字は変更不可です。
<a class="highslide" onclick="return hs.expand(this)" href="リンク先画像のアドレス">「画像表示」</a>
<a id="thumb" class="highslide" onclick="return hs.expand(this)" href="リンク先画像のアドレス">コントロールバー表示 （画像内）</a>
※赤色文字（id）を付けることにより「画像内コントロールバー」が表示されるようになっています。 （※ id名、変更不可・・・どうしても変えたい場合は、設定部分も変更が必要です。）<a class="highslide" onclick="return hs.expand(this)" href="リンク先画像のアドレス">コントロールバー表示 （キャプション内）</a>
<div class="highslide-caption">
<a style="float: left; display: block;" class="control" onclick="return hs.previous(this)" title="戻る" href="#"> Previous <br />
<small style="font-weight: normal; text-transform: none;">left arrow key</small></a>
<a style="float: left; display: block; text-align: right; margin-left: 50px;" class="control" onclick="return hs.next(this)" title="次へ" href="#"> Next <br />
<small style="font-weight: normal; text-transform: none;">right arrow key</small> </a>
<a class="control" onclick="return hs.close(this)" title="閉じる" href="#">Close</a>
<a class="highslide-move control" onclick="return false" title="ドラッグで移動" href="#">Move</a><br />
<div style="clear:both">ここに、キャプションを入れることも可能です。 w(￣o￣)w オオー!</div></div>
<div style="clear: both;"> </div>
※キャプションが必要ない場合は、灰色背景部分の記述はいりません。<div class="highslide-caption">
<a style="float: left; display: block;" class="control" onclick="return hs.previous(this)" title="戻る" href="#"> Previous <br />
<small style="font-weight: normal; text-transform: none;">left arrow key</small></a>
<a style="float: left; display: block; text-align: right; margin-left: 50px;" class="control" onclick="return hs.next(this)" title="次へ" href="#"> Next <br />
<small style="font-weight: normal; text-transform: none;">right arrow key</small> </a>
<a class="control" onclick="return hs.close(this)" title="閉じる" href="#">Close</a>
<a class="highslide-move control" onclick="return false" title="ドラッグで移動" href="#">Move</a><br />
<div style="clear:both">ここに、キャプションを入れることも可能です。 w(￣o￣)w オオー!</div></div>
<div style="clear: both;"> </div>
<a href="#" class="highslide" onclick="return hs.htmlExpand(this, { contentId: 'id名' } )">「inline表示」</a><br />
<br />
<div style="width: 200px; height: 200px;" id="id名" class="highslide-html-content">
<div class="highslide-header">
<ul>
<li class="highslide-move"><a title="ドラッグで移動" href="#" onclick="return false">Move</a></li>
<li class="highslide-close"><a title="閉じる" href="#" onclick="return hs.close(this)">Close</a></li>
</ul>
</div>
<div class="highslide-body"><br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br /></div>
<div class="highslide-footer">
<div><span title="リサイズ" class="highslide-resize"> </span></div>
</div>
</div>
<div style="clear: both;"> </div>
※2ヶ所の桃色文字の名称は同じにしてください。<br />
<div style="width: 200px; height: 200px;" id="id名" class="highslide-html-content">
<div class="highslide-header">
<ul>
<li class="highslide-move"><a title="ドラッグで移動" href="#" onclick="return false">Move</a></li>
<li class="highslide-close"><a title="閉じる" href="#" onclick="return hs.close(this)">Close</a></li>
</ul>
</div>
<div class="highslide-body"><br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br /></div>
<div class="highslide-footer">
<div><span title="リサイズ" class="highslide-resize"> </span></div>
</div>
</div>
<div style="clear: both;"> </div>
※橙色文字で表示されるサイズを指定できます。
「web表示」
<a href="リンク先アドレス" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">「web表示」</a>
オプション 使用方法
「jun」が良く使う「オプション」をいくつか記述しておきます。 ・・・自分の場合、すべて個別指定で使用しています。上記の例すべて指定方法は同じです。 下記を例に説明します。
<a class="highslide" onclick="return hs.expand(this)" href="リンク先画像のアドレス">テキストリンク</a>
上記の赤文字部分の「this」の後に「{ }」を付けて、その中に指定したいオプションを「 , 」で区切って追加していくだけです。
- 背景を黒く透過したい場合
- dimmingOpacity: '0.60'
- dimmingDuration: '0'
- 表示位置を中央にしたい場合
- align: 'center'
- 表示方法をフェードイン ・ フェードアウトさせたい場合
- transitions: ['fade']
<a class="highslide" onclick="return hs.expand(this, { align: 'center' })" href="リンク先画像のアドレス">テキストリンク</a>
1個だけの指定の場合は、こんな感じ・・・<a class="highslide" onclick="return hs.expand(this, { dimmingOpacity: '0.60', dimmingDuration: '0', align: 'center', transitions: ['fade'] })" href="リンク先画像のアドレス">テキストリンク</a>
複数指定の場合は、こんな感じ・・・※最後のオプション記述の後に「 , 」はいりません。
そうそう、ちなみに「web表示」のサイズの指定方法は・・・
<a onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 600, height:400 })" href="リンク先アドレス">こちら</a>
こんな感じで指定します。・・・「inline表示」 & 「web表示」の場合は、見た人が閉じるとき面倒なので、背景を黒く透過することをおすすめします。 （背景をクリックすると閉じれるようになります。 （＾∀＾） ・・・ただし、副作用として同時表示はできなくなりますが・・・(T^T) ）
その他の使い方は、「Highslide JS の カスタマイズ」のページを参考にしてください。 （こちらのページは、個別指定は載っていませんが・・・判ると思います。 σ(^◇^;)ヒヤアセ）
以上、終了です。
・・・おかしい・・・おかしすぎる！！ ・・・簡単にコピペで、あっさり作る記事のはずが ・・・なんでこんなに時間がかかってしまったのだろうか？？ 全然コピペじゃないし！！ ・・・・・・・・・・・「パトラッシュ・・・僕、もう疲れたよ・・・・」
2008
5/29
「ブルブル ４」 設置説明 javascript
Created: 2008年5月29日 （木） pm 1時09分modified: 2009年10月5日 （月） pm 8時36分
Posted by jun Published in java script
今日は「oi_brbr_4.js」というスクリプトのご紹介です。 どのようなものかと言うと、<a>タグの文字リンクにマウスをのせて離れると、文字がブルブル揺れるスクリプトです。 ヾ(＠^▽^＠)ノわはは
可愛く揺れてとっても面白いのでおすすめです。（笑）
欠点として下記がありますので注意してください。
- タグを含むリンクには反応しません。
- WindowsのNetscape Navigator 7.1とOpera 9では実体参照が展開されてしまいます。
- MacintoshのNetscape Navigator 7.1では、エフェクトの適用中、リンクが消えてしまいます。
設定方法
こちらからダウンロード※この設定は任意です。
（設定することにより「class="brbr"」を付ける付けないで、ブルブルさせるさせないを、使い分けられるようになります。）
ダウンロードした「oi_brbr_4.js」ファイルの、７行目あたり・・・
（設定することにより「class="brbr"」を付ける付けないで、ブルブルさせるさせないを、使い分けられるようになります。）
ダウンロードした「oi_brbr_4.js」ファイルの、７行目あたり・・・
var brbr=
{
// ■class属性値に「brbr」を含むa要素のみ処理する
f:true,
// ■タイマーの間隔（ミリ秒）
t:25,
// ■文字の揺れる回数+1
n:16,
// ■文字の揺れる幅（em）
x:0.5,
// ■文字の揺れる高さ（em）
y:1.0
};
{
// ■class属性値に「brbr」を含むa要素のみ処理する
f:true,
// ■タイマーの間隔（ミリ秒）
t:25,
// ■文字の揺れる回数+1
n:16,
// ■文字の揺れる幅（em）
x:0.5,
// ■文字の揺れる高さ（em）
y:1.0
};
の、「f:false,」を「f:true,」に変更します。
その他の細かい設定も上記部分でできるようです。
その他の細かい設定も上記部分でできるようです。
次に、「oi_brbr_4.js」ファイルを、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/ に置いたものとして説明します。）
使用方法
使用方法は非常に簡単です。<a class="brbr" href="#">テキスト文字</a>
記事内に普通に<a>タグのリンクを記述します。※黄文字部分は上記で任意の設定をした場合のみ記述します。
そして、ご自分の「テーマ」の「footer.php」ファイル内に下記のスクリプト部分を記述します。
※作者様のページには、なるべく最後の方に記述してくださいとありました。
・・・自分の環境では、上記リンクの直下に記述しても動作しました。
<script src="https://example.com/wp-content/js/oi_brbr_4.js" type=text/javascript></script>
黄文字の部分にファイルの設置場所（アドレス）を指定サンプル
下記リンクに、マウスをのせてから離るとブルブルします。{{{{(+＿+)}}}}寒ううぅ～
以上、終了です。
2008
5/28
「ModalBox」 設置説明 javascript
Created: 2008年5月28日 （水） pm 11時58分modified: 2008年5月29日 （木） am 12時13分
Posted by jun Published in java script
今日は、MacOS風にダイアログを表示してくれる「ModalBox」と言うスクリプトをご紹介します。 どんな感じのものかというと「Lightbox」のような感じで、Mac風で・・・・(＞▽＜;; アセアセ 百聞は一見に・・・・ サンプルを見てください。
なかなか素敵に「HTMLファイル」や「テキストファイル」を表示してくれます・・・と言うか、それのみのようですが・・・試したところ「phpファイル」も表示できました・・・当たり前？？ ・・・(゜＿゜i)タラー・・・
弱点としては、画像は表示できません！！ (T^T) ・・・まぁ～方法としては、リンク先の「HTMLファイル」に画像を表示させておけば表示できるのですが・・・σ(^◇^;)ヒヤアセ
そしてもう一点、このスクリプトは設置したドメイン以外へのリンクは出来ません。つまり、自サイト内のページ又はファイルしか表示できません。
※使用には「prototype」 と 「script.aculo.us」が必要です。
設定方法
こちらからダウンロード解凍後にできた「modalbox1.6.0」フォルダを「modalbox」にリネームして、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/modalbox/ に置いたものとして説明します。）
次に「JavaScript」 と「css」を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script src="https://example.com/wp-content/js/modalbox/lib/prototype.js" type=text/javascript></script>
<script src="https://example.com/wp-content/js/modalbox/lib/scriptaculous.js" type=text/javascript></script>
<script src="https://example.com/wp-content/js/modalbox/modalbox.js" type=text/javascript></script>
<link rel="stylesheet" href="https://example.com/wp-content/js/modalbox/modalbox.css" type="text/css" media="screen" />
黄文字の部分にファイルの設置場所（アドレス）を指定<script src="https://example.com/wp-content/js/modalbox/lib/scriptaculous.js" type=text/javascript></script>
<script src="https://example.com/wp-content/js/modalbox/modalbox.js" type=text/javascript></script>
<link rel="stylesheet" href="https://example.com/wp-content/js/modalbox/modalbox.css" type="text/css" media="screen" />
※上部分の2種のスクリプトをすでに使用している場合は「lib」フォルダ関係は記述する必要はありません。
使用方法
記述方法は、２種類の方法をご紹介・・・使用方法により使いやすい方をご使用ください。 （＾∀＾）基本的な記述方法
<a onclick="Modalbox.show(this.href, {title: this.title}); return false;
" title="ここに記述したタイトルが使われます。" href="リンク先のhtmlファイルアドレス">サンプル</a>
紺色背景部分がポイントです。" title="ここに記述したタイトルが使われます。" href="リンク先のhtmlファイルアドレス">サンプル</a>
もう一種類の記述方法
<script type="text/javascript">
<!--
window.onload = function(){
$("id名").onclick = function(){
Modalbox.show(this.href,
{title: this.title});
return false;
}
}
// -->
</script>
<a id="id名" title="ここに記述したタイトルが使われます。" href="リンク先のhtmlファイルアドレス">サンプル</a>
こちらは、上部分は<head>間に記述しても大丈夫です・・・記事内でも大丈夫・・・下部の記述は非常に簡単になります。<!--
window.onload = function(){
$("id名").onclick = function(){
Modalbox.show(this.href,
{title: this.title});
return false;
}
}
// -->
</script>
<a id="id名" title="ここに記述したタイトルが使われます。" href="リンク先のhtmlファイルアドレス">サンプル</a>
２ヶ所の「 id名 」は同じ名称にしてください。
オプション
上記の水色文字部分がオプションの指定場所になります。 上記の両方で書いてあるオプション指定が「title="～" を titleに使う指定」です・・・？？ (-"-;A ...アセアセその他オプションは下記を参照してください。
- width: 表示される枠の幅 （px）
- height: 表示される枠の高さ ・・・試したところ、高さ指定をしない場合、画面からはみ出た場合はスクロールできないようです。 （px）
- overlayDuration : オーバーレイにかかる時間 （秒）
- slideDownDuration : スライドダウンにかかる時間 （秒）
- slideUpDuration : スライドアップにかかる時間 （秒）
- resizeDuration : リサイズにかかる時間？？ （秒）
記述方法はどちらの場合も、「,」を付けて並べていくだけです。
記述例：
{title: this.title, width: 400, height: 600, overlayDuration: 2, slideDownDuration: 2, slideUpDuration: 1, resizeDuration: 2});
どちらの場合も水色文字から続けて１行で書くとこんな感じになります・・・１番最後は「,」はいりません。サンプル
残念なことに、自分の環境ではこのページ上で表示できなかったのでこちらになります。
以上、終了です。
2008
5/27
「CoolTips」 設置説明 javascript
Created: 2008年5月27日 （火） pm 7時47分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="https://example.com/wp-content/js/tooltips/lib/prototype.js" type=text/javascript></script>
<script src="https://example.com/wp-content/js/tooltips/lib/builder.js" type=text/javascript></script>
<script src="https://example.com/wp-content/js/tooltips/lib/effects.js" type=text/javascript></script>
<script src="https://example.com/wp-content/js/tooltips/tooltips.js" type=text/javascript></script>
<link rel="stylesheet" href="https://example.com/wp-content/js/tooltips/tooltips.css" type="text/css" media="screen" />
黄文字の部分にファイルの設置場所（アドレス）を指定<script src="https://example.com/wp-content/js/tooltips/lib/builder.js" type=text/javascript></script>
<script src="https://example.com/wp-content/js/tooltips/lib/effects.js" type=text/javascript></script>
<script src="https://example.com/wp-content/js/tooltips/tooltips.js" type=text/javascript></script>
<link rel="stylesheet" href="https://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名」は、名称は何でも構いませんが必ず同じ名称にしてください。 (⌒^⌒)ｂ うん<script type="text/javascript" charset="utf-8">
new Tooltip('id名');
</script>
<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名」は、名称は何でも構いませんが必ず同じ名称にしてください。 (⌒^⌒)ｂ うん<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>
<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名」は、名称は何でも構いませんが必ず同じ名称にしてください。 (⌒^⌒)ｂ うん<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>
上記３つを同じページ内にまとめて記述する場合は、サンプルを参考にしてください。
オプション
オプションを指定することによりカスタマイズ可能です。- 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
オプション内容：
backgroundColor: '#00F', borderColor: '#444', textColor: '#FFF', textShadowColor: '#000', appearDuration: 2, hideDuration: 3
- ＴＯＰに も～～～ど～～～～～る～～～～～～～ (￣▽￣)ゞラジャ
-
此処にもマウスを乗せてください・・・「p タグ」
オプション指定無し
オプション内容：
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>
<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").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>タグバージョンも、なんとなぁ～く作っておいてみました・・・使うかな？ (＞▽＜;; アセアセ
以上、終了です。
2008
5/26
「loupe.js」 設置説明 javascript
Created: 2008年5月26日 （月） pm 11時34分modified: 2008年5月27日 （火） am 12時44分
Posted by jun Published in java script
昨日の「slided.js」 設置説明 javascript」に続いて、今日も画像装飾系スクリプトの「loupe.js」をご紹介。
どのようなものかと言うと、何と(ノ゜⊿゜)ノびっくり!! 画像を虫眼鏡で拡大？しているかのような効果を与えるスクリプトです ・・・実際には２種類の画像を用意して、<img>タグの画像をスタイル指定の「z-index」（表示の優先順位を指定できる）で「-1」を指定して後面にし、前面に小さい方の画像を背景画像として表示させているようです。 ・・・とっても面白いので是非試してみてください。 (⌒^⌒)ｂ うん ・・・詳しくはサンプルを見てね～ （＾∀＾）
・・・ついに、このコピペの手抜き記事シリーズも今日を持って最後になります。（笑） あしたは何書こうかなぁ～・・・
設定方法
こちらからダウンロード解凍後にできた「loupe」フォルダを、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/loupe/ に置いたものとして説明します。）
次に「JavaScript」 を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript">
var loupePath="https://example.com/wp-content/js/loupe/";
</script> // ここに 「 loupe.png 」 のフォルダアドレス
<script type="text/javascript" src="https://example.com/wp-content/js/loupe/loupe.js"></script> // ここに 「 loupe.js 」 のファイルアドレス
<!--[if gte IE 6]>
<script type="text/javascript">
var loupePath = "https://example.com/wp-content/js/loupe/vml/";
</script>
<script src="https://example.com/wp-content/js/loupe/vml/loupe.js" type="text/javascript"></script>
<![endif]-->
黄文字の部分にファイルの設置場所（アドレス）を指定var loupePath="https://example.com/wp-content/js/loupe/";
</script> // ここに 「 loupe.png 」 のフォルダアドレス
<script type="text/javascript" src="https://example.com/wp-content/js/loupe/loupe.js"></script> // ここに 「 loupe.js 」 のファイルアドレス
<!--[if gte IE 6]>
<script type="text/javascript">
var loupePath = "https://example.com/wp-content/js/loupe/vml/";
</script>
<script src="https://example.com/wp-content/js/loupe/vml/loupe.js" type="text/javascript"></script>
<![endif]-->
下部分は「IE6」以降専用の指定です。 ・・・上記の説明と同じように「IE6」以降専用の（vmlフォルダにある）「loupe.png」のフォルダと「loupe.js」のファイルアドレスを指定します。
使用方法
記述方法は・・・<div>
<img id="id名" onLoad="initLoupe(this.id,true);" src="画像アドレス" width="サイズを指定" height="サイズを指定" alt="" />
</div>
上記のように<div>タグで囲って、<img>タグで記述し、ポイントとなる「onLoad="initLoupe(this.id,true);"」を付け、忘れずに「id名」も付けてください、名称は何でも構いません。<img id="id名" onLoad="initLoupe(this.id,true);" src="画像アドレス" width="サイズを指定" height="サイズを指定" alt="" />
</div>
画像のサイズ指定は最初に表示されるサイズを指定します・・・あまり小さすぎるとダメみたいです・・・もちろん、実際のサイズを指定すると・・・拡大されません (＞▽＜;; アセアセ
ちなみに (this.id,true) を (this.id,false) にすると虫眼鏡は最初は表示されず画像の右下の虫眼鏡マークをクリックすることにより表示されるようになるます。
・・・と、まぁ～基本的な画像を拡大させる記述方法は上記の様な感じですが・・・同じサイズの画像を入れ替える？場合は記述方法が違います・・・σ(^◇^;)ヒヤアセ
詳しくはサンプルページにサンプル画像と一緒に記述内容を書いておきましたので参考にしてください・・・付いていた、サンプルと同じですが・・・・(＞▽＜;; アセアセ
サンプル
残念なことに自分の環境ではこのページ上でお見せできないのでこちらになります。以上、終了です。
2008
5/24
「slided.js」 設置説明 javascript
Created: 2008年5月24日 （土） pm 7時42分modified: 2008年5月27日 （火） pm 9時54分
Posted by jun Published in java script
昨日の「filmed.js」 設置説明 javascript」に続いて、今日も画像装飾系スクリプトの「slided.js」をご紹介。
どのようなものかと言うと、前に紹介した「写真風に装飾するスクリプト」と同系統のスクリプトで、フォトスタンド風？に装飾してくれます。 もちろん写真風同様、影も付けてくれます。 詳しくはサンプルを見てね～ （＾∀＾）
設定方法
こちらからダウンロード解凍後にできた「slided」フォルダを、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/slided/ に置いたものとして説明します。）
次に「JavaScript」 を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="https://example.com/wp-content/js/slided/slided.js"></script>
黄文字の部分にファイルの設置場所（アドレス）を指定使用方法
記述方法はいたって簡単！！<img src="画像アドレス" alt="" class="slided" />
上記のように普通に<img>タグで記述して、ポイントとなる「class="slided"」を付けるだけです。 （＾∀＾）オプション
詳しくはサンプルページに書いておきましたので見比べてください・・・（（ ( (ヽ(；^^)/逃げろ～・・・・・・(o_ _)oドテッ!サンプル
残念なことに自分の環境ではこのページ上でお見せできないのでこちらになります。以上、終了です。
2008
5/23
「filmed.js」 設置説明 javascript
Created: 2008年5月23日 （金） pm 11時35分Posted by jun Published in java script
昨日の「glossy.js」 設置説明 javascript」に続いて、今日も画像装飾系スクリプトの「filmed.js」をご紹介。
どのようなものかと言うと、前に紹介した「写真風に装飾するスクリプト」と同系統のスクリプトで、映画のフィルム風に装飾してくれます。 もちろん写真風同様、影も付きますし、光沢加減も調整できます。 詳しくはサンプルを見てね～ （＾∀＾）
設定方法
こちらからダウンロード解凍後にできた「filmed」フォルダを、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/filmed/ に置いたものとして説明します。）
次に「JavaScript」 を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="https://example.com/wp-content/js/filmed/filmed.js"></script>
黄文字の部分にファイルの設置場所（アドレス）を指定使用方法
記述方法はいたって簡単！！<img src="画像アドレス" alt="" class="filmed" />
上記のように普通に<img>タグで記述して、ポイントとなる「class="filmed"」を付けるだけです。 （＾∀＾）オプション
詳しくはサンプルページに書いておきましたので見比べてください・・・（（ ( (ヽ(；^^)/逃げろ～・・・・・・(o_ _)oドテッ!サンプル
残念なことに自分の環境ではこのページ上でお見せできないのでこちらになります。以上、終了です。
2008
5/22
「glossy.js」 設置説明 javascript
Created: 2008年5月22日 （木） am 12時23分Posted by jun Published in java script
昨日の「reflex.js」 設置説明 javascript」に続いて、今日も画像装飾系スクリプトの「glossy.js」をご紹介。
どのようなものかと言うと、画像の表面を艶やかな感じにして、角を丸くしてくれます。 詳しくはサンプルを見てね～ （＾∀＾）
設定方法
こちらからダウンロード解凍後にできた「glossy」フォルダを、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/glossy/ に置いたものとして説明します。）
次に「JavaScript」 を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="https://example.com/wp-content/js/glossy/glossy.js"></script>
黄文字の部分にファイルの設置場所（アドレス）を指定使用方法
記述方法はいたって簡単！！<img src="画像アドレス" alt="" class="glossy" />
上記のように普通に<img>タグで記述して、ポイントとなる「class="glossy"」を付けるだけです。 （＾∀＾）オプション
詳しくはサンプルページに書いておきましたので見比べてください・・・（（ ( (ヽ(；^^)/逃げろ～・・・・・・(o_ _)oドテッ!サンプル
残念なことに自分の環境ではこのページ上でお見せできないのでこちらになります。以上、終了です。
2008
5/21
昨日の「corner.js」 設置説明 javascript」に続いて、今日も画像装飾系スクリプトの「reflex.js」をご紹介。
どのようなものかと言うと、画像を傾けて表示させられます。さらに画像の下に水面に写ったような反射的な効果をかけられます。 詳しくはサンプルを見てね～ （＾∀＾）
設定方法
こちらからダウンロード解凍後にできた「reflex」フォルダを、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/reflex/ に置いたものとして説明します。）
次に「JavaScript」 を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="https://example.com/wp-content/js/reflex/reflex.js"></script>
黄文字の部分にファイルの設置場所（アドレス）を指定使用方法
記述方法はいたって簡単！！<img src="画像アドレス" alt="" class="reflex" />
上記のように普通に<img>タグで記述して、ポイントとなる「class="reflex"」を付けるだけです。 （＾∀＾）オプション
詳しくはサンプルページに書いておきましたので見比べてください・・・（（ ( (ヽ(；^^)/逃げろ～・・・・・・(o_ _)oドテッ!サンプル
残念なことに自分の環境ではこのページ上でお見せできないのでこちらになります。以上、終了です。
最新の投稿
最新のコメント
- 小川ひろし in 「Highslide JS」 「jun」 の設定 & 使い方…
- 天野宣夫 in 「Highslide JS」 カスタマイズ 各種設定方法
- 巨樹 in SSL 無料 認証機関 （CA） StartSSL 使用方法…
- highslide js カスタマイズ … in 「Highslide JS」 カスタマイズ 各種設定方法
- 市橋 in LiveCapture2 でリアルタイム動画をインターネット…
- 初心者・・・ in 「VMware Player」 設定方法 無料の仮想マシンソ…
- shp in 「side-bar.js」 設置説明 javascript
- links for 2010-02-17… in WordPressの投稿で作成途中の記事が消えた！！ 「fc…
- プラグイン » オンライン状… in 「counterize II」 を設置してみた WP プラグ…
- オンライン状況を把握した[Counter… in 「counterize II」 を設置してみた WP プラグ…
コメント投稿数
- 「Shadowbox」 設置説明 java script
18 comments - 「WP-dTree」 設置説明 WPプラグイン
12 comments - 「VMware Player」 設定方法 Windows XP バージョン
6 comments - 「counterize II」 を設置してみた WP プラグイン
5 comments - 「WP-SlimStat-Ex」が使えない・・・
4 comments - 「VMware Player」 設定方法 無料の仮想マシンソフト
3 comments - 「Zen Cart」 設置説明 （PHP5 MySQL5 UTF-8 対応版）
3 comments - prototype.js と jQuery の競合（コンフリクト）解決！ ＆ 共存方法
3 comments - 「FCK editor」 で phpコードを使用する方法
3 comments - 「DDNS（Zoneedit）登録・設定」 & 「DNSサーバ設定」
2 comments
最上階
10階
1階