マウスオーバー時の画像をランダムに切り替える方法

公開日:  最終更新日:2015/12/16

マウスオーバー時の画像をランダムに切り替える方法
ネットショップのコンテンツを作成する際にランダムにバナーを並べたり、ランダムに商品を並べたいという場面はありますよね。当ブログでもランダムに何かするという内容の記事をいくつか書いていますが本日もそんな内容です。

スポンサードリンク

マウスオーバー時にランダムに画像切り替える方法[javascript]

以前書いた記事


ではマウスオーバー時に画像を切り替える方法としてCSSとjavascriptの2つを紹介しました。

それに関連する内容になりますが、マウスオーバー時に切り替わる画像をあらかじめ指定した画像候補からランダムに切り替える方法を紹介したいと思います。

実装にあたって、ランダムに何かするということで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]

さきほどのサンプルでは、1つの画像に対してのマウスオーバー時の画像切り替え候補の画像リストが1つでした。実際に活用する場合は複数の画像を並べて、複数の切り替え候補の画像リストが必要になります。

サンプルソース 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行目で用意した複数のリストを1つにまとめています。
list3,list4と追加した場合は、lists=[list0,list1,list2,list3,list4];となります。

処理を呼び出す部分の記述もSetRandomImage(this,0);と、さきほどと違うのは、どのリストを使うかを番号で指定しているところです。
SetRandomImage(this,0); → list0を使う
SetRandomImage(this,2); → list2を使う

複数の画像のサンプル


マウスオーバー時にランダムに画像を切り替えることに、どれだけ需要があるかわかりませんが気になったので記事にしてみました。ぜひ、活用してみてください。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑