Ajax Navagation
Google日本
BBC
w3schools
codeproject
Google
初夏の草原
ウィンドウ サーフィン
遠浅の桟橋
赤銅色の投網
斜光の摩天楼
海原の落日
巻層雲の落日
巻雲の落日1
巻雲の落日2
巻雲の落日3
巻雲の落日4
満ち潮1
満ち潮2
満ち潮3
満ち潮4
満ち潮5
大洋の落日
砂利の岬の夕陽
牧場の小川1
牧場の小川2
牧場の小川3
渓の夕暮れ
開けた渓
睡蓮
麦畑
架橋 - メルボルン
風紋 - 砂漠
山上湖
Apple *
iTunes *
iMac *
Quick Time *
MAC OSX *

 

ホーム へ       サンプルページ  Ajax Nav ajax_nav.htm

ページ内に任意ページ(≠日本語)を表示、≠Frame。      Ajax。      表示ページなどのカスタマイズはテキストエディターなどで可。    all 対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、”初夏の草原”などのクリックで。 ローカルに保存したこのファイルからのみ有効。

 

< ご使用方法 >

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

・ このDHTMLの実装方法は、ajax_nav.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 6.x〜 などで開いて。    更新の確認は、ie、Netscapeやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。   Netscapeは、Ctrl+Rキーで。

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

 ・ 関連情報 : 色記号2スタイルシートリファレンスホームページ開設入門 が便利!。   Web & Internet SamplesOnline ColumnsXMLDHTMLとは?ColorTableHTMLの色指定色見本

(*1) ajax_nav.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>サンプルページ  Ajax Nav</title>

<!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Michael :: http://www.posters-bestellen.nl */

var please_wait = null;

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

}
</script>
<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Michael :: http://www.posters-bestellen.nl */

set_loading_message("接続を行っております。  もうすぐ開きます。");
//-->
</script>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->

 

 

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

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

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

位置

 

背景画像

URL サイト名

以下、同様。

 

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

<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<!-- ■ ---- 位置調整のためのDIV有りは、 ↓ この間をコピー&ペーストします。 -->
<!--               表示枠位置     表示枠サイズ        座標              表示枠背景色 -->
<div style="font:normal 10px Verdana; position:Relative; top:-5; left:-5; width:100%; height:10; z-index:0; visibility:visible;background-color:#FEFEFE;background-image: url('wttec.gif');border-left: #F0F0F4 1px solid; border-top: #F0F0F4 1px solid; border-right: #E2E2E7 1px solid; border-bottom: #E2E2E7 1px solid;" title="=(゜。.゜)=">
<table>
<tr>
<td valign=top width=125 background="wttec.gif">
<H5>Ajax Navagation</H5>
<a href="javascript:void(0)" onclick="open_url('ajax3/02440_w0.htm','my_site_content');">初夏の草原</a><br>

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

<a href="javascript:void(0)" onclick="open_url('http://www.playboy.com/playmates/index.html','my_site_content');">Playmates</a><br>
</td>
<td valign=top>
<div id="my_site_content">
</div>
</td>
</tr>
</table>
</div>
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->

 

 

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

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