twitter ■お問い合わせ当サイトへのリンクサイト仕様

現在位置 > LostTechnology > JavaScript > Rotate Image

Rotate Image

このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 5の頃に作成したものであるため、そのうちjQuery用にしてもっとシンプルな実装で作成するかもしれません。

指定した画像を回転するようにアニメーションさせるためのDynamicHTML(DOM+JavaScript)です。Visual Filterを使って反転しているので、WindowsのInternet Explorer5以降専用。スクリプトはscriptフォルダにあるものとして記述しています。

Sample

LostTechnology

<img src="/img/logo.png" alt="LostTechnology" width="136" height="40" id="logo">

ID名は自由ですが、スクリプトの実行時に必ず指定したID名を使用してください。

<SCRIPT type="text/javascript" src="script/rotateimage.js"></SCRIPT>

ここからスクリプトをファイルに保存して、上記の通りに<HEAD>~</HEAD>内に記述してスクリプトを読み込ませます。

<BODY onload="initializeRotateImageH('logo',5);">

スクリプトは<BODY>のonload属性で実行します。最初のパラメータが指定したID名で、2番目のパラメータが1回の処理で変化するサイズです。initializeRotateImageHは横方向の処理で、initializeRotateImageVは縦方向の処理を開始します。