急いでいます！

javascriptでのボタンの切り替え

解決済

質問者：yuco17
質問日時：2015/09/11 14:40
回答数：3件

Aボタンを押すとBの画像が切り替わり、もう一度Aボタンを押すと元の画像に戻るという
ものを作っています。

こちらのページで色々調べて、下記のようなスクリプトを使いました。

<SCRIPT language="JavaScript">

</SCRIPT>

<img src="images/img01.gif" name="gazou1" onClick="JavaScript:changeImage1()">

<br>

<img src="images/img03.gif" name="gazou1" onClick="JavaScript:changeImage2()">

でも、クリックしても切り替わらない時があり、複数クリックしないといけません。
一回で切り替わる時もあります。

ページ内に、画像違いで同じ物が2つ設置してあり上手くいかないのかと思うのですが・・・

どなたかお分かりになる方がいらっしゃいましたら、教えてください。
宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (3件)

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

No.1ベストアンサー

回答者： yambejp
回答日時：2015/09/11 15:54

画像の切り替えはImageオブジェクトを使うのが一般的

ざっとこんな感じ
<script>
var imgs=[
[(new Image()),new Image()]
,[new Image(),new Image()]
];
imgs[0][0].src="1.jpg";
imgs[0][1].src="2.jpg";
imgs[1][0].src="3.jpg";
imgs[1][1].src="4.jpg";
function changeImg(obj,num){
obj.src=(obj.src==imgs[num][0].src)?imgs[num][1].src:imgs[num][0].src;
}
</script>

<img src="1.jpg" onclick="changeImg(this,0)">
<img src="3.jpg" onclick="changeImg(this,1)">

- 0
- 件

通報する

この回答へのお礼

とても早いご回答ありがとうございました。
こちらのスクリプトで無事に動きました。
初心者の私にも分かりやすいシンプルなスクリプトで
ありがたかったです。
ベストアンサーに選ばせていただきました。

通報する

お礼日時：2015/09/13 02:10

No.3

回答者： Ogre7077
回答日時：2015/09/11 18:36

<img> の中に、切り替わる画像URLを列挙できる、汎用的なサンプル

- 0
- 件

通報する

この回答へのお礼

とても丁寧にありがとうございました。
再度、勉強させていただきます！

通報する

お礼日時：2015/09/13 02:04

参考程度に

No.2

回答者： fujillin
回答日時：2015/09/11 16:38

う～～んと・・・

＞Aボタンを押すとBの画像が切り替わり～～
ボタンらしきものがありませんが、画像をクリックするとその画像が切り替わるということで良いのでしょうか？

ご提示のサンプルだと、
imgタグに同じname=gazou1となっているので、nameだけでは区別できなくなっています。
また、HTMLにはgazou1しかないのに、スクリプトにはgazou1～gazou4まで記述されていて、何だか変ですね。

きっと、画像が切り替わるものを2つ設置したいのかなと想像しましたが、その際に、スクリプト内の変数のcntやnumが両方共用になっちゃってますので、処理中に混乱が起きませんか？
個別に処理をなさりたければ、変数も変えておかないとうまくないです。
（互いに関連を持った処理であるなら別ですが）

すでにNo1様がノーマルな回答をなさっていますので、すこし違うものを・・・
（こんなのでも可能と言う参考に。ただし画像の先読みはしていません。）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>

<body>
<p><img src="A.jpg" id="gazou1">
<p><img src="img/photo01.jpg" id="gazou2">
<p><img src="img1.gif" id="gazou3">

<script type="text/javascript">

//（画像のid、uriの配列）のセットで画像チェンジを設定
imageChanger("gazou1", ["A.jpg", "B.jpg", "C.jpg"]);
imageChanger("gazou2", ["img/photo01.jpg", "img/photo02.jpg"]);
imageChanger("gazou3", ["img1.gif", "img2.gif", "img3.gif", "img4.gif"]);

function imageChanger(id, uris){
var t = document.getElementById(id);
var c = 0, n = uris.length;
t.onclick = function(){ t.src = uris[ c = ++c % n]; }
}
</script>
</body>
</html>