マウスオーバー時の画像をランダムに切り替える方法
ネットショップのコンテンツを作成する際にランダムにバナーを並べたり、ランダムに商品を並べたいという場面はありますよね。当ブログでもランダムに何かするという内容の記事をいくつか書いていますが本日もそんな内容です。
ランダムに何かさせるとなるとcssのみでは実装は難しく、javascriptで乱数を発生どうのこうのが必要になります。
マウスオーバー時にランダムに画像切り替える方法[javascript]
以前書いた記事
ではマウスオーバー時に画像を切り替える方法としてCSSとjavascriptの２つを紹介しました。
それに関連する内容になりますが、マウスオーバー時に切り替わる画像をあらかじめ指定した画像候補からランダムに切り替える方法を紹介したいと思います。
実装にあたって、ランダムに何かするということでcssのみでは難しいのでjavascriptを使った方法です。以前の記事にてjavascriptでのシンプルな画像切り替えについて確認しておいてください。
サンプルソース sample1.html
<img src="元画像URL" onMouseover="SetRandomImage(this);" onMouseout="this.src='元画像URL'">
<script type="text/javascript">
function SetRandomImage(obj){
var lists=[
'切り替え画像URL候補1',
'切り替え画像URL候補2',
'切り替え画像URL候補3',
'切り替え画像URL候補4',
'切り替え画像URL候補5'
];
var rNo = Math.floor(Math.random() * lists.length);
obj.src= lists[rNo];
}
</script>
1行目の画像タグでonMouseover=”SetRandomImage(this);”としてマウスオーバー時javascriptで定義した処理を呼び出しています。
5行目から11行目で切り替え候補の画像を設定しています。このサンプルでは5つ指定していますが数は自由に変更することが可能です。変更する場合は、「’」シングルクォーテーションで画像URL前後を囲む、「,」カンマで区切る点に注意してください。
13行目でランダムな数値を生成しています。このサンプルでは画像リストの候補を5つ設定しているので処理が呼ばれる度に0から4のいずれかの数値になります。
14行目がリストから選択された画像をセットしています。0から4のいずれかの数値が生成されているのでlists内の■番目の情報を使いますという感じですね。
ちなみに、画像タグ部分でonMouseout=”this.src=’元画像URL’としてマウスカーソルが画像から外れた場合に元の画像に戻していますが、onMouseout=”SetRandomImage(this);として同様にランダムな画像にすることも可能です。
動作サンプル
複数の画像リストを設定する場合[javascript]
さきほどのサンプルでは、１つの画像に対してのマウスオーバー時の画像切り替え候補の画像リストが１つでした。実際に活用する場合は複数の画像を並べて、複数の切り替え候補の画像リストが必要になります。
サンプルソース sample2.html
list0の画像を利用
<img src="元画像URL" onMouseover="SetRandomImage(this,0);" onMouseout="this.src='元画像URL'">
list1の画像を利用
<img src="元画像URL" onMouseover="SetRandomImage(this,1);" onMouseout="this.src='元画像URL'">
list2の画像を利用
<img src="元画像URL" onMouseover="SetRandomImage(this,2);" onMouseout="this.src='元画像URL'">
<script type="text/javascript">
function SetRandomImage(obj,listNo){
list0=[
'画像URL',
'画像URL',
'画像URL',
'画像URL',
'画像URL'
];
list1=[
'画像URL',
'画像URL',
'画像URL',
'画像URL',
'画像URL'
];
list2=[
'画像URL',
'画像URL',
'画像URL',
'画像URL',
'画像URL'
];
lists=[list0,list1,list2];
var rNo = Math.floor(Math.random() * lists[listNo].length);
obj.src= lists[listNo][rNo];
}
</script>
さきほどのサンプルと重複する部分は説明を省略します。
3つの画像に対して、list0、list1、list2として、それぞれ切り替え候補の画像リストを用意しています。数を変更する場合は、list3,list4と追加していってください。
36行目で用意した複数のリストを１つにまとめています。
list3,list4と追加した場合は、lists=[list0,list1,list2,list3,list4];となります。
処理を呼び出す部分の記述もSetRandomImage(this,0);と、さきほどと違うのは、どのリストを使うかを番号で指定しているところです。
SetRandomImage(this,0); → list0を使う
SetRandomImage(this,2); → list2を使う
複数の画像のサンプル
マウスオーバー時にランダムに画像を切り替えることに、どれだけ需要があるかわかりませんが気になったので記事にしてみました。ぜひ、活用してみてください。
マウスーオーバー時の関連する記事
その他javascript,cssについてまとめ
Your Message