φ(.. ) 任意コンテンツ 1(テキスト,HTML)
任意コンテンツ 1、\^o^/
--------------------------------------------------------------
--------------------------------------------------------------
--------------------------------------------------------------
Google日本 BIGLOBE 女優 Fashion TV Microsoft WindowsMediaPlayer


φ(.. ) 任意コンテンツ 2(テキスト,HTML)
任意コンテンツ 2、=(・。.・)=
--------------------------------------------------------------
 超高速サーチエンジン - 日本Googleで検索します。    太陽風ДζΨΠ∀ 関連検索
   検索箇所 :  検索URL:


φ(.. ) 任意コンテンツ 3(テキスト,HTML)
任意コンテンツ 3、└|∵|┐
----------------------------------------------------------------
 

 任意コンテンツ、テキスト \^o^/
 --------------------
 --------------------
 --------------------
 --------------------
 小説家の箴言集 - ランダムメッセージ- Winサイズ指定/可変。 サウンド連続演奏リンクを記述、凸丸角の表(テーブル)- Winサイズ指定/可変。 サウンド連続演奏リンクを記述、メニューのマウスオーバーで背景画像を変化、CSS(超高速タイプ)- Winサイズ指定/可変。 リンクのクリックでWMPパネルを表示、テキストファイルに記述した複数のサウンドファイルを連続演奏。
   Flash、hidden7.htm MP3-非連続演奏、Classics、Jazz、FreeJazz、ストリーミング再生 Flash、XML、曲を選択、非連続演奏、パネル操作、ストリーミング再生、ローディング表示。 hidden7.htm ram- Jazz、プルダウンメニュー hidden7.htm Sound wav 連続演奏 - Jazz・Rops - WindowsMediaPlayerパネル制御 □ Movie wav 連続演奏 - Jazz・Rops - WindowsMediaPlayerパネル制御 □ Movie wav 連続演奏 - Jazz・Rops - WindowsMediaPlayerパネル制御
   hidden7.htm Sound MP3 連続演奏 - Jazz・Rops - WindowsMediaPlayerパネル制御  hidden7.htm Sound MP3 連続演奏 - Classics - WindowsMediaPlayerパネル制御   Web Radio 3個の縦列プルダウンメニューでhidden7.htm - Classics、Rock、World、Blues、Jazz選択、ストリーミング。  Flash、hidden7.htm MP3 - 連続演奏 - Classics、Jazz、FreeJazz、ストリーミング再生  Flash、XML、曲を選択、複数ファイル連続演奏、パネル操作、ローディング表示。

 

 

 

 

 

 

 

 

 

ホーム へ       サンプルページ  折り畳みコンテンツ 8 hidden8.htm

アイコンのクリックで、展開/折り畳みするコンテンツ(HTML、テキスト、画像)。       前回の展開状態の記憶有り(クッキー使用、期間設定可)。     DHTML。     コンテンツ、アイコンなどのカスタマイズはテキストエディターなどで可。    all 対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、アイコンのクリックで。

 

< ご使用方法 >

・ ローカル(=PC)への保存は、hidden8.htmgray-chevron_down.gifbchevup.gifbg_slva2r.jpg、〔参考 : nav_closed.gifnav_open1.gifmenuoff.gifmenuon.gif〕 を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。   ※: 変わってしまったファイル名や、*.html 中のパスは要修正。   

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

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

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

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

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

 

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

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

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

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

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

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

 

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

 

 

 

 

 

 

背景画像 

折り畳みコンテンツ

 

背景画像 

 

 

 

展開状態の記憶有り
〃  時間

展開時のアイコン
折り畳み時の 〃

 

 

<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('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); 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:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; 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>サンプルページ  折り畳みコンテンツ 8</title>

<!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<style type="text/css">

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

margin-top: 2px;
margin-right: 3px;
}

.scheaders{    /*  折り畳みタイトル  */
width: 400px;
font-size: 100%;
font-weight: bold;
border: 1px solid #D4C9DF;
background-color: #EFECF1;
background-image: url(bg_slva2r.jpg);}

.switchcontent{     /*  折り畳みコンテンツ  */  
width: 400px;
border: 1px solid #D4C9DF;
border-top-width: 0;
background-image: url(wttec.gif);
}

</style>

<script type="text/javascript">

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

ar enablepersist="on"  // 展開状態の記憶有り  Enable saving state of content structure using session cookies? (on/off)
var memoryduration="7"  //     〃  時間  persistence in # of days

var contractsymbol='bchevup.gif ' // 展開時のアイコン Path to image to represent contract state.
var expandsymbol='gray-chevron_down.gif' //  折り畳み時の Path to image to represent expand state.

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

</script>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->

 

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

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

※:<body> 部の編集 背景 リンク 表示済みリンクンク アクティブリンクの各色(任意値)

絶対配置( 相対配置=relativeでは、展開時にページコンテンツが下方に移動) 
非透明度(0〜100)

 

アイコン 吹き出し 

 

アイコン 吹き出し タイトル文字

 

折り畳みHTML1(任意値)

以下、同様。

 

 

 

 

折り畳みHTML2(任意値)

 

 

 

 

 

 

折り畳みHTML3(任意値)

 

<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">

<!--webbot bot="HTMLMarkup" startspan -->
<!-- ■ ---- 位置調整のためのDIV有りは、 ↓ この間をコピー&ペーストします。 -->
<!--               表示枠位置     表示枠サイズ        座標              表示枠背景色 -->
<div style="position:absolute; top:10; left:10; width:404; height:10; z-index:0; visibility:visible; background-color:#FFFFFF; background-image: url('');" title="=(゜。.゜)=" STYLE="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=90, FinishOpacity=90)">
<table  …… rdark="#D5CED3">
<tr>
<td bgcolor="#FFFFFF" valign="top" align="left" background="wttec.gif">
<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<p align="left">
<div style="margin-bottom: 5px"><a href="javascript:sweeptoggle('contract')"><img border="0" src="gray-chevron_down.gif" title="全て閉じますよ、(>_<)。" width="16" height="16"><b>全て閉じる</b></a> | <a href="javascript:sweeptoggle('expand')"><img border="0" src="bchevup.gif" title="全て開きますよ、\^o^/。" width="16" height="16"><b>全て開く</b></a></div>

<div class="scheaders"><img src="bchevup.gif " class="showstate" onClick="expandcontent(this, 'sc1')" title="クリック → コンテンツを表示/隠蔽"/>φ(.. ) 任意コンテンツ 1(テキスト,HTML)</div>
<div id="sc1" class="switchcontent">
<!-- ☆ 1 ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
任意コンテンツ 1、\^o^/<br>

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

title="Mediaguide/Home">Microsoft WindowsMediaPlayer</a><br><br>
<!-- ☆ 1 ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->
</div>
<br />

<div class="scheaders"><img src="bchevup.gif " class="showstate" onClick="expandcontent(this, 'sc2')" title="クリック → コンテンツを表示/隠蔽"/>φ(.. ) 任意コンテンツ 2(テキスト,HTML)</div>
<div id="sc2" class="switchcontent">
<!-- ☆ 2 ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
任意コンテンツ 2、=(・。.・)=<br>
--------------------------------------------------------------<br>
<!-- □ a ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
<table width="360" border="1" cellspacing="0" cellpadding="2" bgcolor="#FFFFF4" style="border-collapse: collapse" bordercolorlight="#F1F0FB" bordercolordark="#D5CED3">
<tr>

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

</tr>
</table>
<!-- ☆ a ---------- ↑ この間をコピー、編集、ペーストします。 ---------- --><br>
<!-- ☆ 2 ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->
</div>
<br />

<table border="0" cellspacing="0" cellpadding="0">
<tr><td class="scheaders"><img src="bchevup.gif" class="showstate" onClick="expandcontent(this, 'sc3')" title="クリック → コンテンツを表示/隠蔽"/>φ(.. ) 任意コンテンツ 3(テキスト,HTML)</td></tr>
<tr><td id="sc3" class="switchcontent">
<!-- ☆ 3 ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
任意コンテンツ 3、└|∵|┐<br>
----------------------------------------------------------------<br>
<!-- □ b ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="168" id="AutoNumber1" background="menu_b.gif">
<tr>
<td background="http:// …… menu_t.gif"> </td>
</tr>
<tr>
<td><p> 任意コンテンツ、テキスト \^o^/<br> 

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

<tr>
<td background="menu_u.gif"> </td>
</tr>
</table>
<!-- □ b ----------- ↑ この間をコピー&ペーストします。 ------------ --><br>
<!-- ☆ 3 ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->
</td></tr>
</table>
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
</td>
</tr>
</table>
</DIV>
<!-- ■ ---- 位置調整のためのDIV有りは ↑ この間をコピー&ペーストします。 -->
<!--webbot bot="HTMLMarkup" endspan --> 

 

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

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