| １．概要 |
画像の上に説明文の文字を表示したり、画像の上にアニメーションを表示する方法です
これはすでに私のホームページの「悠久の自然」のロゴで右上に小猿のアニメーション、左下にカエルが飛び込むアニメーションで利用しています
ここではこの作成方法について解説します
今回は下記のページを参考にしました
■ 画像上の自由な位置に文字を重ねる方法
|
| ２．サンプル |
まずサンプルをご覧下さい
２．１ Ｊａｖａｓｃｒｉｐｔ を使用して、ロゴの背面からカエルが顔をだす
顔の出る位置はロゴの範囲内で任意の場所です
顔の出るサイズは上側に２０ピクセルに、また時間は３秒 つまり３秒間顔を出してその後ロゴの背面に隠れます。そして３秒後には再度顔を出します
ここで使用している画像は「悠久の自然」のロゴと下記の３つです
 |
カメラ小猿 |
なお、「カメラ小猿」と「飛び込むカエル」は
アニメーションの繰り返し数を３回に設定してあります |
 |
飛び込むカエル |
 |
顔を出すカエル |
３０ｘ２７ピクセル 顔を出すのは上から２０ピクセル |
２．２ 写真の上に説明文を表示させる場合
|
霜を被ったオオイヌノフグリ
|
この写真に説明文を表示する場合は背景が暗い色なので「白文字」でもいいのですが、普通は下記のようにスタイルシートで文字色と背景色を指定します
そうするとどんな写真にも説明文が鮮明に表示されます
<FONT style="color : #ffffff ; background-color : #995511 ; ">オオイヌノフグリ</FONT>
この方法はスライドショウでサムネイルにマウスを置くと写真は拡大表示されますが、その拡大写真の中で説明文を表示しています
|
| ３．基本的な設定方法 |
ここでは設定方法を解説します
原点の座標はロゴの左上が ｘ＝０ ； ｙ＝０ となります。ｙ座標は下側が＋方向になります
この原点から ｔｏｐ、ｌｅｆｔ の座標値を設定します
|
＋ ここが原点です
|
サンプルのソース |
<DIV style="position: relative; left : 0px">
<!-- ロゴ画像 //-->
<IMG src="image/logo_anime_white.gif" width="350"
height="120" border="0">
<!-- 原点 //-->
<DIV style="position:absolute; top : -10px
; left : 5px ; ">
<FONT style="color : #ff0000"><B>＋
ここが原点です</B></FONT>
</DIV>
<!-- 飛び込む蛙 //-->
<DIV style="position:absolute; top : 70px ;
left : -5px ; ">
<IMG src="image/a_kaeru.gif" width="48"
height="64" border="0">
</DIV>
<!-- カメラ小猿 //-->
<DIV style="position:absolute; top : -8px ;
left : 275px ; ">
<IMG src="image/kamerakozaru.gif" width="60"
height="40" border="0">
</DIV>
</DIV>
|
|
| ４．最前面、背面等々で ｚ−ｉｎｄｅｘ を考慮した場合 |
原点の画像を設定します。一般には透明画像を使用しますが、ここでは原点を明確にするために空色の画像を使用しています
＋ここが原点です
|
|
|
下記はソースです
最背面の青色の画像は ｚ−ｉｎｄｅｘ：0 です
ｚ−ｉｎｄｅｘ の値が１，２，３，４，５と設定してあります。「おやじ」は ｚ−ｉｎｄｅｘ：5 なので最前面に表示されます
|
<DIV style="position: relative; left : 0px ; z-index : 0">
<IMG src="image/z_bar_b.gif" width="400"
height="210" border="0">
<!-- 原点 //-->
<DIV style="position:absolute; top : -10px
; left : -5px ; z-index : 1">
<FONT style="color : #ff0000"><B>＋ここが原点です</B></FONT>
</DIV>
<!-- 赤色の部分 //-->
<DIV style="position:absolute; top : 30px ;
left : 30px ; z-index : 2">
<IMG src="image/z_bar_r.gif" width="300"
height="100" border="1">
</DIV>
<!-- 緑色の部分 //-->
<DIV style="position:absolute; top : 60px ;
left : 60px ; z-index : 3">
<IMG src="image/z_bar_g.gif" width="300"
height="100" border="1">
</DIV>
<!-- 黄色の部分 //-->
<DIV style="position:absolute; top : 90px ;
left : 90px ; z-index : 4">
<IMG src="image/z_bar_y.gif" width="300"
height="100" border="1">
</DIV>
<!-- おやじ //-->
<DIV style="position:absolute; top : 120px
; left : 300px ; z-index : 5">
<IMG src="image/oyaji01.gif" width="38"
height="51" border="0">
</DIV>
</DIV> |
|
|
| ５．まとめ |
大変重宝な方法なので、どうぞ活用してみて下さい
|
| 2010/11/21 |
