検索サーチエンジンと動画リンク集byねっとねこ

アクセス毎に画像表示を変えるJavaスクリプトの設置方法

Javaスクリプトを使った、画像表示に変化をつける方法を紹介します。

ここで使用する Javaスクリプトは、WINDOWSの IE 6.0 7.0 にて
動作確認をしています。古いバージョンの IE や MAC専用の
ブラウザでの動作確認は しておりませんので、正しく表示され
るか?おかしな表示になるか?は ご自身で確認してください!

画像表示に変化を与えるJavaスクリプト

ページにアクセスする度に、画像の表示が変わります。
表示変化のパターンは、たぶん?23種類です。
表示は ランダムに変わります。
アクセス毎に変わるので、TOPページのメイン画像に
このJavaスクリプトをつけると、毎回変化があって、
訪問者を楽しませることができるかも?と思います。


更新ボタンを押して、変化を確かめて下さい。

Javaスクリプトは、この下です。
エリア内で 右クリック→ コピー

<head> から </head> の間に
上の <style から </script> まで入れます。

<body> タグの中に
onload="applyTransition(myimg)" ←と 入れます。

<body> タグの(下に)次に
<img id="myimg" src="nekowaku.jpg" style="filter:revealtrans(duration=8.0, transition=23); visibility:hidden">

と入れます。 src= の nekowaku.jpg は、画像ファイル名です。
自分の画像ファイル名に変更する。

コピー用は、下のをお使いください。
エリア内で 右クリック→ コピー

最初の部分の #myimg{position:absolute; left:5px; top:5px;}
この中の、left:5px; top:5px; の 5px と言うのは、
画像を表示させる位置を指定しています。
言葉で、説明しにくいので とりあえず、5px を 100px に変えて
どの位置に画像が表示するのか? 確認しながら、任意の場所へ
画像を持っていってください。

スタイルシートで画像の表示場所を示しているので
html 上のタグは、無視されて画像が表示されます。
画像表示の場所を、改行タグ <br> や <p> を
多用して、空けておくことが必要です。

<img タグ内にある、duration=8.0, transition=23 の
8.0 は、画像表示の速さを示す数値です。
数値を大きくすると、早くなります。変更して確認しましょう。
23 は、変化するパターン数です。 最大が 23なのでこのまま。

画像が変化して表示される時の色は、body タグ内で指定した
色になります。<body bgcolor="#ffffff" としていると
白色のカーテンが開くような感じで、画像が表示されます。
サンプルでは、bgcolor="#000000" としてます。黒色です。

おしまい。。。








Copyright © 2008 - 2009 ねっとねこ Net-NekoProduction. All Rights Reserved.アクセスランキング