Other

2019

05-23

更新日：2023/05/19

マウスオーバーで画像をランダム表示

マウスオーバーで画像をランダム表示させてみました

遊びでマウスオーバーで画像がランダムに変わる小細工処理をして見ました。

<img src="元画像" onMouseover="RandomImage(this);" onMouseout="this.src='元画像'">
 
<script type="text/javascript">
function RandomImage(obj){
    var lists=[
    'ランダム画像1',
    'ランダム画像2',
    'ランダム画像3',
    'ランダム画像4',
    ];
     
    var rNo = Math.floor(Math.random() * lists.length);
    obj.src= lists[rNo];
}
</script>

onMouseout=”this.src=’元画像’　の部分をonMouseout=”RandomImage(this);　に変更でランダム表示されます。
下の画像にマウスを重ねる度に画像がランダムに切り替わります。

//例、上の画像の実データ
//画像のリンクは絶対パスにしてください。
<img style="display: block; margin-left: auto; margin-right: auto; border-radius: 150px;" 
 src="images/avatar_a.svg" onMouseover="RandomImage(this);" onMouseout=”RandomImage(this);" alt="avatar" width="300" height="auto">
 
<script type="text/javascript">
function RandomImage(obj){
    var lists=[
    'images/avatar01_a.svg',
    'images/avatar02_a.svg',
    'images/avatar03_a.svg',
    'images/avatar04_a.svg',
    'images/avatar_a.svg'
    ];
     
    var rNo = Math.floor(Math.random() * lists.length);
    obj.src= lists[rNo];
}
</script>

同一ページに複数設置する場合

複数設置する場合は色々な方法が有るとおもいますが、簡単な方法はscript名が重複しないよう変更して設置することです。
onMouseover="RandomImage(this);
onMouseout=”RandomImage(this);
function RandomImage(obj){
の3箇所「RandomImage」の部分を別の名前に変て設置。

もう一つの方法は下記の様にスクリプトをまとめて書く方法です。

//javaScriptをまとめた場合
//画像のリンクは絶対パスにしてください。
<img src="list0元画像URL" onMouseover="RandomImage(this,0);" onMouseout=”RandomImage(this,0);">
 
<img src="list1元画像URL" onMouseover="RandomImage(this,1);" onMouseout=”RandomImage(this,1);">
 
<img src="list2元画像URL" onMouseover="RandomImage(this,2);" onMouseout=”RandomImage(this,2);">
 
<script type="text/javascript">
function RandomImage(obj,listNo){
    list0=[
    'list0のランダム画像',
    'list0のランダム画像',
    'list0のランダム画像',
    ];
 
    list1=[
    'list1のランダム画像',
    'list1のランダム画像',
    'list1のランダム画像',
    ];
     
    list2=[
    'list2のランダム画像',
    'list2のランダム画像',
    'list2のランダム画像',
    ];
     
    lists=[list0,list1,list2];
     
    var rNo = Math.floor(Math.random() * lists[listNo].length);
    obj.src= lists[listNo][rNo];
}
</script>

画像をクリックでランダム表示

こちらは画像をクリックすることでランダムに表示されます。
準備画像はナンバーを付けた形にしています。
avatar01.svg
avatar02.svg
avatar03.svg
avatar04.svg
avatar05.svg

var a = Math.random() * 5;　//最大ランダム数（準備した画像の数）

//画像のリンクは絶対パスにしてください。
<img style="display: block; margin-left: auto; margin-right: auto; border-radius: 150px;" src="images/avatar05.svg" alt="avatar" width="300" height="auto"  id="Random" onclick="aRandomImage()" />

<script>
function aRandomImage(){
     var a = Math.random() * 5;
     var n = Math.floor( a ) +1;
     var avarandom = "images/avatar0"+n+".svg";
     document.getElementById("Random").src = avarandom;
}
</script>