1.  サイト 1  コメント …
    1. Radio Station
    2. Microsoft Radio Tuner
    3. ♪□Movie ストリーミング
    4. BBC
    5. Digitally Radio
    6. スライドショー 19
    7. 画像切り替え 18
    8. 画像切り替え 13
    9. 画像切り替え 21
    10. スライドショー 21
    11. データベース15
    12. Apple
    13. Fashion TV
    14. BIGLOBE ストリーム 女優
    15. … 
  2.  サイト 2  コメント …
    1. サイト21 …
    2. サイト22 …
    3. サイト23 …
    4. サイト24 …
    5. サイト25 …
    6. サイト26 …
    7. サイト27 …
    8. … 
  3.  サイト 3  コメント …
    1.  サイト 31  …
      1. サイト311 …
      2. サイト312 …
      3. サイト313 …
      4. サイト314 …
      5. サイト315 …
      6. サイト316 …
      7. サイト317 …
      8.  …
    2.  サイト 32  …
      1. サイト321 …
      2. サイト322 …
      3. サイト323 …
      4. サイト324 …
      5. サイト325 …
      6. サイト326 …
      7. サイト327 …
      8.  …
    3.  サイト 33  …
      1. サイト331 …
      2. サイト332 …
      3. サイト333 …
      4. サイト334 …
      5. サイト335 …
      6. サイト336 …
      7. サイト337 …
      8.  …
    4.  サイト 34  …
      1. サイト341 …
      2. サイト342 …
      3. サイト343 …
      4. サイト344 …
      5. サイト345 …
      6. サイト346 …
      7. サイト347 …
      8.  …
  4.  サイト 4  コメント …
    1.  サイト 41  …
      1. サイト411 …
      2. サイト412 …
      3. サイト413 …
      4. サイト414 …
      5. サイト415 …
      6. サイト416 …
      7. サイト417 …
      8.  …
    2.  サイト 42  …
      1. サイト421 …
      2. サイト422 …
      3. サイト423 …
      4. サイト424 …
      5. サイト425 …
      6. サイト426 …
      7. サイト427 …
      8.  …
    3.  サイト 43  …
      1. サイト431 …
      2. サイト432 …
      3. サイト433 …
      4. サイト434 …
      5. サイト435 …
      6. サイト436 …
      7. サイト437 …
      8.  …
    4.  サイト 44  …
      1. サイト441 …
      2. サイト442 …
      3. サイト443 …
      4. サイト444 …
      5. サイト445 …
      6. サイト446 …
      7. サイト447 …
      8.  …
  5.  サイト 5  コメント …
    1.  サイト 51  …
      1. サイト511 …
      2. サイト512 …
      3. サイト513 …
      4. サイト514 …
      5. サイト515 …
      6. サイト516 …
      7. サイト517 …
      8.  …
    2.  サイト 52  …
      1. サイト521 …
      2. サイト522 …
      3. サイト523 …
      4. サイト524 …
      5. サイト525 …
      6. サイト526 …
      7. サイト527 …
      8.  …
    3.  サイト 53  …
      1. サイト531 …
      2. サイト532 …
      3. サイト533 …
      4. サイト534 …
      5. サイト535 …
      6. サイト536 …
      7. サイト537 …
      8.  …
    4.  サイト 54  …
      1. サイト541 …
      2. サイト542 …
      3. サイト543 …
      4. サイト544 …
      5. サイト545 …
      6. サイト546 …
      7. サイト547 …
      8.  …
超高速サーチエンジン - 日本Googleで検索します。    太陽風ДζΨΠ∀ サイト内検索ページを、NewWinで開きます。 関連検索、WWW検索
    検索箇所 :  更新日 :
   

アクセス数 :
ハイパーリンクのクリックでメニュー・サイト選択、サウンド・ムービー・ストーリームコンテンツを連続演奏 - WindowsMediaPlayerパネル制御  
     

 

 

 

ホーム へ       サンプルページ  Hello!……のページへようこそ …* 2i sample2i_index.htm

トップページ(例)、スライドショー 14折り畳みリスト3ci、サイト内検索a時計aお気に入りに追加ボタンお気に入りに追加ボタン、が実装済み。      DHTML。      カスタマイズはテキストエディターなどで可。    all 対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、 折り畳みメニューのマウスオーバー・クリックや、〔Search〕ボタン押さえる、WinMediaPlayerのパネル操作などで。

 

< ご使用方法 >

・ ローカル(=PC)への保存は、sample2i_index.htm、outline.js を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    アイコンを、折り畳みリスト3ci を参考にダウンロード。  ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。

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

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

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 8.x〜 などで開いて。    更新の確認は、ie、Safariやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。

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

 ・ 関連情報 :色記号5〃6スタイルシートリファレンスホームページ開設入門が便利!。   Web DevelopmentWeb開発MSDN IE8 HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点IE7IE6XMLDHTML

 

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

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

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

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

<style type 〜</style>は(削除可)
(*1)〜(*3)表タイトル背景

body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent
お気に入り、タスクバーに表示するページ名(≠ファイル名)

 

時計

 

 

 

 

 

スライドショー14


遷移時間(3秒)
切り替え間隔(7秒)

画像URL

 

 

 

 

 

折り畳みメニュー3ci  script language 部分は、FrontPageで編集後、テキストエディターで要再編集。

 

 

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

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

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url(''); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url(''); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#FFFFFF; background-color:#01A3AD; text-decoration:underline; }
a:active { color:#FFFFFF; background-color:#02A8AA; text-decoration:underline; }
font {
font-size:12px;
line-height:13px;
}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
-->
</style>

<base target="_blank">
<title> サンプルページ  Hello!……のページへようこそ …* 2i</title>

<!-- ☆ --- 時計 ------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
<!--webbot bot="HTMLMarkup" startspan -->
<script>
var dayarray=new Array("日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日")

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

setInterval("getthedate()",1000)
}
</script>
<!--webbot bot="HTMLMarkup" endspan -->
<!-- ☆ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->

<!-- ☆ --- スライドショー14 ------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
<SCRIPT language="JavaScript">
<!--
var time=3;
var rtime=7000;
var image= new Array();
image[0]='http://xml-xsl.sakura.ne.jp/img_chg12/14.jpg';

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

}
//-->
</SCRIPT>
<!-- ☆ --- スライドショー14 ------- ↑ この間をコピー、編集、ペーストします。 ---------- -->

<!-- ☆ --- 折り畳みメニュー3ci -------- ↓ この間をコピー&ペーストします。 ------------ -->
<!--webbot bot="HTMLMarkup" startspan -->
<style type="text/css"><!--
li {
MARGIN-TOP: 1px; MARGIN-LEFT: -22px
}
--></style>
<script language="JavaScript" fptype="dynamicoutline">
<!--

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

//-->
</script>
<!--webbot bot="HTMLMarkup" endspan -->
<!-- ☆ --- 折り畳みメニュー3ci -------- ↑ この間をコピー&ペーストします。 ------------ -->

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

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

※:<body> 部の編集  Script   Script部分 → は、FrontPageで編集後、テキストエディターで要編集。

DIV幅 高さ 背景画像

表幅 高さ

 

画像切り替え遷移・フェイド効果

初期画像

 

 

折り畳みメニュー3ci

 

URL
メニュー・サイト名

URL ターゲット 吹き出し メニュー・サイト名

 

 

 

 

Google日本検索窓

 

 

 

 

時計

 

 

 

ローカル・リモートに保存時刻

 

 

アクセスカウンター

 

 

WindowsMediaPlayer - ActiveX

 

音源URL

 

 

 

 

 

♪□ 連続演奏ハイパーリンク

 

 

 

 

☆ お気に入りに追加 

 

 

 

<!--webbot bot="HTMLMarkup" startspan -->
<body onLoad="imgchange(),goforit();" onclick="dynOutline()" language="Javascript1.2">
<!--webbot bot="HTMLMarkup" endspan -->
<!-- ★ --- ↑の、onLoad="imgchange(),goforit();" onclick="dynOutline()" language="Javascript1.2" 〔スライドショー14、時計、折り畳みメニュー3ci〕と、------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
<!-- ★ ---- DIV、表 ------- ↓ この間をコピー&ペーストします。 ------------ -->
<!-- ■ ---- 位置調整のためのDIV有りは、 ↓ この間をコピー&ペーストします。 -->
<!--               表示枠位置     表示枠サイズ        座標              表示枠背景色 -->
<div style="position:Relative; top:-15; left:-10; width:1450; height:76; z-index:0; visibility:visible;background-color:#FEFEFE;background-image: url('93bar_sv.gif');border-left: 1px solid #F0F0F4; border-top: 1px solid #F0F0F4; border-right: 1px solid #E2E2E7; border-bottom: 1px solid #E2E2E7;; font-style:normal; font-variant:normal; font-weight:normal; font-size:10px; font-family:Verdana">
<table border="0" width="1400" cellspacing="0" cellpadding="4" style="border-collapse: collapse" bordercolor="#FFFFFF" id="table1" height="76">
<tr>
<td width="113">
<!-- ★ ---- スライドショー14 ------- ↓ この間をコピー&ペーストします。 ------------ -->
<!--webbot bot="HTMLMarkup" startspan -->
<div style="position:Absolute; top:0; left:0;">
<IMG src='http://xml-xsl.sakura.ne.jp/img_chg12/2.jpg' id="imgframe" style="filter:blendTrans">
</div>
<!--webbot bot="HTMLMarkup" endspan -->
<!-- ★ ---- スライドショー14 ------- ↑ この間をコピー&ペーストします。 ------------ -->
</td>

<td width="218">
<!-- ☆ --- 折り畳みメニュー3ci -------- ↓ この間をコピー&ペーストします。 ------------ -->
<!--webbot bot="HTMLMarkup" startspan -->
<div style="position:absolute; top:1; left:123; width:170; height:10; z-index:0; visibility:visible; background-color:#FFFFFF; background-image: url('93bar_sv.gif');" STYLE="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=95, FinishOpacity=95)">
<!-- □ ---- 折り畳みメニューは、↑の、 onclick="dynOutline()" と、↓ この間をコピー、編集、ペーストします。 ---------- -->
<table width="170" border="1" cellspacing="0" cellpadding="2" bgcolor="#FFFFF4" style="border-collapse: collapse" bordercolorlight="#F1F0FB" bordercolordark="#D5CED3">
<tr>
<td background="wttec.gif">
<ol dynamicoutline initcollapsed><font size="2" style="font-size: 12px; line-height: 13px;">
<li STYLE="cursor:hand"><span style="background-color: #FB6B01; color: #FFFFFF; list-style-image: url('10dbbl.gif');" title="\^o^//(>_<) - 展開/折り畳みしまっ…*。"><b> サイト 1 </b></span> コメント …<ol>
<li><span style="list-style-image: url('10vl_r.gif');"><a href="station1w.htm" target="_blank" title="♪♪ - Classics・WorldMusic・Pops・Jazz・Bleus・Rock">Radio Station</a></li>

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


</table>
<!-- □ --- 折り畳みメニュー ↑ この間をコピー、編集、ペーストします。 ---------- -->
</div>
<!--webbot bot="HTMLMarkup" endspan -->
<!-- ☆ --- 折り畳みメニュー3ci -------- ↑ この間をコピー&ペーストします。 ------------ -->
</td>

<td>
<!-- ★ ---- Google日本検索窓 ------ ↓ この間をコピー、編集、ペーストします。 ---------- -->
<!--webbot bot="HTMLMarkup" startspan -->

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

</FORM>
</div>
<!--webbot bot="HTMLMarkup" endspan -->
<!-- ★ ---- Google日本検索窓 ------ ↑ この間をコピー、編集、ペーストします。 ---------- -->
</td>

<td>
<!-- ★ ---- 時計 ー------- ↓ この間をコピー&ペーストします。 ------------ -->
<!--webbot bot="HTMLMarkup" startspan -->

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

<!--ebbot bot="HTMLMarkup" endspan " -->
<!-- ★ ---- 時計 ー------- ↑ この間をコピー&ペーストします。 ------------ -->

<!-- ★ --- リモート/ローカル保存タイムスタンプ  ------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
<div style="position:Absolute; left:645;top:30; width:148; height:10; z-index:0; visibility:visible; background-image: url(''); background-color:"><font size="2" face="MS PGothic" color="#FFFFFF"><SCRIPT LANGUAGE="JavaScript">
document.write(" 更新 : "+document.lastModified);
</SCRIPT></font><br><font face="Tahoma" color="#FFFFFF">アクセス数 :</font></div>
<!-- ★ --- リモート/ローカル保存タイムスタンプ  ------- ↑ この間をコピー、編集、ペーストします。 ---------- -->

<!-- ★ --- アクセスカウンター ー------- ↓ この間をコピー、編集、ペーストします。 ---------- -->

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

</div>
<!-- ★ --- アクセスカウンター ー------- ↑ この間をコピー、編集、ペーストします。 ---------- -->
</td>

<td width="160">
<!-- ★ ---- WindowsMediaPlayer - ActiveX ------ ↓ この間をコピー、編集、ペーストします。 ---------- -->

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

<param name="Filename" value="http://www./……/xxx..mid">

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

<param name="VideoBorder3D" value="0">
<param name="Volume" value="0">
<param name="WindowlessVideo" value="0">
</object>
</div>
<!-- ★ ---- WindowsMediaPlayer - ActiveX ------ ↑ この間をコピー、編集、ペーストします。 ---------- -->

<!-- ★ --- ♪連続演奏、ストリーム -------- ↓ この間をコピー&ペーストします。 ------------ -->
<div style="font:normal 11px tahoma; position:Absolute; top:50; left:830; width:160; height:15; z-index:0; visibility:visible; background-image: url(''); background-color:">
<font face="MS Pゴシック" size="3" style="font-size: 12px; line-height: 12px">

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

<font color="#E8FF02">☆</font></a></span></font></font>
<!-- ★ --- ♪連続演奏、ストリーム -------- ↑ この間をコピー&ペーストします。 ------------ -->

<!-- ★ ---- お気に入りに追加 ------- ↓ この間をコピー&ペーストします。 ------------ -->

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

</div>
<!-- ★ ---- お気に入りに追加 ------- ↑ この間をコピー&ペーストします。 ------------ -->

</td>
<td width="10"> </td>
<td width="10"> </td>
<td width="10"> </td>
</tr>
</table>
</div>
<!-- ■■ ----- DIV、表 ------ ↑ この間をコピー&ペーストします。 ------------ -->

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

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