|
|
03/16(Sun) 01:42
UFOのように動く画像
【お知らせ】Netscape 6,7、Opera6でも動作するよう機能追加しました(2003/04/27)
ページをオープンすると、画像がUFOのようにあちこち、せわしく動き回ります。やがて、時間が経つと止まってしまいます。画像の代わりに文章も使えます。
■設置方法
使用するCross-Browser function | moveLAYER |
スタイルシート | imgpos |
■ヘッダー部(<HEAD>〜</HEAD>)に以下の関数を定義します。
- .imgpos { }内の left:-100px;top:-100px----ページオープン時に画像を隠すための設定です。画像が隠れない時はこの値を小さく(数字は大きく)して下さい。
- width:40----レイヤー幅です。画像が欠ける場合は値を大きくします。
- X、Y----スタートのX,Y座標。スタート位置を変更したい場合はこの値を変更します。
- limitLeft、limitRight、limitTop、limitBottom----画像はこの矩形の中を動き回ります。動く範囲を変更したい場合はこの値を変更します。
- speedX、speedY----移動スピード。値を大きくすると早くなります。
■ボディ部(<BODY>〜</BODY>)に下の記述をします。
変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。
- img src="../gif/baloon.gif"にあなたの表示したい画像を指定します。
- setTimeout("clearInterval(timerID)",30000)----30000ms(=30秒)後に画像が静止します。静止するまでの時間を増やしたり減らしたい時はこの値を変更します。
■応用:画像を文章にするには?
- <img src="../gif/baloon.gif" border="0">の代わりに文章を記述します。横に長くなる場合は適当に<br>を入れ改行して下さい。「width:40」の調整も忘れずに。
- スタイルシートimgposに「font-size:35px;color:red」などの文字用のスタイルを追加します。
|
|