デモは、自動開始します、タイマーは15秒。

 

ホーム へ  サンプルページ  スライドショ−1 右(下)    web-slid-page1.htm (初期右/下 ページ)

タイマーで右(下)ページを切り替える(スライドショー)、自動開始。          タイマー(15秒)、右・下ページ、 〃 数などのなどのカスタマイズはテキストエディターなどで可。      DHTML実装の左or上ページを”見えなくする”方法。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

 

< ご使用方法 >

 ・ ローカル(=PC)への保存は、web-slideshow.html (左右フレーム)、web-slideshow2.html (上下フレーム)、 web-slid-left.htm(DHTML実装、左ページ)、web-slid-top.htm(DHTML実装、上ページ)、web-slid-page1.htm(初期右/下ページ) を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。

 ・ このDHTMLの実装方法は、 web-slid-left.htm、web-slid-top.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に(*1) を、さらに <body> 〜 </body> の任意の行間に (*2) をペーストします。

 ・ DHTML実装の左or上ページの 編集方法 :  hogehoge.html を WordPad や SmipleText などのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例)(*1) と、(*2) を参考に太字部分の編集を任意に行います。       ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ フレームの編集方法 : 初期に右や下フレームに表示させるページは、web-slideshow.html (左右フレーム)や、web-slideshow2.html の  <frame name="main" target="_blank" src="web-slid-page1.htm" 部分の web-slid-page1.htm のファイル名・URLで指定します。   DHTML実装の左ページを”見えなくする”には、<frameset cols="113,*" framespacing="1" border="0" frameborder="0"> 部分の 113 を 0 に変更します。     上ページを”見えなくする”には、 <frameset rows="30,*" framespacing="1" border="0" frameborder="0">   部分の 30 を 0 に変更します。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 6.x〜 などで web-slideshow.html (左右フレーム) や、web-slideshow2.html (上下フレーム) を開きます。    更新の確認は、ie、Netscapeやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。   Netscapeは、Ctrl+Rキーで。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像なども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号5〃6スタイルシートリファレンスホームページ開設入門。   Web DevelopmentWeb開発IE10 互換性クックブック〃開発者向けガイド、IE API リファレンスIE 開発 > HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点XML〃リファレンスDHTML

 

(*1-1)  web-slid-left.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

#FFF

 

1=繰り返し 0≠繰り返し

切り替えタイマー(15000ms)=15

右初期ページ、URL( 任意値)
右スライドショー表示ページ
以下、同様。

最後は、 ", の『,』が無く、『"』

 

 

 

 

 

 

 

 

タイトルバー、タスクバーに表示するページ名(≠ファイル名)

ターゲット(framename=右フレーム)

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="faviconj.ico">

<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<script language="JavaScript">
<!-- Original: Randy Bennett (rbennett@thezone.net) -->
<!-- Web Site: http://home.thezone.net/~rbennett/sitemap.htm -->
<!-- Modified by: Ronnie T. Moore, Editor -->
<!-- Begin
var repeatshow = 1;   // 1 = 繰り返しループyes、 0 = no
var timedelay = 20000;  //  切り替え時間15秒(例)

var page = new Array(
"http://www./……/xxx.html",
"http://www./……/xxx.html",
"http://www./……/xxx.html",

====  この間、説明を省略。  ====

"http://www./……/xxx.html"
);   // 最後は、 ", の『,』が無く、『"』

// your "the end" page. Necessary if repeatshow = 0;
var endpage = "the-end.html";

var slidenum = 0;
var slidecount = page.length;
var timerID = 0;
var win2;
function showSlideShow() {
slidenum++;
if (slidenum < slidecount+1) {
parent.main.location.href = page[slidenum-1];
}
if (slidenum == slidecount+1) { // if finished
if (repeatshow) {
slidenum = 0;
timerID = setTimeout('showSlideShow()', timedelay)
}
else parent.main.location.href = endpage;
}
else timerID = setTimeout('showSlideShow()', timedelay);
}
// End -->
</script>

<title>サンプルページ  スライドショー左</title>
<base target="main">
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->

 

(*1-2)  web-slid-top.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

#FFF

 

1=繰り返し 0≠繰り返し

切り替えタイマー(15000ms)=15

下初期ページ、URL( 任意値)
下スライドショー表示ページ
以下、同様。

最後は、 ", の『,』が無く、『"』

 

 

 

 

 

 

 

 

タイトルバー、タスクバーに表示するページ名(≠ファイル名)

ターゲット(framename=右フレーム)

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="faviconj.ico">

<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<script language="JavaScript">
<!-- Original: Randy Bennett (rbennett@thezone.net) -->
<!-- Web Site: http://home.thezone.net/~rbennett/sitemap.htm -->
<!-- Modified by: Ronnie T. Moore, Editor -->
<!-- Begin
var repeatshow = 1;   // 1 = 繰り返しループyes、 0 = no
var timedelay = 20000;  //  切り替え時間15秒(例)

var page = new Array(
"http://www./……/xxx.html",
"http://www./……/xxx.html",
"http://www./……/xxx.html",

====  この間、説明を省略。  ====

"http://www./……/xxx.html"
);   // 最後は、 " の『,』が無く、『"』

// your "the end" page. Necessary if repeatshow = 0;
var endpage = "the-end.html";

var slidenum = 0;
var slidecount = page.length;
var timerID = 0;
var win2;
function showSlideShow() {
slidenum++;
if (slidenum < slidecount+1) {
parent.main.location.href = page[slidenum-1];
}
if (slidenum == slidecount+1) { // if finished
if (repeatshow) {
slidenum = 0;
timerID = setTimeout('showSlideShow()', timedelay)
}
else parent.main.location.href = endpage;
}
else timerID = setTimeout('showSlideShow()', timedelay);
}
// End -->
</script>

<title>サンプルページ  スライドショー上</title>
<base target="main">
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->

 

(*2)  web-slid-left.htm、web-slid-top.htm  (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

※:<body> 部の編集 JavaScript 背景 リンク 表示済みリンクンク(任意値)

 

<!-- ★ ↓ onload="timerID=setTimeout('showSlideShow()',timedelay)" 部分をコピー&ペーストします。 ------------ -->

<body onload="timerID=setTimeout('showSlideShow()',timedelay)">

====  この間、説明を省略。  自由コンテンツ・HTMLを記述します。   ====

 

< 補足 >    適時参照あれ!。

 ・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。