画像切替の方法(html)

Question

jsかcssを使って
画像（<img src="">）をクリックした時
交互に入れ替えたいです。

リンクとかは貼っていませんので
ただただ画像クリックで切替られたら良いのです。

先生方、なにか簡単な方法を
ご教授くださいますようお願い申し上げます。。m(_ _)m

Answer 1

たとえばsrcとlowsrcを入れ変えるとか・・・

<script>
$(function(){
  $('img').click(function(){var swap=$(this).attr('src');$(this).attr('src',$(this).attr('lowsrc'));$(this).attr('lowsrc',swap)});
})
</script>

<img src="1.jpg" lowsrc="2.jpg">

Comments

[退会済みユーザー]

すごく簡単で分かりやすいやり方です！

有難うございました！！

Answer 2

HTML 側

<img id="gazo" onclick="changeIMG()" src="image/0.jpg" width="320" height="240" border="0" alt="">

---

<script> //画像を配列に格納する var img = new Array(); img[0] = new Image(); img[0].src = "image/0.jpg"; img[1] = new Image(); img[1].src = "image/1.jpg"; img[2] = new Image(); img[2].src= "image/2.jpg"; //画像番号用のグローバル変数 var cnt=0; //画像切り替え関数 function changeIMG(){ //画像番号を進める if (cnt == 2) { cnt=0; } else { cnt++; } //画像を切り替える document.getElementById("gazo").src=img[cnt].src; } </script>

これで変更できます。

Comments

[Lhankor_Mhy]

回答者はリンクを貼り忘れたようなので、代わりに貼っておきますね。
http://www.pori2.net/js/DOM/3.html