|
|
|
03/16(Sun) 03:05
 一定間隔でHTMLレイヤーを切り換えて表示する
HTMLレイヤーを、一定間隔で切り換えて表示します。サンプルは２つのHTML文ですが、少しの改造をすれば、いくつでも増やせます。HTML文には通常のHTMLと同じものが使えます。
■設置方法
| 使用するCross-Browser function | setBGCOLOR、showLAYER、hideLAYER |
| スタイルシート | htmlpos |
■ヘッダー部に以下のスタイルシート、関数を定義します。
変更する箇所は以下の２カ所です。あなたのページレイアウトに合わせて変更して下さい。
- スタイルシート内の表示位置(left:105;top:100)、文字(font-size:10pt)、レイヤー幅(width:400)
- 関数htmlini()、flip()内の背景色の指定(#ddffff、#ffddff)
|
<![CDATA[
<STYLE TYPE="text/css">
<!--
/*--------------------------------------------------------------------
Dynamic HTML cross-browser for NC4.0 and IE4.0 (1999.01)
by「菊池さん」<http://kikuchisan.net/>
--------------------------------------------------------------------*/
.htmlpos { position:absolute;left:105;top:130;font-size:10pt;
width:400;visibility:hidden }/* HTMLフリップ */
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Cross-Browser function -------------------------------------------
// 背景色
function setBGCOLOR(layName,color){
if(document.all)document.all(layName).style.backgroundColor=color //IE4,5,6,Opera6用
if(document.getElementById)
document.getElementById(layName).style.backgroundColor=color //NN6,7用
if(document.layers)document.layers[layName].bgColor=color //NN4用
}
// レイヤー表示
function showLAYER(layName){
if(document.all)document.all(layName).style.visibility='visible' //IE4,5,6,Opera6用
if(document.getElementById)
document.getElementById(layName).style.visibility='visible' //NN6,7用
if(document.layers)document.layers[layName].visibility='show' //NN4用
}
// レイヤー非表示
function hideLAYER(layName){
if(document.all)document.all(layName).style.visibility='hidden' //IE4,5,6,Opera6用
if(document.getElementById)
document.getElementById(layName).style.visibility='hidden' //NN6,7用
if(document.layers)document.layers[layName].visibility='hide' //NN4用
}
// Cross-Browser function (end)--------------------------------------
// HTMLフリップ表示
var i
var id
var interval = 3000; // フリップ間隔(約3秒)
window.onload=htmlini //ぺ−ジロ−ド完了後function htmliniを実行する
function htmlini() {
setBGCOLOR('html0','#ddffff')
showLAYER('html0')
i = 0
id = setTimeout("flip()", interval);
}
function flip() {
if (++i > 1) { i=0 }
if (i == 0) {
setBGCOLOR('html0','#ddffff')
showLAYER('html0') // 次に出すレイヤを表示する
hideLAYER('html1') // 今までのを非表示にする→新しいのが見える
} else if (i == 1) {
setBGCOLOR('html1','#ffddff')
showLAYER('html1')
hideLAYER('html0')
}
id = setTimeout("flip()", interval);
}
//-->
</SCRIPT>
]]>
|
■ボディ部に以下の記述をします。
変更する箇所は以下の１カ所です。あなたのページに合わせて変更して下さい。
- ＨＴＭＬ文の内容(ID="html0"、ID="html1"の2つのHTML文)を変更します。<DIV CLASS=>と</DIV>の間にあなたの表示したいHTML文を記述して下さい。HTMLで使えるリンク、画像、フォームなどすべての内容を書くことができます。
|
<![CDATA[
<!-- HTMLフリップ表示 -->
<DIV CLASS="htmlpos" ID="html0">
<IMG SRC="../gif/father.gif" WIDTH=50 HEIGHT=50 ALIGN="left">
<font color=deeppink>■</font>JavaScript＆CGI工作室を中心に、バナー作成、
趣味の話題などをテーマにしています。ごゆっくりどうぞ！<br>
<CENTER>[<a href="../index.html"><b>ソフト工作室</b></a>]←クリック！</CENTER>
</DIV>
<DIV CLASS="htmlpos" ID="html1">
<IMG SRC="../gif/mother.gif" WIDTH=50 HEIGHT=50 ALIGN="left">
<font color=darkorange>■</font><font color=brown>ご訪問ごとに楽しいイペントを
ご用意してお待ちしてま〜す。</font><p>
<CENTER>[<a href="../index.html"><b>ソフト工作室</b></a>]←クリック！</CENTER>
</DIV>
]]>
|
＜応用＞「DHTML未対応ブラウザ用のメッセ−ジ」「JavaScript未対応、JavaScript設定「無効」ブラウザ用のメッセ−ジ」の処理を追加する場合はJavaScriptを使って下のようにします。
|
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!--
//--DHTML対応ブラウザの場合だけ処理する
if(document.all || document.getElementById || document.layers){
// HTMLフリップ表示
var DOC=''
DOC+='<DIV CLASS="htmlpos" ID="html0">'
DOC+='<IMG SRC="../gif/father.gif" WIDTH=50 HEIGHT=50 ALIGN="left">'
DOC+='<font color=deeppink>■</font>JavaScript＆CGI工作室を中心に、'
DOC+='バナー作成、趣味の話題などをテーマにしています。ごゆっくりどうぞ！<br>'
DOC+='<CENTER>[<a href="../index.html"><b>ソフト工作室</b></a>]←クリック！</CENTER>'
DOC+='</DIV>'
DOC+='<DIV CLASS="htmlpos" ID="html1">'
DOC+='<IMG SRC="../gif/mother.gif" WIDTH=50 HEIGHT=50 ALIGN="left">'
DOC+='<font color=darkorange>■</font>'
DOC+='<font color=brown>ご訪問ごとに楽しいイペントをご用意してお待ちしてま〜す。</font><p>'
DOC+='<CENTER>[<a href="../index.html"><b>ソフト工作室</b></a>]←クリック！</CENTER>'
DOC+='</DIV>'
document.write(DOC)
} else {
//DHTML未対応ブラウザ用のメッセ−ジ
var DOC =''
DOC+='<font color=red>このぺ−ジはDHTMLを解釈できるブラウザ(Netscaoe4 or IE4 以上)で'
DOC+='ご覧ください</font><br>'
document.write(DOC)
}
//-->
</SCRIPT>
<NOSCRIPT>
<!--JavaScript未対応、JavaScript設定「無効」ブラウザ用のメッセ−ジ-->
<font color=red>
せっかくご来訪戴きましたが、ご覧のブラウザではこれより先をご案内することが出来ません。
</font><p>
<font color=blue>
（１）Netscape Ver2.0 または MSIE Ver3.0 以上の機能を有するブラウザを入手されるか<br>
（２）上記以上のブラウザをお使いの場合は、JavaScriptの設定を「有効」にして</font><p>
再度ご来訪下さいますようお願いいたします。
</NOSCRIPT>
]]>
|
|
|
