画像チェンジャー
(効果音付き)

ver.1.1
 
 ◆サンプル
 
    <機能と特徴>
 
 ・所謂ロールオーバーのスクリプト

 ・ポインタを乗せると画像が代わり外すと元の画像に戻ります

 ・ポインタを乗せた際に効果音を再生できます
 



 

公開日 2003.2.21
最終更新日 2003.6.15
バージョン ver.1.1
動作確認 IE6.0,NN4.7,NN7.0,Opera7.2
cookie 不使用
CSS 不使用
更新履歴 2003.6.15 ver.1.1音声が再生されるまでの待機時間を設定
極端な連続再生によるエラー対策(変更点:ソース1)
 

 

☆★☆使い方☆★☆
 
 初心者向け解説   中級者向け解説   ダウンロード 

1.カスタマイズフォームを使って設定をしてください。

2.ソース1を<head>〜</head>の間に書き込んでください。

3.ソース2を<body>〜</body>の間の
  ソース3よりも前の位置に書きこんでください。

3.ソース3を<body>〜</body>の間の
  画像を表示したい位置に書き込んでください。

5.ブラウザでテストしてみてください。
  正常に画像が切り替わり音が鳴れば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

1.ソース1を<head>〜</head>の間に書き込んでください

2.//設定〜//ここまで2行目を切替えたい画像のパスに
  5行目を再生したい音声ファイルのパスに変更してください。
//切り替わる画像のパス
r_o_pic[1] = 'img/kitune2.gif';

//音声ファイルのパス
r_o_mid[1] = 'img/pipon.mid';

3.ソース2を<body>〜</body>の間の
  ソース3よりも前の位置に書きこんでください。
4.ソース2を<body>〜<body>の間に書き込むか
  次の要領で切り替わる画像のソースを書き込んでください。

  T.切り替わる画像のタグにid属性、name属性をつける。(属性値はr_o_img1)
  U.onMouseOverでchange_onC(1,1)関数
    onMouseOutでchange_offC(1)関数を呼び出すソースを書き込む。(<a>推奨)

5.ブラウザでテストしてみてください。
  正常に画像が切り替わり音が鳴れば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 
 
ダウンロードする形式を選択してください。

 【スクリプトを1つのページに組み込む】 

1.カスタマイズフォームを使って設定をする場合は、
  ダウンロードの前に設定をしてください。

2.右のボタンを押してファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は一括)】 

1.カスタマイズフォームを使って設定をする場合は、
  ダウンロードの前に設定をしてください。

2.右のボタンを押して外部ファイルをダウンロードしてください。
 
3.保存した外部ファイルのファイル名を入力してください。
   (ファイルのパスでも可)
 
4.右のボタンを押してHTMLファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は各ページ毎)】 

1.カスタマイズフォームを使って設定をする場合は、
  ダウンロードの前に設定をしてください。
 
2.右のボタンを押して外部ファイルをダウンロードしてください。
 
3.保存した外部ファイルのファイル名を入力してください。
   (ファイルのパスでも可)
 
4.右のボタンを押してHTMLファイルをダウンロードしてください。
 
5.複数のページが必要な場合は、カスタマイズフォームで設定をし
  再度HTMLファイルのみダウンロードしてください。
 

 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
 【セレクトボックス設定】 
セレクトボックスの数:
 
☆★☆1個目のセレクトボックス☆★☆
 元の画像のパス:  
 切り替わる画像のパス:  
 効果音の音声のパス:  
 リンクのジャンプ先:
(ジャンプさせない場合空欄にしておいてください) 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
特にありません。
 
 カスタマイズフォーム   補足説明   改造方法 

切り替わる画像を増やす。

 //設定〜//ここまでを6行目を1行増やし
 該当の個所の数字と画像のパスを変更してください。
r_o_pic[1] = 'img/kitune2.gif';
r_o_pic[2] = 'img/risu2.gif';
 次にソース3を画像を表示したい場所に書き込むか
 セッティングの項目の要領で増やしてください。
 その上で該当個所の数字を増やしてください。
<a href="JavaScript:;" onMouseOver="change_onC(2,1)" onMouseOut="change_offC(1)">
<img src="risu.gif" name="r_o_img2" border="0"></a>
効果音を追加する。

 //設定〜//ここまでの2行目を1行増やし
 該当の個所の数字と音声ファイルのパスを変更してください。
r_o_mid[1] = 'img/pipon.mid';
r_o_mid[2] = 'img/bu.mid';
 追加した効果音を使用したい場合は
 change_onC関数の該当個所の数字に変更してください。
<a href="JavaScript:;" onMouseOver="change_onC(1,2)" onMouseOut="change_offC(1)">
<img src="risu.gif" name="r_o_img1" border="0"></a>
リンクを張らずにロールオーバーさせる。

 イベントハンドラを<img>に直接つければ可能ですが、
 一部のブラウザが対応していません。
 単純にジャンプさせないだけなら<a>のhref属性の属性値に
 JavaScript:;を指定してください。
<a href="JavaScript:;" onMouseOver="change_onC(1,1)"
 onMouseOut="change_offC(1)">
<img src="img/kitune.gif" name="r_img1" border="0"></a>
 
 
  

ソース1(以下のソースを<head>〜</head>の間に書き込んでください)  
 
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
    //ver.1.1

r_o_pic   = new Array();
r_o_image = new Array();
r_o_moto  = new Array();
r_o_mid   = new Array();
r_o_temp  = new Array();
r_o_check = 0;
r_o_id    = "";

//設定 r_o_pic[1] = 'img/kitune2.gif'; //1個目の切り替わる画像のパス r_o_mid[1] = 'img/pipon.mid'; //1個目の効果音のパス //ここまで
for(i=1;i<r_o_pic.length;i++) {r_o_image[i] = new Image(); r_o_image[i].src = r_o_pic[i];}
function change_onC(i,ii) {if(!r_o_moto[i]) {r_o_moto[i] = document.images["r_o_img"+i].src;} document.images["r_o_img"+i].src=r_o_image[i].src; if(!r_o_check) {change_sound(ii);} else {r_o_id = setTimeout('change_sound('+ii+');',200);}}
function change_offC(i) {r_o_check = 1; clearTimeout(r_o_id); setTimeout('change_stop();',200); document.images["r_o_img"+i].src=r_o_moto[i];}
function change_stop() {r_o_check = 0;}
function change_sound(i) {with(document) {if(document.all) {all("r_o_layer").innerHTML = r_o_temp[i];} else if(document.getElementById) {getElementById("r_o_layer").innerHTML = r_o_temp[i];} else if(document.layers) {with(layers["r_o_layer"].document) {open(); write(r_o_temp[i]); close();}}}}
function change_set() {temp = ""; for(i in r_o_mid) {r_o_temp[i] = '<embed src="'+r_o_mid[i]+'" autostart="true" autoplay="true" repeat="1" loop="false" width="1" height="1" hidden="true">\n'; temp += '<embed src="'+r_o_mid[i]+'" autostart="false" autoplay="false" width="1" height="1" hidden="true">\n';} with(document) {if(document.all) {all("r_o_layer").innerHTML = temp;} else if(document.getElementById) {getElementById("r_o_layer").innerHTML = temp;} else if(document.layers) {with(layers["r_o_layer"].document) {open(); write(temp); close();}}}}
with(document) {open(); write('<style type="text/css">\n<!-\-\n'); write('.r_o_layer {position:absolute;}\n'); write('\n-\->\n<\/style>'); close();}
// --> </script>

ソース2(以下のソースを<body>〜<body>の間に書き込んでください)  
 
<span id="r_o_layer" class="r_o_layer"></span>
<script language="JavaScript" type="text/javascript"><!--
change_set();
// --></script>

ソース3(以下のソースを<body>〜<body>の間に書き込んでください)  
 
<!--1個目の画像-->
<a href="JavaScript:;" onMouseOver="change_onC(1,1)" onMouseOut="change_offC(1)">
<img src="kitune.gif" name="r_o_img1" border="0"></a>



スクリプト無効時には画像は切り替わりません。
 リンクなどには影響はないので特に問題ないと思いますが
 どうしても切り替わった画像で何かを伝えたいなら
 <noscript>〜</noscript>でメッセージを書き込むといいでしょう。


ウェブ木箱サンプル集
copyright(C) 2003-2004 あう