画像クリックで画像変化を1ページに複数表示

解決済

質問者：momonga-momo
質問日時：2004/07/28 21:26
回答数：1件

どのJavaScriptサイトにも記載されていなかったので、こちらでお尋ねします。どなたかご存知だったら、教えてください。

changeImageと<a href=""></a>を使って、クリックして画像を変えるっていうのをやっているのですが、同じページでの複数表示のやり方がわかりません。
それと、2つの画像を変化させて、他のアイコンを作ってそこを押すと元の画像に戻るというのは、可能でしょうか？
４つ画像を用意して、２つまでしか画像変化できないようにさせて、取り消しアイコンで元の画像に戻す・・・ということがやりたいのですが。

今はこんな感じの記述ができています。

<SCRIPT type="text/javascript">
function changeImage()
{
var imgname = document.images[0].name;
if(imgname == "01"){
document.images[0].src = "02.gif";
document.images[0].name = "02";

} else {
document.images[0].src = "01.gif";
document.images[0].name = "01";
}
}
</SCRIPT>
</head>
<body>
<a href="JavaScript:changeImage()">
<img src="01.gif" name"01" border=0></a>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Shinoa
回答日時：2004/07/29 10:33

こんな感じでどうでしょうか？

一応動くとは思うんですが・・・
(IE6.0で動作確認済みです。)

<html><head>
<script langage="javaScript">

　var imgNum = 0 ;
　var imageStatus = new Array(4);

function changeImage( id ){
　
　　if ( imgNum > 1 ) return ;
　
　　switch( id ){
　　　　case 0 :
　　　　　if ( imageStatus[0] == 1 ) break ;
　　　　　imageStatus[0] = 1 ;
　　　　　document.images[0].src = "F13.gif";
　　　　　imgNum++ ;
　　　　　break;
　　　　case 1 :
　　　　　if ( imageStatus[1] == 1 ) break ;
　　　　　imageStatus[1] = 1 ;
　　　　　document.images[1].src = "F13.gif";
　　　　　imgNum++ ;
　　　　　break;
　　　　case 2 :
　　　　　if ( imageStatus[2] == 1 ) break ;
　　　　　imageStatus[2] = 1 ;
　　　　　document.images[2].src = "F13.gif";
　　　　　imgNum++ ;
　　　　　break;
　　　　case 3 :
　　　　　if ( imageStatus[3] == 1 ) break ;
　　　　　imageStatus[3] = 1 ;
　　　　　document.images[3].src = "F13.gif";
　　　　　imgNum++ ;
　　　　　break;
　　　　default: break ;
　　}
}
　
function resetImage(){

　document.images[0].src = "F1.gif";
　document.images[1].src = "F4.gif";
　document.images[2].src = "F7.gif";
　document.images[3].src = "F10.gif";

　imageStatus[0] = 0 ;
　imageStatus[1] = 0 ;
　imageStatus[2] = 0 ;
　imageStatus[3] = 0 ;

　imgNum = 0 ;
}
</script>
</head>
<body onLoad="resetImage()" >
<img src="F1.gif" border=0 width="50" onClick = "changeImage( 0 )" >
<img src="F4.gif" border=0 width="50" onClick = "changeImage( 1 )" >
<img src="F7.gif" border=0 width="50" onClick = "changeImage( 2 )" >
<img src="F10.gif" border=0 width="50" onClick = "changeImage( 3 )" >
<br>
<img src="resetBtn.gif" border=0 width="50" onClick = "resetImage()" >
</body>
</html>