マウスポインタをメニュー画像の上に合わせると、画像が切り替わる、ロールオーバーメニューのJavaScript。マウスポインタをメニュー画像から離すと、元のメニュー画像に戻る。
ページ読み込み時の最初のメニュー画像表示も、JavaScript で行うタイプもある。
実装例
実装例の動作について
マウスポインタを「HOME」「PROFILE」「BLOG」のメニュー画像の上に合わせると、画像が切り替わる。
ソースコード
JavaScript
<script type="text/javascript">
<!--
imgOverUrl = new Array(
"menu-rollover-sakura-home-over.jpg",
"menu-rollover-sakura-profile-over.jpg",
"menu-rollover-sakura-blog-over.jpg"
);
imgOutUrl = new Array(
"menu-rollover-sakura-home.jpg",
"menu-rollover-sakura-profile.jpg",
"menu-rollover-sakura-blog.jpg"
);
var numMax = "3";
for (num = 0; num < numMax; num++) {
imgOver[num].src = new Image();
imgOver[num].src = unescape( imgOverUrl[num] );
imgOut[num].src = new Image();
imgOut[num].src = unescape( imgOutUrl[num] );
}
function onMouseOver( name, num ) {
document.images[name].src= unescape( imgOverUrl[num] );
}
function onMouseOut( name, num ) {
document.images[name].src= unescape( imgOutUrl[num] );
}
// -->
</script>
<!--
imgOverUrl = new Array(
"menu-rollover-sakura-home-over.jpg",
"menu-rollover-sakura-profile-over.jpg",
"menu-rollover-sakura-blog-over.jpg"
);
imgOutUrl = new Array(
"menu-rollover-sakura-home.jpg",
"menu-rollover-sakura-profile.jpg",
"menu-rollover-sakura-blog.jpg"
);
var numMax = "3";
for (num = 0; num < numMax; num++) {
imgOver[num].src = new Image();
imgOver[num].src = unescape( imgOverUrl[num] );
imgOut[num].src = new Image();
imgOut[num].src = unescape( imgOutUrl[num] );
}
function onMouseOver( name, num ) {
document.images[name].src= unescape( imgOverUrl[num] );
}
function onMouseOut( name, num ) {
document.images[name].src= unescape( imgOutUrl[num] );
}
// -->
</script>
CSS
<style type="text/css">
<!--
ul#menu-images {
list-style-type: none;
}
ul#menu-images li {
float: left;
margin: 0px;
padding: 0px;
}
-->
</style>
<!--
ul#menu-images {
list-style-type: none;
}
ul#menu-images li {
float: left;
margin: 0px;
padding: 0px;
}
-->
</style>
HTML
<ul id="menu-images">
<li><a href="#0" onMouseOver="onMouseOver('img0','0')" onMouseOut="onMouseOut('img0','0')"><img src="menu-rollover-sakura-home.jpg" name="img0"></a></li>
<li><a href="#1" onMouseOver="onMouseOver('img1','1')" onMouseOut="onMouseOut('img1','1')"><img src="menu-rollover-sakura-profile.jpg" name="img1"></a></li>
<li><a href="#2" onMouseOver="onMouseOver('img2','2')" onMouseOut="onMouseOut('img2','2')"><img src="menu-rollover-sakura-blog.jpg" name="img2"></a></li>
</ul>
<div style="clear:both;"></div>
<li><a href="#0" onMouseOver="onMouseOver('img0','0')" onMouseOut="onMouseOut('img0','0')"><img src="menu-rollover-sakura-home.jpg" name="img0"></a></li>
<li><a href="#1" onMouseOver="onMouseOver('img1','1')" onMouseOut="onMouseOut('img1','1')"><img src="menu-rollover-sakura-profile.jpg" name="img1"></a></li>
<li><a href="#2" onMouseOver="onMouseOver('img2','2')" onMouseOut="onMouseOut('img2','2')"><img src="menu-rollover-sakura-blog.jpg" name="img2"></a></li>
</ul>
<div style="clear:both;"></div>
解説
JavaScript
<script type="text/javascript">
<!--
imgOverUrl = new Array( // マウスポインタをメニュー画像の上に合わせた時に表示させる画像のURLを配列に格納
"menu-rollover-sakura-home-over.jpg", // 1つ目のメニュー
"menu-rollover-sakura-profile-over.jpg", // 2つ目のメニュー
"menu-rollover-sakura-blog-over.jpg" // 3つ目のメニュー
);
imgOutUrl = new Array( // マウスポインタをメニュー画像の上から外した時に、表示させる画像のURLを配列に格納
"menu-rollover-sakura-home.jpg", // 1つ目のメニュー
"menu-rollover-sakura-profile.jpg", // 2つ目のメニュー
"menu-rollover-sakura-blog.jpg" // 3つ目のメニュー
);
var numMax = "3"; // メニューの数を変数に格納
for (num = 0; num < numMax; num++) { // メニューの数だけループ
imgOver[num].src = new Image(); // イメージオブジェクト生成
imgOver[num].src = unescape( imgOverUrl[num] ); // マウスポインタをメニュー画像の上に合わせた時に表示させる画像をキャッシュに読み込ませる
imgOut[num].src = new Image(); // イメージオブジェクト生成
imgOut[num].src = unescape( imgOutUrl[num] ); // マウスポインタをメニュー画像の上から外した時の画像をキャッシュに読み込ませる
}
function onMouseOver( name, num ) { // マウスポインタをメニュー画像の上に合わせたときの処理
document.images[name].src= unescape( imgOverUrl[num] ); // マウスポインタをメニュー画像の上に合わせたときの画像に置換
}
function onMouseOut( name, num ) { // マウスポインタをメニュー画像の上から外したときの処理
document.images[name].src= unescape( imgOutUrl[num] ); // マウスポインタをメニュー画像の上から外したときの画像に置換
}
// -->
</script>
<!--
imgOverUrl = new Array( // マウスポインタをメニュー画像の上に合わせた時に表示させる画像のURLを配列に格納
"menu-rollover-sakura-home-over.jpg", // 1つ目のメニュー
"menu-rollover-sakura-profile-over.jpg", // 2つ目のメニュー
"menu-rollover-sakura-blog-over.jpg" // 3つ目のメニュー
);
imgOutUrl = new Array( // マウスポインタをメニュー画像の上から外した時に、表示させる画像のURLを配列に格納
"menu-rollover-sakura-home.jpg", // 1つ目のメニュー
"menu-rollover-sakura-profile.jpg", // 2つ目のメニュー
"menu-rollover-sakura-blog.jpg" // 3つ目のメニュー
);
var numMax = "3"; // メニューの数を変数に格納
for (num = 0; num < numMax; num++) { // メニューの数だけループ
imgOver[num].src = new Image(); // イメージオブジェクト生成
imgOver[num].src = unescape( imgOverUrl[num] ); // マウスポインタをメニュー画像の上に合わせた時に表示させる画像をキャッシュに読み込ませる
imgOut[num].src = new Image(); // イメージオブジェクト生成
imgOut[num].src = unescape( imgOutUrl[num] ); // マウスポインタをメニュー画像の上から外した時の画像をキャッシュに読み込ませる
}
function onMouseOver( name, num ) { // マウスポインタをメニュー画像の上に合わせたときの処理
document.images[name].src= unescape( imgOverUrl[num] ); // マウスポインタをメニュー画像の上に合わせたときの画像に置換
}
function onMouseOut( name, num ) { // マウスポインタをメニュー画像の上から外したときの処理
document.images[name].src= unescape( imgOutUrl[num] ); // マウスポインタをメニュー画像の上から外したときの画像に置換
}
// -->
</script>
設定箇所
マウスポインタをメニュー画像の上に合わせた時に表示させる画像のURL
imgOverUrl = new Array( // マウスポインタをメニュー画像の上に合わせた時に表示させる画像のURLを配列に格納
"ここに、1つ目のメニューで使用する画像のURLを設定", // 1つ目のメニュー
"ここに、2つ目のメニューで使用する画像のURLを設定", // 2つ目のメニュー
"ここに、3つ目のメニューで使用する画像のURLを設定" // 3つ目のメニュー
);
"ここに、1つ目のメニューで使用する画像のURLを設定", // 1つ目のメニュー
"ここに、2つ目のメニューで使用する画像のURLを設定", // 2つ目のメニュー
"ここに、3つ目のメニューで使用する画像のURLを設定" // 3つ目のメニュー
);
マウスポインタをメニュー画像の上から外した時に、表示させる画像のURL
imgOutUrl = new Array( // マウスポインタをメニュー画像の上から外した時に、表示させる画像のURLを配列に格納
"ここに、1つ目のメニューで使用する画像のURLを設定", // 1つ目のメニュー
"ここに、2つ目のメニューで使用する画像のURLを設定", // 2つ目のメニュー
"ここに、3つ目のメニューで使用する画像のURLを設定" // 3つ目のメニュー
);
"ここに、1つ目のメニューで使用する画像のURLを設定", // 1つ目のメニュー
"ここに、2つ目のメニューで使用する画像のURLを設定", // 2つ目のメニュー
"ここに、3つ目のメニューで使用する画像のURLを設定" // 3つ目のメニュー
);
メニューの数
var numMax = "ここに、メニューの数を設定"; // メニューの数を変数に格納
CSS
<style type="text/css">
<!--
ul#menu-images { /* IDが、menu-images の ul 要素 */
list-style-type: none; /* リストマーカーなし */
}
ul#menu-images li { /* IDが、menu-images の ul 要素内の li 要素 */
float: left; /* 右に回り込ませて、横並び */
margin: 0px; /* 外側の余白なし */
padding: 0px; /* 内側の余白なし */
}
-->
</style>
<!--
ul#menu-images { /* IDが、menu-images の ul 要素 */
list-style-type: none; /* リストマーカーなし */
}
ul#menu-images li { /* IDが、menu-images の ul 要素内の li 要素 */
float: left; /* 右に回り込ませて、横並び */
margin: 0px; /* 外側の余白なし */
padding: 0px; /* 内側の余白なし */
}
-->
</style>
HTML
<ul id="menu-images">
<li><a href="#0" onMouseOver="onMouseOver('img0','0')" onMouseOut="onMouseOut('img0','0')"><img src="ここに、1つ目のメニューで使用する画像のURLを設定" name="img0"></a></li><!-- 1つ目のメニュー -->
<li><a href="#1" onMouseOver="onMouseOver('img1','1')" onMouseOut="onMouseOut('img1','1')"><img src="ここに、2つ目のメニューで使用する画像のURLを設定" name="img1"></a></li><!-- 2つ目のメニュー -->
<li><a href="#2" onMouseOver="onMouseOver('img2','2')" onMouseOut="onMouseOut('img2','2')"><img src="ここに、3つ目のメニューで使用する画像のURLを設定" name="img2"></a></li><!-- 3つ目のメニュー -->
</ul>
<div style="clear:both;"></div><!-- フロートを解除 -->
<li><a href="#0" onMouseOver="onMouseOver('img0','0')" onMouseOut="onMouseOut('img0','0')"><img src="ここに、1つ目のメニューで使用する画像のURLを設定" name="img0"></a></li><!-- 1つ目のメニュー -->
<li><a href="#1" onMouseOver="onMouseOver('img1','1')" onMouseOut="onMouseOut('img1','1')"><img src="ここに、2つ目のメニューで使用する画像のURLを設定" name="img1"></a></li><!-- 2つ目のメニュー -->
<li><a href="#2" onMouseOver="onMouseOver('img2','2')" onMouseOut="onMouseOut('img2','2')"><img src="ここに、3つ目のメニューで使用する画像のURLを設定" name="img2"></a></li><!-- 3つ目のメニュー -->
</ul>
<div style="clear:both;"></div><!-- フロートを解除 -->
a 要素のイベント属性の onMouseOver で、JavaScript の onMouseOver() を呼び出し、onMouseOut で、JavaScript の onMouseOut() を呼び出している。
onMouseOver() と onMouseOut() の引数は、( img 要素内の name 属性の値, メニュー画像の配列の添字)となっている。メニュー画像の配列の添字は、1つ目のメニューならば、"0"を指定、2つ目のメニュー画像なら"1"を指定する。
img 要素内の src 属性には、マウスポインタをメニュー画像の上から外した時に表示させる画像と同じ画像のURLを指定。