JavaScript DHTMLサンプル

Google Maps/Earth API

投稿画像 -Photos
折れ線間距離と面積
白地図
全国ダムマップ
日本百名山
公示地価マップ
全国鉄道マップ
東京都バス路線マップ
スターバックスマップ
国旗・首都
新宿周辺コーヒー
新宿周辺コーヒー(リスト付き)
連番マーカー
マーカーリスト
セレクトマップ
ストリートビュー10
交通状況
ドライブ シミュレーターm6
ドライブシミュレーターe6
ルート案内3d
ルート案内3a
投稿写真
フライトシミュレーター
上空散歩
上空俯瞰m7
上空俯瞰e8
星座・地球

画像・スライドショー

フルスクリーン背景MP4
スライドショー45
スライドショー44
スライドショー40
スライドショー41a
スライドショー38d
スライドショー 36b
スライドショー 36a
スライドショー36
スライドショー34
スライドショー30
スライドショー28
スライドショー27
スライドショー27w
スライドショー26
スライドショー23
スライドショー21
スライドショー 19b
スライドショー 14c
画像切換28
画像切換28a
画像切り換え18
画像切換13
照明画像4
画像揺れ

CSS・メニュー・データベース

Filters and Transitions
Alpha Filter
Shodow Filter 
タブメニュー5
タブメニュー17a1
タブメニュー17fr
タブメニュー12j
タブメニュー123
タブメニュー9
折り畳みメニュー
ツリーメニュー 25
折り畳みメニュー37if
折り畳みメニュー26fr
マウスオーバー24
マウスオーバー35
サイト内検索5a
データベース15
国旗1fr
ソート5
ソート3a
Data Bind
Data Find
Stock Sorter
CD検索
PostPet コロちゃん
クイズ3
問答
絵合わせ9b
ジグソーパズル
ドラッグ ドロップ
ホットスポット

マルチメディア・女優

時計11
表5
ランダムBGMa
サウンド オン/オフ
サウンド オン/オフ
Win Media Player 0b
Win Media Player 4
Win Media Player 0b
Win Media Player 4b
Win Media Player 5b
FLV Player
Real Play
QuickTime Player 1
QuickTime Player 3
加藤 綾子(画像)
北川景子
能年玲奈
渡辺真理
本上まなみ
黒谷友香
鶴田真由
指原莉乃
瀧本美織
星野真里
渡辺真理
矢吹春奈
松嶋初音
権藤朱実
仙川環
三好礼子
清水ミチコ
フィレンツェ田舎生活便り2
ユキノヒノシマウマ
jimi's blog
たびそら 三井昌志
ギリシャの猫
ニューヨークの遊び方
私家版里山図鑑

World Media・Fashion

マルチ検索
ニュース見出し(RSS)
音楽家検索
Apple
MSN Entertainment
Afro Pop
Panoramio
iTunes Charts
Fashion TV
Windows Media
PlayBoy
ロイター
BBC
BIGLOBE♪□
Microsoft Radio
Reuters Photos
NASA
CNN
iTunes Movie Trailers
Win Media Guide ♪
演劇
日本文学電子図書館
日本古典文学
紀伊國屋書店
GeNii学術コンテンツ
外務省
都道府県市区町村
全国方言辞典
登山・ハイキング情報
山と高原
全頂制覇百名山
アウトドア
樹木
季節の花
野鳥

JAZZ

Archie Shepp
Sun Ra
Wadada Leo Smith
Dennis Gonzalez
Sonny Sharrock
CHARLIE HADEN
Esperanza Spalding
Omar Sosa
Randy Weston
Tony Malaby
William Parker
Chick Corea
Lalo Schifrin
Gil Evans
Bob Stewart
Ron Carter
Jack DeJohnette
Muhal Richard Abrams
Wynton Marsalis
Sonny Rollins
Charles Mingus
Noah Howard
Henry Grimes
Karl Berger
Peter Brotzmann
Flora Purim
John Tchicai
Oliver Lake
Steve Kuhn
Wayne Shorter
Steve Gadd
Jacques Loussier
John Hicks
Bill Evans/sax
Steve Turre
Evan Parker
Pat Metheny
Petra Magoni
Harvey Mason

CAR

Porsche
Bugatti
Venturi
Aston Martin
Ferrari
Jaguar gl
Jaguar en
McLaren
DARE
Noble
Invicta
Radical
Stealth
Caterham
Pontiac
Lamborghini
Alfaromeo
Alfaromeo jp
Bentley
Lotus
BMW
Alpina
Rolls-Royce
Saleen
FreightL;iner
Sterling
Mosler
Tesla
Peugeot
Citroen
Volvo
Audi
Opel
Fiat
Volkswagen
BMW
Benz
Landrover
Lancia
Daimler Chrysler
Chrysler
Jeep
Ford
Lincoln
GM
Pontiac
Hummer

ホーム へ       サンプルページ  折り畳みメニュー39  oritatami39.htm

折り畳みメニュー、選択ホルダー(階層)のみ展開。      DHTML、jQuery。      ハイパーリンク、配色などのカスタマイズはテキストエディターなどで可。    all 対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、メニュー展開、ハイパーリンクオープンなどで。

 

< ご使用方法 >

 ・ ローカル(=PC)への保存は、oritatami39/ をクリック開いたホルダーで、oritatami39.htm、00443980.js、00443980.css を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※:  変わってしまった、ファイル名や、*.html 中のパスは要修正。

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

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

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 10.x〜 などで開いて。     更新の確認は、[F5]キー を押し、最新データ読み込み、で。    あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ツール] - [インターネット オプション] - [閲覧の履歴] - [削除] などでも。

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

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

 

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

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

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

互換表示

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

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景
body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent

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

jQuery

 

展開/折り畳み速度
初期展開コンテンツ 先頭(例)

 

メニュー幅

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

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

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

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

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFF; }
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>サンプルページ  折り畳みメニュー39</title>

<!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<LINK href="00443980.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="00443980.js" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
$(document).ready(function() {
$("#myAccordion").myAccordion({
speed: "fast", // @param : low, medium, fast
defautContent: 0 // @param : number
});
});
</script>

<style type="text/css"><!--
#myAccordion {width:150px;}
--></style>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
 

 

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

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

 

メニュータイトル

URL 新しいWinで開く サイト名

以下、同様。

吹き出し


<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<DIV id="myAccordion">
<!-- Element -->
<DIV class="myAccordion-declencheur"><H4>Google Maps/Earth API</H4></DIV>
<DIV class="myAccordion-content">
<a href="http:// …… /google_maps27.htm" target="_blank">折れ線間距離と面積</a><br/>
<a href="http:// …… /google_maps26.htm" target="_blank">白地図</a><br/>
<a href="http:// …… /google_maps25/google_maps25.htm" target="_blank">日本百名山</a><br/>

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

<a href="http:// …… /google_earth8.htm" target="_blank" title="メッセージ世界的名建造物の上空俯瞰、CG+実画像。">上空俯瞰e8</a><br/>
<a href="http:// …… /google_earth5.htm" target="_blank" title="星座名">星座・地球</a><br/>
</DIV>

<!-- Element -->
<DIV class="myAccordion-declencheur"><H4>画像・スライドショー</H4></DIV>
<DIV class="myAccordion-content">
<a href="http:// …… /slideshow21/slideshow21s.htm" target="_blank" title="Flash、XML、アウトルック風の表示 、フェイド効果。">スライドショー21</a><br/>
<a href="http:// …… /slideshow34/slideshow34.htm" target="_blank" title="雪崩れ効果、自律/ボタン制御、マウスオーバーでコメント表示、クリックでページを開く。゙">スライドショー34</a><br/>
<a href="http:// …… /slideshow28.htm" target="_blank" title="ランダム自動スライドショー、フェイド効果。">スライドショー28</a><br/>

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

<a href="http:// …… /slide_show14a/slide_show14c.htm" target="_blank" title="フェイドイン・アウト風〔ブレンド効果〕で自動(タイマー)画像切り替え、1230x770。">スライドショー 14c</a><br/>
<a href="http:// …… /slideshow19b.htm" target="_blank" title="ポーズ・フェイド効果・非ランダム可、画像URL任意、別画像。 H1230xV1024。">スライドショー 19b</a><br/>
</DIV>

<!-- Element -->
<DIV class="myAccordion-declencheur"><H4>CSS・メニュー・データベース</H4></DIV>
<DIV class="myAccordion-content">
<a href="http:// …… /filters_transitions.htm" target="_blank" title="CSS、各種フィルター/変遷の効果のデモとHTML生成。">Filters and Transitions</a><br/>
<a href="http:// …… /alpha_filter.htm" target="_blank" title="CSS、Alphaフィルター効果のデモとHTML生成。">Alpha Filter</a><br/>
<a href="http:// …… /shadow_filter.htm" target="_blank" title="CSS、シャドウフィルター効果のデモとHTML生成。">Shodow Filter </a><br/>

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

<a href="http:// …… /jigsaw.htm" target="_blank">ジグソーパズル</a><br/>
<a href="http:// …… /drag_drop0/drag_drop0js.htm" target="_blank">ドラッグ ドロップ</a><br/>
<a href="http:// …… /hot_spot3.htm" target="_blank">ホットスポット</a><br/>
</DIV>

<!-- Element -->
<DIV class="myAccordion-declencheur"><H4>マルチメディア・女優</H4></DIV>
<DIV class="myAccordion-content">
<a href="http:// …… /clock11/clock11.htm" target="_blank" title="天気予報付き、背景画像自在。">時計11</a><br/>
<a href="http:// …… /hyou4-5/hyou5.htm" target="_blank" title="サウンド・ムービーランチャー、□小Win">表5</a><br/>
<a href="http:// …… /sound.htm" target="_blank" title="開始/停止ボタン">サウンド オン/オフ</a><br/>

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

<a href="http://ameblo.jp/senkawa-tamaki/" target="_blank">仙川環</a><br/>
<a href="http://www.fairytale.jp/index.html" target="_blank">三好礼子</a><br/>
</DIV>

<!-- Element -->
<DIV class="myAccordion-declencheur"><H4>World Media・Fashion</H4></DIV>
<DIV class="myAccordion-content">
<a href="http://www.apple.com/" target="_blank" title="メッセージ">Apple</a>
<a href="http://entertainment.msn.com/" target="_blank" title="Celebrity gossip, news, photos and more">MSN Entertainment</a>
<a href="http://www.sternsmusic.com/index.php?" target="_blank" title="メッセージ">Afro Pop</a>

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

<a href="http://trailers.apple.com/trailers/" target="_blank" title="Apple -iTunes Movie Trailers">iTunes Movie Trailers</a>
<a href="http://www.windowsmedia.com/Mediaguide/US/Home" target="_blank" title="Windows Media Guide | Music">Win Media Guide ♪</a>
</DIV>

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

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

 

(*3) 00443980.css (例)         テキストエディターで開き、編集しhogehoge.htmlと同ディレクトリーに転送・配置します。 

   *.css の編集方法   (*3)をテキストエディターで開き、下記↓の太字部分を編集し使用。
  〔この列ペースト不要〕
 

メニュータイトル背景画像

 

選択メニュータイトル背景画像
凸罫線色
 

メニュータイトル文字色

 

選択メニュータイトル文字色

 

メニュー行間
罫線
フォント フォントサイズ

 

.myAccordion-declencheur {
background: #E7E5E2 url('http://www.pat.hi-ho.ne.jp/oka_tosho/tab_menu12/bg_slva3r.jpg');
padding: 5px; margin-bottom: 1px; cursor: pointer;
}

.myAccordion-declencheur-actif {
background: #00B5B3 url('http://www.pat.hi-ho.ne.jp/oka_tosho/tab_menu12/tbwhb2.gif');
border: 1px outset #D0CEC9;
}

.myAccordion-declencheur * {
margin: 0px; padding: 0px; color: #333;
}

.myAccordion-declencheur-actif * {
color: #004140;
}

.myAccordion-content {
margin: 2px; padding: 0px;
line-height:15px;
border-left: 1px solid #F0F0F4; border-top: 1px solid #F0F0F4; border-right: 1px solid #E2E2E7; border-bottom: 1px solid #E2E2E7;
font-family:メイリオ,Lucida Sans Regular;MS PGothic,MS Gothic, font-size: 12px;
}

.myAccordion-content-actif {
}
 

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

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