SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [イメージメニュー]

イメージメニュー

機能

巷で見かけるメニューです。マウスが画像の上に来ると、その画像を変えてしまうもので、メニューなどによく使われるダイナミックHTMLです。

利用方法

HEAD部分にスクリプトを記述します。 BODY部分には、A要素内にIMG要素を配置し、それぞれにイベント属性を指定します。このとき画像ファイル名は２枚組み合わせで、通常時の画像「image/menu_ax.gif」、通過時の画像「image/menu_bx.gif」とする必要があります。また、「x」には１から連番で付与します。更に、この画像以前に存在する画像数を変数「ImgOffset」に指定する必要があります。

類似サンプル

イメージメニュー２

改造方法

表示する画像数、画像ファイルの変更が可能です。

画像数

Laymaxを変更（ここでは３）します。と同時に、BODY要素内のA要素、IMG要素を追加します。

画像ファイル

基本的に「menu_a1.gif」などのような名前でなければなりませんが、スクリプト内を変更することで独自のファイルネームの指定が可能です。ファイルネームの連番さえ守れば任意のファイルネームで結構です。ただし、下記のスクリプトを変更して下さい。

ImgLayOut[i].src = "image/menu_a" + i + ".gif"
ImgLayOn[i].src = "image/menu_b" + i + ".gif"

対応ブラウザ

IE4,NN4以上(NN3でも何とか）

サンプル

［サンプルを見る］［ダウンロード］

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>イメージメニュー</TITLE>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var Laymax = 3;		//メニュー総数
var ImgOffset = 0;		//メニューの前にあるイメージ数

var Lflag = false;
var Cflag = false;
var ImgLayOut = new Array();
var ImgLayOn = new Array();

function Init(){
	for(i = 1; i <= Laymax; i++){
		ImgCheck(i);
		ImgLayOut[i] = new Image();
		ImgLayOn[i] = new Image();
		ImgLayOut[i].src = "image/menu_a" + i + ".gif"
		ImgLayOn[i].src = "image/menu_b" + i + ".gif"
		if(Cflag)document.images[i + ImgOffset - 1].src = ImgLayOut[i].src;
	}
	Lflag = true;
}

function MouseON(n){
	ImgCheck(n);
	if(Cflag)document.images[n + ImgOffset - 1].src = ImgLayOn[n].src;
}

function MouseOUT(n){
	ImgCheck(n);
	if(Cflag)document.images[n + ImgOffset - 1].src = ImgLayOut[n].src;
}

function ImgCheck(n){
	Cflag = true;
	if(n < 0 || n > Laymax)Cflag = false;
}
// -->
</SCRIPT>

</HEAD>

<BODY onload="Init()">

<!-- １つ目のイメージ -->
<A HREF="http://www.hajimeteno.ne.jp/html32/index.html"
	onmouseover="MouseON(1)" onmouseout="MouseOUT(1)">
	<IMG SRC="menu_a1.gif" BORDER=0 WIDTH=200 HEIGHT=28 Alt="MENU">
</A><BR>

<!-- ２つ目のイメージ -->
<A HREF="http://www.hajimeteno.ne.jp/html40/index.html"
	onmouseover="MouseON(2)" onmouseout="MouseOUT(2)">
	<IMG SRC="menu_a2.gif" BORDER=0 WIDTH=200 HEIGHT=28 Alt="MENU">
</A><BR>

<!-- ３つ目のイメージ -->
<A HREF="http://www.hajimeteno.ne.jp/html/mailmaga.html"
	onmouseover="MouseON(3)" onmouseout="MouseOUT(3)">
	<IMG SRC="menu_a3.gif" BORDER=0 WIDTH=200 HEIGHT=28 Alt="MENU">
</A><BR>

</BODY>
</HTML>

[Go To Top]