インラインフレームの表示切り替え

インラインフレームに他のページや画像を呼び出す

インラインフレームに名前を指定し、リンクのtarget 属性を利用して、読み込んだページの表示を切り替えることができます。限られたスペースに表示できるので、ちょっとしたお知らせ、その他いろいろなシーンで利用できると思います。

上記のサンプルでは、メニューはリストタグで作成し。インラインフレームはテーブルの中に入れてます。メニューとテーブルのhtmlは省略します。(スタイルシートで設定しています。)

html ↓↓

表示させたいhtmlのファイルをいくつか作ります。
サンプルではフレームの名前は「Change」にしています。
<a target="Change" href="表示するurl">おしらせ</a>
<a target="Change" href="表示するurl">更新記録</a>
<a target="Change" href="表示するurl">唐草模様</a>

<iframe src="最初に表示したいurl" width="300" height="250" name="Change" scrolling="auto" frameborder="0">インラインフレームを使用しています。</iframe>
画像を呼び出す

表示urlの部分に画像アドレスを入れると画像が表示され、クリックで画像が切り替わります。

うさぎ りす マトリョーシカ 男の子


インラインフレームに呼び出すページや画像は自分のサイトのページにしましょう。
無断で他人さまのページを呼び出さないようにして下さい!!



関連項目・関連ページ
リストメニュー横並び リストメニュー縦並び リンクの開き方 テーブルデザイン


●当サイトのソースは、IE6.0+のみ動作確認をしております。 それ以外のブラウザでは同じように表示されない場合がございます。ご了承下さい。


★skip ページtop

インラインフレーム




ホームページを小粋に
css
java
home