マウスポインタをメニュー画像の上に合わせると、画像が切り替わる、ロールオーバーメニューのJavaScript。マウスポインタをメニュー画像から離すと、元のメニュー画像に戻る。ページ読み込み時の最初のメニュー画像表示も、JavaScript で生成するタイプ。
このページで紹介するのは、ページ読み込み時の最初のメニュー画像表示も、JavaScript で行うタイプなので、メニューが増えても、簡単に対応できる。しかし、ページを読み込んだ直後にメニュー画像を表示するので、メニュー画像表示が一瞬だけ遅れる場合がある。その一瞬が気になる場合は、ページ読み込み時の最初のメニュー画像表示は、JavaScript で処理しないタイプがオススメ。
実装例
実装例の動作について
マウスポインタを「HOME」「PROFILE」「BLOG」のメニュー画像の上に合わせると、画像が切り替わる。
ソースコード
JavaScript
<script type="text/javascript">
<!--
window.onload = menuImages;
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"
);
linkUrl = new Array(
"#0",
"#1",
"#2"
);
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 menuImages() {
for ( num = 0; num < numMax; num++ ) {
var element = document.createElement('li');
element.innerHTML = '<a href="' + linkUrl[num] + '" onMouseOver="onMouseOver(\'img' + num + '\',\'' + num + '\')" onMouseOut="onMouseOut(\'img' + num + '\',\'' + num + '\')"><img src="' + imgOutUrl[num] + '" alt="sample0" name="img' + num + '"></a>';
document.getElementById("menu-images").appendChild(element);
}
}
function onMouseOver( name, num ) {
document.images[name].src= unescape( imgOverUrl[num] );
}
function onMouseOut( name, num ) {
document.images[name].src= unescape( imgOutUrl[num] );
}
// -->
</script>
<!--
window.onload = menuImages;
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"
);
linkUrl = new Array(
"#0",
"#1",
"#2"
);
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 menuImages() {
for ( num = 0; num < numMax; num++ ) {
var element = document.createElement('li');
element.innerHTML = '<a href="' + linkUrl[num] + '" onMouseOver="onMouseOver(\'img' + num + '\',\'' + num + '\')" onMouseOut="onMouseOut(\'img' + num + '\',\'' + num + '\')"><img src="' + imgOutUrl[num] + '" alt="sample0" name="img' + num + '"></a>';
document.getElementById("menu-images").appendChild(element);
}
}
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;
height:48px;
}
ul#menu-images li {
float: left;
margin: 0px;
padding: 0px;
}
-->
</style>
<!--
ul#menu-images {
list-style-type: none;
height:48px;
}
ul#menu-images li {
float: left;
margin: 0px;
padding: 0px;
}
-->
</style>
HTML
<ul id="menu-images"></ul>
<div style="clear:both;"></div>
<div style="clear:both;"></div>
解説
JavaScript
<script type="text/javascript">
<!--
window.onload = menuImages; // ページを表示したとき、menuImages() を呼び出す
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つ目のメニュー
);
linkUrl = new Array( // リンク先URLを配列に格納
"#0", // 1つ目のメニュー
"#1", // 2つ目のメニュー
"#2" // 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 menuImages() { // ページ読み込み時に表示させるメニュー画像
for ( num = 0; num < numMax; num++ ) { // メニューの数だけループ
var element = document.createElement('li'); // li 要素を作成
element.innerHTML = '<a href="' + linkUrl[num] + '" onMouseOver="onMouseOver(\'img' + num + '\',\'' + num + '\')" onMouseOut="onMouseOut(\'img' + num + '\',\'' + num + '\')"><img src="' + imgOutUrl[num] + '" alt="sample0" name="img' + num + '"></a>'; // 作成した li 要素内のHTMLソース
document.getElementById("menu-images").appendChild(element); // 作成した li 要素を、ID が menu-images の要素の子要素として追加
}
}
function onMouseOver( name, num ) { // マウスポインタをメニュー画像の上に合わせたときの処理
document.images[name].src= unescape( imgOverUrl[num] ); // マウスポインタをメニュー画像の上に合わせたときの画像に置換
}
function onMouseOut( name, num ) { // マウスポインタをメニュー画像の上から外したときの処理
document.images[name].src= unescape( imgOutUrl[num] ); // マウスポインタをメニュー画像の上から外したときの画像に置換
}
// -->
</script>
<!--
window.onload = menuImages; // ページを表示したとき、menuImages() を呼び出す
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つ目のメニュー
);
linkUrl = new Array( // リンク先URLを配列に格納
"#0", // 1つ目のメニュー
"#1", // 2つ目のメニュー
"#2" // 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 menuImages() { // ページ読み込み時に表示させるメニュー画像
for ( num = 0; num < numMax; num++ ) { // メニューの数だけループ
var element = document.createElement('li'); // li 要素を作成
element.innerHTML = '<a href="' + linkUrl[num] + '" onMouseOver="onMouseOver(\'img' + num + '\',\'' + num + '\')" onMouseOut="onMouseOut(\'img' + num + '\',\'' + num + '\')"><img src="' + imgOutUrl[num] + '" alt="sample0" name="img' + num + '"></a>'; // 作成した li 要素内のHTMLソース
document.getElementById("menu-images").appendChild(element); // 作成した li 要素を、ID が menu-images の要素の子要素として追加
}
}
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
ページ読み込み時（マウスポインタをメニュー画像の上に合わせる前）、及び、マウスポインタをメニュー画像の上から外した時に、表示させる画像のURLを設定する。
imgOutUrl = new Array( // ページ読み込み時、及び、マウスポインタをメニュー画像の上から外した時に、表示させる画像のURLを配列に格納
"ここに、1つ目のメニューで使用する画像のURLを設定", // 1つ目のメニュー
"ここに、2つ目のメニューで使用する画像のURLを設定", // 2つ目のメニュー
"ここに、3つ目のメニューで使用する画像のURLを設定" // 3つ目のメニュー
);
"ここに、1つ目のメニューで使用する画像のURLを設定", // 1つ目のメニュー
"ここに、2つ目のメニューで使用する画像のURLを設定", // 2つ目のメニュー
"ここに、3つ目のメニューで使用する画像のURLを設定" // 3つ目のメニュー
);
リンク先URL
linkUrl = 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; /* リストマーカーなし */
height:48px; /* メニューボックスの高さ */
}
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; /* リストマーカーなし */
height:48px; /* メニューボックスの高さ */
}
ul#menu-images li { /* IDが、menu-images の ul 要素内の li 要素 */
float: left; /* 右に回り込ませて、横並び */
margin: 0px; /* 外側の余白なし */
padding: 0px; /* 内側の余白なし */
}
-->
</style>
HTML
<ul id="menu-images"></ul><!-- この ul 要素に、JavaScript で作成した li 要素を挿入 -->
<div style="clear:both;"></div><!-- フロートを解除 -->
<div style="clear:both;"></div><!-- フロートを解除 -->