ホームへ サンプルページ コーナーロゴ corner_logo.htm
左上に、ロゴ/イメージなどを20秒間表示。 Winサイズの変更や、スクロールに依存せず定位置 保持。 all対応です。 ロゴ/イメージや、マウスオーバー時のコメント〔代替え表示〕、ハイパーリンク、表示時間はJavaScriptの記述で簡単に変更できます。
<ご使用方法>
・ ローカル(=PC)への保存は、 corner_logo.htm、staticlogo.js、staticlogo2.js、staticlogo3.js、staticlogo4.js、 を右クリックします。 [対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: (C:¥tempや、C:\My Documents\hp¥sample1など任意)、<ファイル名>: *.htm など(ここでは変更不要) [保存]ボタンを押す、などで行います。 FTP後にファイル名が変わっちまったときは、修正します。 PCに保存したファイルを、”WordPad”や、シンプルテキスト あるいは ”FrontPage Express” などで開き編集して使用します。 このサンプルは、コピーして少しの編集(タイプイン、カット、コピー、ペースト、……)で、すぐ使用することが可能です。 <ご使用方法>などの、不要な文字は削除します。
・ このDHTMLの実装方法は、corner_logo.htm を WordPad やシンプルテキスト などのテキストエディターで開き、(*1) 部分をコピーします。 任意のHTMLファイル hogehoge.html(制作者が名付けた挿入先ファイル)に、テキストエディターあるいは、HTML挿入メニューを使って、 <body> 〜 </body>の、”〜”部分に、(*1) 部分をペーストします。
・ 編集方法 : 下記の(例)(*1) 、(*2) の太字部分を参考にします。 パラメーターの変更も該当部分の記述/追加/変更/削除で行います。 説明のための太字、彩色自体に依存なし。
・ ロゴ/イメージの表示位置の変更は、(*1) の太字部分の記述で行い、該当の staticlogo3.js などを下記要領で配置します。 本サンプルは、”左上”です。
・ ロゴ/イメージやハイパーリンク、マウスオーバーで表示するメッセージ、ロゴ/イメージ表示時間などの指定は、staticlogo3.js などをテキストエディターで開き、 (*2)の太字部分の記述で行います。
・ アップロードは、hogehoge.html〔DHTMLを実装したファイル〕と同じ階層〔ディレクトリ/ホルダー〕に、staticlogo.js、staticlogo2.js、staticlogo3.js、staticlogo4.js のいずれかあるいは全てと、使用するイメージ :1-20al2.jpg などを配置します。 ローカル〔=PC〕での作動試験も同様に、同じ階層〔ディレクトリ/ホルダー〕これらを配して行います。 更新後は、必ずブラウザーでの再読込み〔IE:F5キー、NN:Ctrl+Rキーで〕が必要です。
・ 関連情報 : 色記号6、2、スタイルシートリファレンス、ホームページ開設入門が便利!。 Web Development、Web開発、CSS Compatibility in ie7、CSS Enhancements in ie6、XML、DHTML、ColorTable、HTMLの色指定、HTMLリファレンス。
(*1) : corner_logo.htm (例) 挿入先の <body> 〜 </body>の、〜部分にペーストします。
HTMLの編集方法 | (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
右下: staticlogo.js |
<body> <script src="staticlogo3.js"> </script> </body> |
(*2) : staticlogo3.js (例) DHTMLの実装ファイル〔hogehoge.html〕と同じ階層〔ディレクトリ/ホルダー〕に配置します。
HTMLの編集方法 | (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
ロゴ/イメージファイル名
ハイパーリンク
マウスオーバーで表示するメッセージ
ロゴ/イメージ表示時間
〔以下省略〕 → ↓ |
//edit the below 6 steps // 1) substitute 112 and 73 with the width and height of your logo image, respectively if (document.images) var staticlogo=new Image(112,73) // 2) change the image path to reflect the path of your logo image staticlogo.src="1-20al2.jpg" // 3) Change url below to the target URL of the logo var logolink=" index_map.html" // 4) change the alttext variable to reflect the text used for the "alt" attribute of the image tag var alttext="=(^。^)= こんにちわ …*、Hello!" // 5) set below to either "1" or "0" ("1" fades the logo into view) Note: IE 4 specific var fadeintoview=1 /* 6) Finally, below variable determines the duration the logo should be visible after loading, in seconds. If you'd like the logo to appear for 20 seconds, for example, enter 20. Entering a value of 0 causes the logo to be perpectually visible. */ var visibleduration=12
///////////////////////////Do not edit below this line/////////////////////////
|