SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [クリックイメージチェンジ]

クリックイメージチェンジ

機能

画像をクリックすると異なる画像に変えてしまうダイナミックHTMLです。画像の切り替え時間が殆ど無い（予め読み込む時間は必要だが・・・）ので、リロードの時間短縮が可能です。瞬間的に変わって見えるので、場合によっては良いことが多いです。

利用方法

HEAD部分にスタイルとスクリプトを記述します。 BODY部分には、DIV要素に対してID属性iLxy（x（画像種類）×２）を指定します。ここで指定しなければならない画像数は、画像の種類×２枚で、それぞれ２枚セットで扱います。この２枚の画像はクリックの度に切り替わります。この画像はBODY要素内のIMG要素にSRC属性で指定します。

改造方法

画像ファイル、その数、位置を変更可能です。

画像ファイル: 画像ファイルを指定するIMG要素のSRC属性を書き換えるだけです。ただし、２枚セットになっているので、サイズを揃えた方が見栄えは良いかと思います。
画像ファイル数: Laymaxを画像数（セットで１つ）を変更します。それに合わせて、スタイルの変更が必要あればクラスセレクタを追加し、スタイル指定します。同時に、DIV要素をそのスタイルで指定し、ID属性値をiLxyで指定します。この時、「x」の部分がセット数で、「y」の部分が１ｏｒ２となり、この１と２をクリックの度に変更します。

対応ブラウザ

IE4,NN4以上

サンプル

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

<!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>

<STYLE TYPE="text/css">
<!--
.Style1{
	position:	absolute;
	top:		100px;
	left:		100px;
}
.Style2{
	position:	absolute;
	top:		200px;
	left:		100px;
}
.Style3{
	position:	absolute;
	top:		300px;
	left:		100px;
}
-->
</STYLE>

<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 lay = new Array();
	lay[1] = new Array();
	lay[2] = new Array();

	lay[3] = new Array();
var Lnum = new Array();
var SelectLay;
var Lflag = false;

if(iIE4){
	document.onmousedown = Mclick;
}
if(iNN4){
	window.captureEvents(Event.MOUSEDOWN);
	window.onmousedown = Mclick;
}

function Init(){
	if(iIE4){
		for(i = 1; i <= Laymax; i++){
			for(j = 1; j <= 2; j++){
				lay[i][j] = document.all("iL"+i+j).style;
				lay[i][j].visibility = "hidden";
			}
			lay[i][1].visibility = "visible";
			Lnum[i] = 1;
		}
	}
	if(iNN4){
		for(i = 1; i <= Laymax; i++){
			for(j = 1; j <= 2; j++){
				lay[i][j] = document.layers["iL"+i+j];
				lay[i][j].visibility = "hide";
			}
			lay[i][1].visibility = "show";
			Lnum[i] = 1;
		}
	}
	Lflag = true;
}

function Mclick(){
	if(Lflag && (SelectLay >=1 && SelectLay <= Laymax)){
		if(iIE4){
			if(Lnum[SelectLay] == 1){
				lay[SelectLay][1].visibility = "hidden";
				lay[SelectLay][2].visibility = "visible";
			}else{
				lay[SelectLay][2].visibility = "hidden";
				lay[SelectLay][1].visibility = "visible";
			}
		}
		if(iNN4){
			if(Lnum[SelectLay] == 1){
				lay[SelectLay][1].visibility = "hide";
				lay[SelectLay][2].visibility = "show";
			}else{
				lay[SelectLay][2].visibility = "hide";
				lay[SelectLay][1].visibility = "show";
			}
		}
	}
}

function Mover(m,n){
	if(Lflag){
		SelectLay = m;
		Lnum[m] = n;
	}
}

function Mout(){
	if(Lflag){
		SelectLay = 0;
	}
}
// -->
</SCRIPT>

</HEAD>

<BODY onload="Init()">

<P>イメージをクリックすると変化します。</P>

<DIV CLASS="Style1" ID="iL11">
<A HREF="javascript:void(0);" onmouseover="Mover(1,1)" onmouseout="Mout()">
<IMG SRC="image/eye11.gif" BORDER=0>
</A>
</DIV>

<DIV CLASS="Style1" ID="iL12">
<A HREF="javascript:void(0);" onmouseover="Mover(1,2)" onmouseout="Mout()">
<IMG SRC="image/eye10.gif" BORDER=0>
</A>
</DIV>

<DIV CLASS="Style2" ID="iL21">
<A HREF="javascript:void(0);" onmouseover="Mover(2,1)" onmouseout="Mout()">
<IMG SRC="image/eye11.gif" BORDER=0>
</A>
</DIV>

<DIV CLASS="Style2" ID="iL22">
<A HREF="javascript:void(0);" onmouseover="Mover(2,2)" onmouseout="Mout()">
<IMG SRC="image/eye21.gif" BORDER=0>
</A>
</DIV>

<DIV CLASS="Style3" ID="iL31">
<A HREF="javascript:void(0);" onmouseover="Mover(3,1)" onmouseout="Mout()">
<IMG SRC="image/eye11.gif" BORDER=0>
</A>
</DIV>

<DIV CLASS="Style3" ID="iL32">
<A HREF="javascript:void(0);" onmouseover="Mover(3,2)" onmouseout="Mout()">
<IMG SRC="image/eye12.gif" BORDER=0>
</A>
</DIV>

</BODY>
</HTML>

[Go To Top]