【 広告 】 ディスクスペース3GB PHP/Perl/SSI/SQLも使えて、年額たったの2400円。ドメインも最安クラス。自由度が高い高機能、格安サーバー

壁紙サンプラー・画像表示ポップウィンドウ [IE4,NN6 以上]

基本は背景画像のサンプル用ポップアップです。
縮小画像をポップアップウィンドウに実寸表示させたり、 素材配布などで壁紙などの実際のイメージをサンプルウィンドウで表示させるような時に使う物です。

ビジターの迷惑にならないようにポップアップウィンドウ等をどんどん複数作ってしまわず１つのウィンドウを再利用します。 また、元のページを移動した場合は、自動的にポップアップウィンドウもクローズさせます。

他のスクリプトと干渉しにくいように整理した為古いブラウザへの互換性がないと思います。 現在一般的に使われている、IE6以上、FireFox3、Netscape7、Safari3、Opera9では動作確認済みです。
(全てWindowsXP)

まずはサンプル

画像をクリックするとサンプルが開きます。
IEはポップアップウィンドウの幅250？、制限があるので、バータイプはリピートが見えてしますが・・・。 またサービス側でのポップアップの位置固定や何度も開閉する事の煩わしさを回避する為、 画像のサイズの違いをresizeTo()で実行していますが、ブラウザによってほんの少し画面の大きさの解釈が違ってしまいますが、 微調整はしていません。m(__)m

■例：壁紙素材



こちらは文字が邪魔にならないと思いますので、親切な「閉じる」ボタン付。

■例：サムネイル → 実寸表示

こちらは画像を拡大して写真などを見せる場合に文字を表示させずに、ウィンドウをクリックすると閉じるタイプ。

この画像サンプラーの場合は背景画像として表示させていますので、 画像の縦横サイズが違う物を表示する場合は、各画像からの呼び出しでそれぞれサイズ設定が必要です。 単に画像の実寸表示をしたい場合はスライドショー１で操作ボタンを非表示設定にして使う方が便利です。

コピーソース

■ [ HEAD内 JavaScript ]

■ [ 画像タグは普通に。必ずIDをつける IDに規則性は特に求めない ]
onclickイベントはJavaScript側のリスト記述で自動に付きますのでHTML内は画像タグだけでOK。 サムネイルなどの仮表示用画像でも、実際に使う画像を小さく表示させた物でも良い。

使い方

[ JavaScriptソース ]
HEAD内の一番最後のスクリプトとして貼り付けてください。

■表示画像の設定
/*
表示画像の設定用リスト
書式 BGSamp.sets('id','表示画像',幅,高,濃淡,ボタン); でリストアップする。
*/
この記述の下に、書式にのっとって画像IDやファイル名、サイズ等をリストします。

BGSamp.sets('id','ファイル(パス+名前)',幅,高さ,明暗,ボタン表示);

例：
BGSamp.sets('thumb1','./dblue15.jpg',150,300,1,1);
BGSamp.sets('thumb2','./dred20.jpg',200,300,1,1);
BGSamp.sets('thumb3','./ren03_s.jpg',200,300,1,1);
BGSamp.sets('thumb4','./artemis.jpg',250,250,1,0);
こんな感じで書式を守ってリストアップします。

■書式の詳細

ID
これはクリックされる画像タグにつけたIDです。
JavaScriptがそのIDのタグに自動でonclickイベントをつけます。
文字列なのでシングルクォートなどで囲んでください。

ファイル パス+ファイル名
これはポップアップ表示させる画像のURLです。
相対パスでもhttpからのURLでもOK。
クリックされる画像タグの画像と別の画像でも同じ画像でも必要な物を。
文字列なのでシングルクォートなどで囲んでください。

幅
これはウィンドウの幅(ピクセル)。半角数字。

高
これはウィンドウの高さ(ピクセル)。半角数字。

文字色
これは文字色を明暗どちらかにするかを半角数字で。
1が暗い画像用。0が明るい画像用。

ボタンタイプ
ボタンを表示させるか、ウィンドウクリックで閉じるか？です。
0がボタンなし。1がボタンありです。


■ 実際の文字色
スクリプト内にこの記述があります。
L:"#ffffff", D:"#000000",
これが 暗い背景用、明るい背景用のカラーです。
HTML用のカラー指定ですので自由に変更してください。

■ オンロード・オンアンロードに関して
BODY内に一切余計な記述をしないで済むように、 サムネイルの onclickイベントもスクリプトからメソッドで付ける様になっています。

従って他のスクリプトと同一オブジェクトの同一イベントと重なっても干渉せず、干渉されず動きます。 (この為に下位互換を切り捨てました)

■ グローバル変数
この配布スクリプトではBGSampと言う名前のグローバル変数を1個だけ使用しています。 この名前が他のスクリプトの変数名、関数名と干渉しないように注意してください。
BGSampが干渉する場合は、スクリプト内の全てのBGSampを干渉しあわない名前に変更して使用するか、 グローバル変数無しの方法に切り替えてください。

画像タグを収集してアルバム、スライドショー表示するような、同じ画像処理を行うスクリプトなどとは干渉して共存できない可能性があります。

■ グローバル変数なしの方法
このスクリプトの一番最初の行として
;(function(){
を付け足してください。
このスクリプトの一番最後の行として
})();
を付け足してください。

;(function(){
このスクリプト
})();

と言う状態になればグローバル変数を一切使用しない方法になります。
この記述方法が古いブラウザで理解できないだけなら良いのですが、 エラー表記と判断されるかどうかについては不明です。
現在の一般的なPCブラウザでは全く問題ありません。

■複数ページに使う場合
全部のページにスクリプトを直接書き込んでしまうのがが考えずに済む方法ですが、 どうせなら外部ファイルを併用した方がスマートです。

外部ファイルとして利用するには共通部分と、ページ別部分を分ける必要があります。 (画像が全てのページで同じものなら必要ありませんが、そんな使い方はないと思います）
またこの方法の場合はグローバル変数を使わない方法は使えませんので、 BGSampというグローバル変数を１個各ページで使用する事になります。

外部ソースファイルとして実行より先に読ませるスクリプト
例：bgs.js と言う名前にする。
/* 画像サンプラーオブジェクト */
var BGSamp = {

・・・・・・・・・・・

};
/* ページの onunload でPOPアップを閉じる */
BGSamp.addEvent(window,'unload', function(){ if(BGSamp.win && !BGSamp.win.closed){ BGSamp.win.close(); }});
この部分だけを外部ファイル化します。
インデントとコメントをつけてあるのでこの区間はわかると思います。

各ページに書き込むスクリプトは
<script type="text/javascript" src="./bgs.js"></script>
<script type="text/javascript">
/* 画像への onclickイベントの付加 */
BGSamp.addEvent(window,'load',function(){ if(document.getElementById){
/*
表示画像の設定用リスト
書式 BGSamp.sets('id','表示画像',幅,高,濃淡,ボタン); でリストアップする
*/
/*ここに各ページで使う画像のセットリスト*/

}});
</script>
ま、たいして短くなりませんが。。。
案ずるより産むが易し
使ってみれば疑問も解決

XREA+ (plus) 200円/月
( お試し7日間 )

CORE SERVER 416円/月
( お試し15日間 )

ロリポップ 263円/月
( お試し期間10日間 )

チカッパ 500円/月
( お試し期間15日間 )

ヘテムル 1500円/月
( お試し期間15日間 )

さくら 125円/月
( お試し期間2週間 )
無駄な高額ドメイン管理料金払ってませんか？

バリュードメイン
ムームードメイン

膨大な数の命令をサンプルとあわせて解説。機能別にすぐ引けます！Web2.0を支えるJavaScriptを詳細解説。AjaxやDOM Scriptingで必要となる、DOM/XML/通信の解説を大幅強化。Internet Explorer、Firefox、Safariなど、最新ブラウザに対応。サンプルスクリプトがダウンロードできます。 命令／関数／オブジェクト／真偽／計算／演算・変換／数値／配列／文字列／正規表現〔ほか〕 JavaScript
ポケット
リファレンス
改訂第4版
JavaScriptの文法からAmazon Webサービス・Googleマップまでこの１冊だけでキホンから実践まで、Ajaxのすべてがやさしく学べます。 1 JavaScriptの基本（イントロダクション／変数と計算／条件分岐、繰り返し、関数／オブジェクト）／2 ブラウザーとHTMLの操作（ブラウザーの操作／DOM）／3 JavaScriptによるAjaxの実践（Ajax）／付録 基礎Ajax
＋
JavaScript
言語解説部分とリファレンス部分に分け、その言語解説部分をまとめたもの。第５版では、全章の内容を更新し、XMLHTTPRequestオブジェクトでスクリプトからHTTPリクエストに送信する方法、JavaScriptを使ってXMLデータの制御、またJavaScriptによるグラフィックの制御機能についてなど、新しい話題を追加した。 JavaScriptの概要／第１部　コアJavaScript（字句構造／データ型と値／変数／式と演算子　ほか）／第２部　クライアントサイドJavaScript（Webブラウザに組み込まれたJavaScript／ブラウザウィンドウの制御／ドキュメントの制御／CSSとダイナミックHTML ほか） JavaScript第5版
JavaScriptを、基礎から学習できます。プログラミングの初歩から、オブジェクトやイベントまで、わかりやすく系統的に解説したプログラミングの入門書です。学習項目ごとに、例題や練習問題が用意されているので、習得のチェックをすることができます。この１冊で「基本言語仕様」「オブジェクト」「DOM」「イベント処理」など、JavaScriptの基本がしっかり身につきます。 JavaScriptの概要／JavaScriptの基本言語仕様／オブジェクト／DOM（Document Object Model）／イベント処理／各種処理／JavaScriptの今後／練習問題、章末問題の解答 基礎から学べるJavaScript標準コースウェア
本書は、JavaScriptのリファレンスについて、コアJavaScriptとクライアントサイドJavaScriptに分けて解説しています。コアJavaScriptリファレンスでは、JavaScript1.5とECMAScriptバージョン3によって定義されたすべてのクラス、オブジェクト、コンストラクタ、メソッド、関数、プロパティ、定数について解説します。クライアントサイドJavaScriptのリファレンスでは、レガシーなブラウザ対応のAPI、DOMレベル２の標準的なAPIを扱うほか、XMLHTTPRequestオブジェクトやcanvasタグのような新しい情報もカバーします。 １章　コアJavaScriptリファレンス（Arguments／Array／Boolean／Dateほか）／２章　クライアントサイドJavaScriptリファレンス（Anchor／Applet／Attr／Canvas ほか） JavaScriptクイックリファレンス
136本定番サンプルを掲載。ナビゲーション画面から手軽に動作確認。すぐに引ける便利なプロパティ・メソッドのリファレンス。74項目も併せて掲載。Webコンテンツ制作者、必携。 第１章 DOMの概要／第２章 HTML文書の内容を操ろう／第３章　イベント／第４章　フォーム／第５章　スタイルシート／第６章　Ajax+DOM／第７章　オブジェクト指向でいこう／付録 JavaScript，Ajax，DOMによるWebアプリケーションスーパーサンプル
いまや星の数ほどあるWebページ。そのなかであなたのWebサイトがひときわ注目を集めるためには、ユーザーをうならせるテクニック、あっと驚かせるワザが必要です。本書では、意外と気づ付かないHTMLのTipsから、CSS（スタイルシート）を使った効果的なデザインの方法など、あなたの思い通りにWebサイトをグレードアップする裏技を、すぐに使えるサンプルソース付きで豊富な解説。さらに、JavaScriptを活用したインタラクティブなページの作り方や、CGIで各種情報を取得する便利なテクニックなども多数紹介しています。 図解
誰にも教えたくないWeb制作秘密のテクニック200
本書は、ホームページを一味違ったものにするために欠かせない裏ワザ（TIPS＆TRICKS）を集大成したものである。 HTML＆CSS編（色と装飾／画像／フィルター／マウスオーバー　ほか）／JavaScript／ダイナミックHTML編（スクリプト／DOMとダイナミックHTML／IE最新ワザ／XML） HTML／JavaScript／CSSホームページ裏ワザ大辞典
スーパーカリスマアフィリエイター伊藤哲哉氏とＳＥＯの達人鈴木将司氏が贈るアフィリエイトの秘伝書がここに極まる！著者や監修者が長年蓄積した、確実に稼げるアフィリエイターになるためのステップを一からみっちり解説。また、本当に稼げるテーマを選ぶコツやノウハウも満載。 アフィリエイトの基本／CTPMの法則：アフィリエイトの大原則／アフィリエイターで失敗する人、成功する人／アフィリエイトで稼ぐための４つのポイント／アフィリエイターを取り巻く環境の変化／アフィリエイトで稼げる分野を見極める／アフィリエイトで成功するキーワード選定方法／魅力あるコンテンツ作り／ＳＥＯ対策とアクセスアップ／データ分析を極める（アクセス解析＆ＡＳＰデータ解析）／収益をあげる細かいスパイス／アフィリエイト実践編 アフィリエイトの達人養成講座
カスケードスタイルシートとダイナミックHTMLは、より軽く、より刺激的なサイトを構築するための機能を満載しています。本書は、WEBコンテンツ作成のプロフェッショナルのために、CSSとDHTMLについて、実践的な架空サイトの構築例を使って詳細に解説します。 WebプロフェッショナルのためのCSSとDHTML
【 PR 】 楽天カード入会でもれなく2000pt(2000円相当)が無料プレゼント さらに ENEOSでの給油はポイント２倍！ ネットでも日常でもお得な生活 【 PR 】