戻るマウスで画像を選択する |
◆マウスで画像を選択する◆ |
■■１■■
[概要]
ボタンを使って選択した画像を表示する
[参照]
メルマガ 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";
image[2] = new Image();
image[2].src = "img3.gif";
image[3] = new Image();
image[3].src = "img4.gif";
<!--このあと好きなだけ増やせる-->
function Img(n){
if(document.images){
document.myImg.src=image[n-1].src;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
ボタンを押して好きな画像を選んでね！
<hr>
<input type="button" value="画像１"
onClick="Img(1)"><br>
<input type="button" value="画像２"
onClick="Img(2)"><br>
<input type="button" value="画像３"
onClick="Img(3)"><br>
<input type="button" value="画像４"
onClick="Img(4)"><br>
<!--このあとは好きなだけ増やせる。上に対応-->
<p>
<img border=1 src="img1.gif" name="myImg">
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■２■■
[概要]
リンクを使って選択した画像を表示する
[参照]
メルマガ 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";
image[2] = new Image();
image[2].src = "img3.gif";
image[3] = new Image();
image[3].src = "img4.gif";
<!--このあと好きなだけ増やせる-->
function Img_2(n){
if(document.images){
document.myImg_2.src=image[n-1].src;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
ボタンを押して好きな画像を選んでね！<br>
<A HREF="JavaScript:Img_2(1)">画像１</A><br>
<A HREF="JavaScript:Img_2(2)">画像２</A><br>
<A HREF="JavaScript:Img_2(3)">画像３</A><br>
<A HREF="JavaScript:Img_2(4)">画像４</A><br>
<!--このあとは好きなだけ増やせる。上に対応-->
<p>
<img border=1 src="img1.gif" name="myImg_2">
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■３■■
[概要]
セレクトボックスを使って選択した画像を表示する
[参照]
[ソース]
<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";
image[2] = new Image();
image[2].src = "img3.gif";
image[3] = new Image();
image[3].src = "img4.gif";
/*このあと好きなだけ増やせる*/
function changeImage(){
imgnum = document.myform.imgselect.selectedIndex;
document.myimg.src = image[imgnum].src;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<!--セレクトボックス-->
<FORM name="myform" >
<SELECT name="imgselect" onChange="changeImage()">
<OPTION>イメージ1
<OPTION>イメージ2
<OPTION>イメージ3
<OPTION>イメージ4
</SELECT>
</FORM>
<!--画像表示-->
<IMG src="img1.gif" name="myimg" border=0>
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■４■■
[概要]
ラジオボタンを使って選択した画像を表示する
[参照]
[ソース]
<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";
image[2] = new Image();
image[2].src = "img3.gif";
image[3] = new Image();
image[3].src = "img4.gif";
/*このあと好きなだけ増やせる*/
function changeImage(imgnum){
document.myimg.src = image[imgnum].src;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<!--ラジオボタン表示-->
<FORM>
<INPUT type="radio" name="imgradio" checked onClick="changeImage(0)">イメージ1<br>
<INPUT type="radio" name="imgradio" onClick="changeImage(1)">イメージ2<br>
<INPUT type="radio" name="imgradio" onClick="changeImage(2)">イメージ3<br>
< INPUT type="radio" name="imgradio" onClick="changeImage(3)">イメージ4<br>
</FORM>
<!--画像表示-->
<IMG src="img1.gif" name="myimg" border=0>
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。