KH-WEBLOG TOP > WEBメモ > JavaScript > スムーズに画像が切り替わるロールオーバー:javascript

スムーズに画像が切り替わるロールオーバー:javascript

javascriptでロールオーバー時にスムーズに画像が切り替わるやり方をメモ

サンプル

まず、こちらのサイトから
rollover2.jsをダウンロードさせて頂きます。
クロスフェードするロールオーバー処理をお手軽に実装するJavaScript

rollover2.jsの使い方

まず、ダウンロードした「rollover2.js」をhead内で読み込みます。
※UTF-8以外の文字コードのサイトでこのライブラリを利用する際にはcharset=”utf-8″を必ず記述。

<script type="text/javascript" src="js/rollover2.js" charset="utf-8"></script>

あとは、ロールオーバーを適用させたい画像のファイル名を
ロールアウト時:ファイル名_rollout
ロールオーバー時:ファイル名_rollover
にすればOK。

※上記の_rollout等の名前は
rollover2.js内のrollout、_rolloverという箇所を
好きな名前(_off、_on等)に指定すれば変更可能です。

参考サイト

クロスフェードするロールオーバー処理をお手軽に実装するJavaScript

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事