【情報基礎】onclickで画像置換する。

Twitterアカウント作成しました！
記事を書く度にツイートされます。@mokabuucomに新着記事やリツイートがどんどん溜まって行くのでもし良かったらrss代わりにでもフォローしてください！！！

先ほどバイト先に名前も顔も知らない迷える子羊ちゃんが来まして。
「javascriptつかってonclickで画像置換してほしい。」と唐突に頼まれました。僕のバイト先は課題のお手伝いをするところではないので即お帰りいただいたのですが、ちゃちゃっと教えてあげられなかったのではダサい。

っていうことでJavaScriptでonclickで画像置換するコード書きました。必要な方いらっしゃいましたら参考にしてみてください。笑

<img id="image" onclick="image_change()" src="0.jpg">

<script>

var img = new Array();

for (cnt = 0; cnt <= 2; cnt++) {
img[cnt] = new Image();
img[cnt].src = cnt + ".jpg";
}


//画像切り替え用(別にiで良い)
var cnt = 0;


//画像を切り替える
function image_change(){

//とりあえずの画像は3枚なので0~2をループ
  if (cnt == 2) {
  	cnt = 0;
  	}
  else {
  	cnt++;
  	}
  
  //画像を切り替える
  document.getElementById("image").src=img[cnt].src;
}

</script>

どうっすか、この情弱のコード。笑
我ながらもっとやりようあると思うのだけれどとりあえずこれで…。

でも僕らの時は情報基礎という１年生向けのプログラミングの授業で扱うのはhtmlとcssだけでした。難化したのね…。

こんなコードどこの誰が使うのかはわかりませんが、必要な方いらっしゃいましたら是非“自己責任で”参考にしてください…。

mokabuu

ブログ管理人

XInstagramYouTube

2014年1月からmokabuu.comを運営しております。現在10年間で老朽化したサイトをリフォーム中です（2025/1〜）。