上級編7

 飛び回る画像
   JavaScriptでブラウザ画面に動きを加えましょう。


アイコンが不規則に画面を飛び回ってますね。こういう動きのあるものは JavaScript がお得意です。 以前はFLASHという便利なツールもあったのですが、セキュリティ面の問題から対応不可が浸透して、Javaが再度台頭しつつあるのが現状です。

さて、今回も「 ページのソースを表示 」でHTML文を見ましょうか。ここまで進んできた生徒さんならソースを表示させられますよね。 ソースからタグをコピーしてください。
56行目の<!--START ★ここからコピー。-->から124行目の<!--END ★ここまでコピー-->という行を 全部コピーして、ご自身のHTML分にペーストしてみて下さい。

●画像の準備
このページでは、flyman2.gif star.gif hrt2.gif の3つの画像をリング画像に使っています。同じように小さめの画像を3つ用意戴ければグルグル回せますよ。
このまま使いたい方は上の行にある画像の上で右クリックね。取り込んだ画像はフォルダに入れましょう。 このページの場合は、 pict という名前のフォルダに入れて使っています。
コピーしたタグの中に下記の部分がありますね。
// 画像名、増減可能
var myimage=new Array("pict/flyman2.gif","pict/star.gif","pict/hrt2.gif");
もし、別のミニ画像を飛び回らせる場合(例えば、a.gif)は、pict/flyman2.gif → pict/a.gif と修正します。 道場もここまで進んで来られたなら、難しくないでしょ。

以上でこの項は修了です。

こういう背景色のあるところで画像を表示させる場合は、 透過GIF という画像を使います。
普通の画像を使うと四角い背景とセットで動いてしまいますので、ご注意を。
●ココをクリック● してみて下さい。こんな不完全な感じになってしまいます。

質問メール  SCHOOL TOP