jQueryを使ってナビゲーションボタンなどによく使われている、画像のロールオーバー、ロールアウトを設定する方法です。
予め通常時、ロールオーバー時の画像データ2種類を用意します。ファイル名は通常時が「button.png」の場合、ロールオーバー時は「button-over.png」と「-over」を付加しておきます。ともに同じディレクトリに保存します。
HTMLに通常時の画像を配置し、クラスを「over」としておきます。
1
| <img src="button.png" alt="ボタン" class="over" /> |
次のjQueryを含むJavasScriptを、Head内、外部ファイルなど任意の場所に記述します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| $(function(){
imageOver();
})
//イメージのロールオーバー設定
function imageOver() {
//クラスに「over」を持つ、ページ内の全てのimg要素に対して実行
$("img.over").each(function() {
//イメージURLから拡張子を取り出し、ロールオーバー用イメージURLを作成
var image = this.src;
var extension = image.substr(image.lastIndexOf("."), image.length-1);
var image_over = image.replace(extension, "-over"+extension);
//ロールオーバー用イメージを読み込み
new Image().src = image_over;
//ロールオーバー、ロールアウト時のイメージURL設定
$(this).hover(
function(){this.src = image_over},
function(){this.src = image}
);
});
} |
上記のスクリプトでは、HTMLページ内に配置してある「over」クラスを持つイメージ全てに対して、ロールオーバー時に「-over」を付加した画像ファイルに置き換える設定にしてあります。ロールアウトで元の画像に戻します。
スクリプト内でロールオーバー用画像を読み込んでおくことにより、ロールオーバー時に画像の読み込みのため一瞬、間が空くことを防いでいます。
コメントはまだありません。
この投稿へのコメントの RSS フィード。
TrackBack URL
|