戻る|
画像の変更 |
◆画像の変更◆ |
■■１■■
[概要]
マウスで触れると画像が変わる
[参照]
メルマガ Vol.17,Vol.18
[ソース]
<HTML>
<HEAD>
<TITLE>画像切り替え</TITLE>
<SCRIPT language="JavaScript">
<!--
/*画像のプレロード*/
image = new Array();
//画像のＵＲＬを入れる
image[0] = new Image();
image[0].src = "img1.gif";
//マウスが離れた時の画像
image[1] = new Image();
image[1].src = "img2.gif";
//マウスが乗ったときの画像
//マウスが乗った時
function mouse_on(){
document.myImg.src = image[1].src;
}
//マウスが離れた時
function mouse_off(){
document.myImg.src = image[0].src;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<!--画像表示部-->
<img src="img1.gif" name="myImg" border="0" align="absmiddle" onMouseOver="mouse_on()" onMouseOut="mouse_off()">
<br>
↑画像に触れると画像が切り替わる
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■２■■
[概要]
マウスでクリックすると画像が変わる
[参照]
[ソース]
<HTML>
<HEAD>
<TITLE>画像切り替え</TITLE>
<SCRIPT language="JavaScript">
<!--
//初期設定
mode = 0;
/*画像のプレロード*/
image = new Array();
//画像のＵＲＬを入れる
image[0] = new Image();
image[0].src = "img1.gif";
//画像１
image[1] = new Image();
image[1].src = "img2.gif";
//画像２
//画像をクリックした時
function mouse_click(){
if(mode == 0){
document.myImg.src = image[1].src;
mode = 1;
}
else{
document.myImg.src = image[0].src;
mode = 0;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<!--画像表示部-->
<img src="img1.gif" name="myImg" border="0" align="absmiddle" onclick="mouse_click()">
<p>
↑画像をクリックすると画像が切り替わる
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。