インラインフレームに画像を表示
<iframe src="表示させたいリンクURL name="フレーム名 >〜</iframe>
上級編   【10】インラインフレームに画像を配置する 各機能の組み合わせ、画像の切り替え表示
要素 iframe は、ウィンドウを分割する形式のフレームではなく、 同じページウィンドウ内に、
独立してリンクページを表示させるフレームページです。
インラインフレームは、表示サイズ (width=" " height=" ") を決めなければならない。
インラインフレームの表示サイズが決まれば、リンクページの対比させた表示サイズを
テーブルで決めて、その範囲に表示文字列・画像を指定する。表示ページのサイズは多少大きめに
インラインフレームを配置、応用画像表示例
  ← 画像をクリックしてみて下さい
    更新を押すと、はじめの画像に戻ります。
インラインフレームに画像を配置のタグ テーブルタグを省いています。
画像サイズwidth="200" height="120" )と、インラインフレームのサイズの対比に留意。
<iframe src=" 画像切り替え表示URL " name="fline1" frameborder="1" width="205" height="125"> 画像切り替え表示 </iframe>
上記画像表示タグの解説、インラインフレームに画像を切り替え表示するには。
下記タグのリンク先ページ(画像切り替え表示URLページ)のように設定することで 複数ページを切り替えて表示します。
かなり複雑になるので、各機能を省いた画像表示のみのページを作成して、学習にもなるから
確認しながら、機能を追加するようにすればさほど難解でもないでしょう。
下記が、表示させるサンプルリンク先ページ (img01.html)です。
インラインフレームで、表示させたいリンク先のURL・タグです
次に表示させるリンクページが指定されていますね  画像・リンクページを一個ずつずらしたこの様なページを複数個作成してページ・画像を置き換えると完成。
(注) 確認してみよう、 開くページに表示画像を, リンク先は次に表示させるページを指定していますね。
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 transitional//EN">
<br>
<html><head>
<br>
<meta http-equiv=Content-Type content=text/html;charset=Shift_JIS>
<br>
<title>
画像の切り替え表示 </title>
<br>
<!-- このページから、他のページへジャンプする時に特殊効果が発揮されます。 -->
<br>
<meta http-equiv=page-exit content=revealtrans(duration=2,transition=23)>
<br>
</head>
<br>
<body text="#000000" bgcolor="#ffffff" leftmargin=0 topmargin="0" marginwidth="0">

<br>
<A href=" img02.html "> <img src=" img01.gif " alt=" 晩秋の明石公園 " width="200" height="120" border="0"> </a>
<br>
</body></html>
ページ作 成 関連 URL サムネイル画像から画像表示 関連   URL リンク基本設定
関連  URL        特殊効果   関連   URL インラインフレーム
フレーム設定のタグ 使い方と解説   属性は、要素 括弧内で指定のこと
<iframe> </iframe> 要素 同じページ内に、フレームページを配置する。
<iframe> 〜  </iframe> 要素 〜の箇所に、インライン未対応ブラウザやフレーム表示をしない設定に対して表示させたい内容を指定しておく。
src="" 属性 インラインフレームでは一般リンクの href= ではなく、表示させたい内容のURL・ファイル名を src=で指定する。  IMG  music target=""と対
name="" 属性 インラインフレームを配置で任意のフレーム名をつける。フレームの場合、リンクを開く位置を指定しないと同じページになり、インラインフレームの場合は機能しない
target="" 属性 name="" でフレーム名を指定してインラインフレームにリンクを貼ります。 name="" と対
width="" 属性 フレーム設定、フレームの幅。(ピクセル・%)
height="" 属性 フレーム設定、フレームの高さ。(ピクセル・%)
marginwidth="" 属性 フレーム設定、フレーム内の左右のマージン。(ピクセル・%)
marginheight="" 属性 フレーム設定、フレーム内の上下のマージン。(ピクセル・%)
scrolling= "" 属性 ページのスクロールの指定 。
"yes" 属性値 ページのスクロールを許可 。
"no" 属性値 ページのスクロールを禁止 。
"auto" 属性値 ページのスクロールを自動にして、ブラウザにまかせる。
frameborder="" 属性 フレーム設定、フレームウインドウ枠の表示。(あり="1" なし="0")
align="" 属性 配置位置  関連  画像の配置
"left" 属性値 インラインフレームをページの左に配置する
無指定で、テーブルで配置の方法が任意の位置に配置が容易。
"right" 属性値 インラインフレームを、ページの右に配置する。
  <br
  <br
  <br
clear="left">
clear="right">
clear="all">
属性
属性値
インラインフレーム、右側の回り込みを解除する。
インラインフレーム、左側の回り込みを解除する。
インラインフレーム、どちらの回り込みも解除する。
非推奨
"top" 属性値 インラインフレームの、上と画像やテキストを揃える。
"middle" 属性値 インラインフレームの、中心と画像やテキストのベースラインを揃える。
"bottom" 属性値 インラインフレームの、下と画像やテキストのベースラインを揃える。
規定値。
閑話  上記サンプル写真素材などの入手先
講座で様々な写真素材を多用していますが、同じ管理人が、写真素材集をアップしています。 著作権は帰属しますが、フリーですから、自由に使用して下さい 使用に際して掲示板かメールでも頂けると作成の励みにもなりますので宜しくお願いします。
nojhon;メールアドレス
写真の部屋 明石海峡大橋写真の部屋 明石海峡大橋 写真の部屋 晩秋の明石公園 写真の部屋 晩秋の明石公園  から