IFRAME、Z-Indexエレメントの使用方法
=(・。・)= IE5.5 のIFRAME機能。   IFRAMEを他のIFRAMEの上に重ねられる。   IFRAMEで透明なコンテンツを含むことができます。   作成には、IFRAMEタグを使用し、HTMLファイルの中にIFRAMEを作成します。 SRC属性はフレーム内に表示のコンテンツを指定します。  TARGET属性でWebページをIFRAMEにロードします。IFRAME内での透明なコンテンツ対応は IE5.5〜。    IFRAMEのz順を指定しフレームを重ねます。
Iframeはドラッグできます。 Z-Index 1:  ■ =(^。^)= このタブでドラッグを。 Z-Index 2:  ★ =(・。.・)= このタブでドラッグを。 Z-Index 3:  ● 〔`。´ 〕このタブでドラッグを。

 

 

 

ホーム       サンプルページ  IFRAME3  iframe3.htm

透明・ドラッグ可のIFRAMEにコンテンツを表示。      DHTML、HTC。      コンテンツ、配色、サイズなどのカスタマイズはテキストエディターなどで可。    IE5.5〜対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、ドラッグなどで。  復旧は、[F5]キーなどで再読込み。

 

< ご使用方法 >

 ・ ローカル(=PC)への保存は、iframe3.htmiframe3_cl.htm(IFRAMEに表示、透明背景ページ)、iframe3_xx.htm(IFRAMEに表示ページ)、winlessmovable.htc を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。   ※: 変わってしまったファイル名や、*.html 中のパスは要修正。   

 ・ このDHTMLの実装方法は、iframe3.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〜 などで開いて。    ブラウザ設定の確認 : 【Internet Explorer】-[ツール] - [インターネットオプション] - [セキュリティー] - [レベルのカスタマイズ] - [その他] - [IFRAMEのプログラム…]:◎ 有効にする,などで。   更新の確認は、ie、Safariやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。

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

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

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

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

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

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

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

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

 

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

 

全体

 

 

IFRAME表示エリア

 

説明エリア 

 

 

 

タイトルバー  背景画像

 

 

 

HTC 

IFRAMEタブ 背景画像

 

(c)バー 背景画像

 

 

<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>サンプルページ  IFRAME 3</title>

<!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<STYLE>
BODY{
margin:5;
background: #F5F3F3;
font-family:verdana;
font-size:70%;
}

.bar{
background:#E1E3C6;
width:100%;
height:25px;
border-top:1px solid #A020F0;
border-bottom:1px solid #FFFFFD;
}
.desbar{
background:#FFFFFF;
width:100%;
padding: 10px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #000000;
color:black;
font-size:10pt;
}
.title{
background: #D4D0C8 url('http://www …… 30tbrb1.gif');
font-size:13pt;
color:#FFFF00;
padding-left:10px;
}

@media all
{
move\:iframez {
position:absolute;
behavior: url(winlessmovable.htc);
}
.iframez{
font-family:MS PGothic; font-size:9pt; background: #D4D0C8 url('http://www …… 30tbwh1.gif'); border:1px solid #A98CD1; position:absolute; width:323; height:20; cursor:hand; padding:5px; padding-left:10px; color: #01B2B4;
}
.copyright
{
position:relative; height:25px; width:100%; background: #D4D0C8 url('http://www …… 30tbsd1.gif'); border-bottom:1px solid #AD86E1; border-top:1px solid #8A7EA4;border-right:1px solid #AD86E1;border-left:1px solid #AD86E1; left:0; top:00; font-family:verdana; font-weight:normal; font-size:8pt; color:#f9eeff; padding:4px; padding-left:10px; z-index:2
}
</style>
<script>

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

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

 

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

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

 

 

タイトル文字 

説明テキスト


 

IFRAME表示エリア高さ 表示テキスト

IFRAME1位置 タブ文字
フレームサイズ

IFRAME2位置 タブ文字
フレームサイズ

IFRAME3位置 タブ文字
フレームサイズ

 

(c)バー、ハイパーリンク 

 

<body>

<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<div class="bar">
<div class="title">IFRAME、Z-Indexエレメントの使用方法</div>
</div>
<div class="desbar" ><div style="width:100%">
=(・。・)= IE5.5 のIFRAME機能。 …… IFRAMEのz順を指定しフレームを重ねます。
<br>
</div>
</div>
<div class="bar" style="height:700px; overflow:hidden; padding:10px; color:#510000"> Iframeはドラッグできます。

<move:iframez id="square1" class="iframez" style="top:30; left:10; z-index:1;"><b>Z-Index 1:</b>  ■ =(^。^)= このタブでドラッグを。
<iframe id="oIframe" src="iframe3_xx.htm" style="position:absolute; top:24; left:0; width:700; height:250; z-index:1 "></iframe>
</move:iframez>

<move:iframez id="square1" class="iframez" style="top:60; left:50; z-index:2;"><b>Z-Index 2:</b>  ★ =(・。.・)= このタブでドラッグを。
<iframe id="oIframe" src="iframe3_cl.htm" allowTransparency="true" style="position:absolute; top:24; left:00; width:800; height:600; z-index:1 "></iframe>
</move:iframez>

<move:iframez id="square1" class="iframez" style="top:90; left:90; z-index:3;"><b>Z-Index 3:</b>  ● 〔`。´ 〕このタブでドラッグを。
<iframe id="oIframe" src="iframe3_xx.htm" style="position:absolute; top:24; left:0; width:800; height:400; z-index:1 "></iframe>
</move:iframez>
<p> 
</div>
<div class="copyright"><A href="index2.html" target=_top>
&#169 ; 2000 =(・。・)= 太陽風ДζΨΠ∀ </A>
</div>
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
 

 

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

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

 

 

ページのタイトル

透明背景色

任意HTML

 

<!--TOOLBAR_START--><!--TOOLBAR_EXEMPT--><!--TOOLBAR_END-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>サンプルページ  IFRAME_cl</title>
</head>
<body link="#54006C" vlink="#62000D" alink="#00FFFF" allowTransparency="true" style="margin:0; background-color:transparent; font-size:10pt ; font-family:Verdana; text-align:left; font-size:70%">
<a href="http://www …… .html" style="font-size:10pt; font-family:Verdana; font-weight:bold; position:absolute; top:100; left:20; width:100%"> ・ =(゜。.゜)= 太陽風ДζΨΠ∀ サイトマップ 総合</a>

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

 ここに、らくがきをぎょうさん書くのだよ…*</P>
</body>
</html>  

 

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

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

ページのタイトル

背景画像

任意HTML

 

<!--TOOLBAR_START--><!--TOOLBAR_EXEMPT--><!--TOOLBAR_END-->
<html>
<head>
<title>サンプルページ  IFRAME_xx</title>
</head>
<body link="#54006C" vlink="#62000D" alink="#00FFFF" allowTransparency="true" style="margin:0; font-size:10pt; background-color:#EDECFA; font-family:Verdana; text-align:left; font-size:70%; background:#F8F5F5 url('http://www.pat.hi-ho.ne.jp/oka_tosho/whtsnd.gif');">
<a href="http://www …… .html" style="font-size:10pt; background-color:#ffffff; font-family:Verdana; font-weight:bold; position:absolute; top:80; left:20; width:100%"> ・  =(・。・)= 太陽風ДζΨΠ∀ サイトマップ カテゴリ版</a>

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

<a href="http://www.broadcast.com/television/fashiontv/" style="font-size:10pt; background-color:#ffffff; font-family:Verdana; font-weight:bold; position:absolute; top:280; left:20; width:100%"> ・ fashion tv: video </a>
<P> ・ ここに、らくがきをぎょうさん書くのだよ…*</P>
</body>
</html>  

 

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

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