JavaScript小技集画像関連
画像を先読み
unknown
「ロールオーバーボタンなどマウスイベントで画像入替をしている」、「画像を多用したレイアウト」の場合などは、ページを表示する前に使用画像を読み込んでおくことで、画像切替動作や画面表示がスムーズにいきます。
ページを読み込む（onLoad）時に、使用画像をキャッシュとして読み込みます。 以下の例では、body要素のonload属性に画像先読み処理を記述しています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>画像のプレロード</title>
<script type="text/javascript">
/* 先読みする画像の配列 */
var images_ary=new Array(
'images/1.gif',
'images/2.gif',
'images/3.gif',
'images/4.gif',
'images/5.gif'
);
/* 画像先読み処理関数 */
function preLoad(imgAry) {
var imgMax=imgAry.length;
var images=new Array(imgMax);
for (var i=0; i<imgMax; i++) {
images[i]=new Image();
images[i].src=imgAry[i];
}
}
</script>
</head>
<!-- ページ読込時に画像を先読みさせる -->
<body onload="preLoad(images_ary)">
</body>
</html>
JavaScriptでボタンのロールオーバー
unknown
⇒ スタイルシートを使用したボタンのロールオーバーボタンはコチラにあります。
ロールオーバー1
画像をクリックした時（onClickイベント発生時）に、画像のパス（SRC属性）を切り替えてロールオーバーさせる例。
サンプルを見る
<script type='text/javascript'>
/* JavaScriptでロールオーバー */
function btnRollOverForJS(obj){
var img_on="/content/img/btn/btn_on.gif";
var img_off="/content/img/btn/btn_off.gif";
obj.src=(obj.src.indexOf("btn_on")!=-1) ? img_off : img_on;
}
</script>
<form action="#">
<img src="/content/img/btn/btn_off.gif"
width="59" height="18"
alt="サンプルボタン"
onmouseover="btnRollOverForJS(this)" onmouseout="btnRollOverForJS(this)" />
</form>
ロールオーバー2（DOM＋イベントハンドラ）
外部JSに、ページロード時に画像のマウスオーバー、マウスアウトイベントを設定し、各イベント発生時に画像のパス（SRC属性）を切り替えてロールオーバーさせる例。
サンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ロールオーバーサンプル（DOM＋イベントハンドラ）</title>
<script>
window.onload=function(){
document.getElementById("sw").onmouseout=function(){
document.getElementById("swIMG").src="/content/img/btn/btn_off.gif";
//this.firstChild.srcでもいい。
//IMG要素のonmouseoutイベントがうまく取得できないようなので、span要素のイベントを取得。
}
document.getElementById("sw").onmouseover=function(){
document.getElementById("swIMG").src="/content/img/btn/btn_on.gif";
//this.firstChild.srcでもいい。
}
}
</script>
</head>
<body>
<p>
<span id="sw"><img id="swIMG" src="/content/img/btn/btn_off.gif" alt="サンプルボタン" /></span>
</p>
</body>
</html>