html - 指定した画像から開始し、クリック時にランダム化

Question

特定の画像を表示して、ユーザーがそれをクリックすると、マウスオーバー効果のように画像が変化するようにしたいと思います。ただし、セットリストからランダムに画像を表示したい。ページの更新ごとに1回発生し、完了します。リバーシブルでないほうがいいです。

私が使用しているのは、画像付きのランダムカードドローです。カードの裏面から始めて、クリックすると表示される可能性がたくさんあります。

ありがとう！

Answer 1

私が理解している限り、必要な基本的なコードは次のとおりです

<img src="img/BackOfCard.jpg" onClick="Randomize(this)" />
<input type="hidden" value="1" id="onlyOnce">
<script type="text/javascript" language="javascript">
function Randomize(obj) {
  onlyOnce = document.getElementById("onlyOnce");
  if (onlyOnce.value=="1") {
    var n = Math.round((100*Math.random())+0.5);
    var urls = ["url1.png","url2.png","and so on"];
    obj.src = urls[n];
    onlyOnce.value="0";
  }
}
</script>

これは、カードの裏面の画像とすべてのカードの表面が格納された「img」というフォルダがあることを前提としています。カードの面は、Ace = 1.jpg、2 = 2.jpg、3 = 3.jpg、King = 13.jpg などの形式で保存されます。