| フレームやスクロールバーの上に画像を乗せて、飾り付けする方法です。
●DIV id="Layer1"で、left: 80px; top: 100px;の位置に、width="280px" height="200pxの大きさのiframeを置く
<DIV id="Layer1" style="left: 80px; top: 100px; position: absolute; z-index: 1; visibility: visible;">
<iframe src="page01.html" scrolling="auto" frameborder="0" name="e" width="280px" height="200px">
</iframe>
</DIV>
●DIV id="Layer2"で、iframeの上に、画像を置く。画像の位置はleft: 0px; top: 157px;
<DIV id="Layer2" style="left: 0px; top: 157px; position: absolute; z-index: 2; visibility: visible;">
<IMG src="img01.gif" height="211" width="124" border="0">
</DIV>
●z-index:で要素の重なりの順番を決めています。数字が大きいほうが上に来るので、iframeを入れてあるLayer1をz-index: 1;にして、画像を入れてあるLayer2をz-index: 2;にします。
こうすることで、インラインフレームの上に画像を置きます。スクロールバーの上に画像を置くこともできますが、画像を絶対位置指定で置けるWYSIWYG型(ワープロタイプ)のHPソフトがないとやりにくいかもしれません。
フレームの上に置く画像を増やす場合は、Layer3を作って画像を入れてz-index: 3;にします。
フレームに飾り付けをするにはページにある全ての画像などをDIVタグで絶対位置指定で配置したほうがいいと思います。
DIVで絶対位置指定で置いたインラインフレームを常にページの中央に置くには、縦３分割の普通のフレームの真ん中にインラインフレームのページを置くといいと思います。
小窓とかにするのもいいかも。
↑こうやって真ん中のフレームだけインラインフレームの幅に合わせてサイズを指定して、左右のフレームのサイズはフリーにします。ソースを見てくださいね。
補足説明
MAC(IE5.0以下？)ではインラインフレームの上にある画像は無視されますので、インラインフレームの外部と内部の上に架けて１個の画像を置いた場合は、画像の一部分(フレーム内の上にある部分)のみのMACの人には見れなくなります。
対策としては、たぶん、
○インラインフレームの内部のページの背景に、インラインフレームの上に置いた画像と同じ画像を置いて、MACの人が見ても画像全体が見れるようにする。(見た目の問題の対策)
ページの背景に画像を置くタグ
<style type="text/css">
<!--
body{ background: url(img01.gif) no-repeat fixed -80px 57px}
-->
</style>
img01.gifはフレームの上に置く画像と同じ画像。
fixed -80px 57pxの数値を調整して、フレームの上の画像の位置とピッタリ重ねる。
○インラインフレームの外部と内部の上に架けて１個の画像を置かないようにして、枠内の上の部分にだけ画像を置く。
Winの人にだけ画像が見れる状態にして、MACの人の場合は、画像の一部分のみ見れないという状態を防ぎます。
○簡単な方法は、デコレーション・フレームを使ったインラインフレームのページに、OS判別のタグを入れて、デコレーション・フレームを使ってない普通のインラインフレームのページも作り、Macの人だけそのページのインラインフレームで見てもらいます。
上にあるデコレーション・フレームは何も対策をしていない状態です。
ちなみに、フラッシュで作った画像をフレームの上に置くと、丸や星型のフレーム内に文字が書き込めたりします。
フラッシュを持っている人は丸いフレームの画像を作って、インラインフレームの上に被せて置いてみてください。
gif画像などは透明の部分がガラスのようになりますが、フラッシュ画像の場合は透明の部分は筒抜けますので、おもしろいフレーム飾りが作れます。
時々、役に立ちそうなタグ一覧
○ページにスクロールバーを表示しないタグ。
<STYLE type="text/css">
<!--
BODY{
overflow : hidden;
}
-->
</STYLE>
インラインフレーム内にインラインフレームのあるインラインフレームのページを入れる場合などに使う場合があります。
○インラインフレームの外からインラインフレームの中にリンク
iframeの名前を name="e" にした場合、
A HREF="page02.html" target="e"
でリンクすれば、name="e"のiframe内にリンクできます。
○画像じゃなく文字をDIVで置く
(left: 300px; top: 300px;の位置)
<DIV id="Layer3" style="left: 300px; top: 300px; position: absolute; z-index: 3; visibility: visible;">こんばんわぉ！
</DIV>
width: 100px; height: 200px;の枠の中に文字を入れる
(枠の大きさで文字が折り返されます)
<DIV id="Layer3" style="width: 100px; height: 200px; left: 300px; top: 300px; position: absolute; z-index: 3; visibility: visible;">こんばんわぉ〜！おはよおぉ〜！ありがとぉさん〜！
</DIV>
○DIVで置く画像の背景に色を付ける
(背景の大きさは、width: 124px; height: 211px;)
<DIV id="Layer2" style="width: 124px; height: 211px; left: 0px; top: 157px; position: absolute; z-index: 2; visibility: visible; background-color: Red;">
<IMG src="img01.gif" height="211" width="124" border="0">
</DIV>
○ページの余白を０にするタグ。
<STYLE type="text/css">
<!--
BODY{
margin:0;
}
-->
</STYLE>
インラインフレームではなく普通のフレームの上に画像を乗せたい場合は、スクロールバーを表示しないタグと、余白を０にするタグを入れたページに、width="100%" height="100%の大きさのiframeを作り、そのiframeの上にDIVで画像を置いて、iframeの中には普通のフレームのページをまるごと入れます。
ソースを見てくださいね。
それでは、ごきげんＹＯ〜♪
|