8-4

 小技で小粋に-4
   画像に動きを加えたいっ。


『答え』 画面を飛び回らせましょうか。

なんだかリングが飛び回ってますね。こういう動きのあるものはJavaScriptで簡単に出来ます。
ここまで進んできた生徒さんならソースを表示させられますよね。ソースからタグをコピーしてください。
ソースの真ん中より下の方の<!--START ★ここからコピー。-->から <!--END ★ここまでコピー-->という行を全部コピーして、ご自身のHTML分にペーストしてみて下さい。

●画像の準備
このページでは、flyman2.gif star.gif hrt2.gif  の3つの画像をリングに使っています。同じように小さめの画像を3つ用意戴ければグルグル回せますよ。
このまま使いたい方は画像の上で右クリックね。取り込んだ画像はフォルダに入れましょう。このページの場合は、hpm-fという名前のフォルダに入れて使っています。
コピーしたタグの中に下記の部分がありますね。
// 画像名、増減可能
var myimage=new Array("hpm-f/flyman2.gif","hpm-f/star.gif","hpm-f/hrt2.gif");

例えば、a.gifという画像をpictというフォルダに入れて使うならば、hpm-f/flyman2.gif → pict/a.gif と修正します。道場もここまで進んで来られたなら、難しくないでしょ。

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


こういったJavaScriptは、数多くサイトで無料にて公開されています。
探し出して活用してみて下さい。ホームページがグレードアップしますよ。

     . . . . .   . . . . .