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

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

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

サンプル

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

コーディング・WordPress化作業を代行します

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

コーディング・WordPress化作業を代行します

JavaScriptのおすすめ参考書

楽天ブックス
¥2,838 (2024/03/25 02:06時点 | 楽天市場調べ)

TAGS

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