| 画像チェンジャー (効果音付き) 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 | 音声が再生されるまでの待機時間を設定 極端な連続再生によるエラー対策(変更点：ソース１) |
|
 |
|
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
||||
|
１．カスタマイズフォームを使って設定をしてください。 ２．ソース１を<head>～</head>の間に書き込んでください。 ３．ソース２を<body>～</body>の間の ソース３よりも前の位置に書きこんでください。 ３．ソース３を<body>～</body>の間の 画像を表示したい位置に書き込んでください。 ５．ブラウザでテストしてみてください。 正常に画像が切り替わり音が鳴れば設置は完了です。 |
||||||
|
|
|||||
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
|
|||
|
１．ソース１を<head>～</head>の間に書き込んでください ２．//設定～//ここまで２行目を切替えたい画像のパスに ５行目を再生したい音声ファイルのパスに変更してください。 //切り替わる画像のパス r_o_pic[1] = 'img/kitune2.gif'; //音声ファイルのパス r_o_mid[1] = 'img/pipon.mid'; ３．ソース２を<body>～</body>の間の ソース３よりも前の位置に書きこんでください。 ４．ソース２を<body>～<body>の間に書き込むか 次の要領で切り替わる画像のソースを書き込んでください。 Ⅰ．切り替わる画像のタグにid属性、name属性をつける。(属性値はr_o_img1) Ⅱ．onMouseOverでchange_onC(1,1)関数 onMouseOutでchange_offC(1)関数を呼び出すソースを書き込む。(<a>推奨) ５．ブラウザでテストしてみてください。 正常に画像が切り替わり音が鳴れば設置は完了です。 |
||||||
|
|
|||||
 |
|
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
|
|
|
■特にありません。
|
||||||
|
|
|||||
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
||
|
■切り替わる画像を増やす。 //設定～//ここまでを６行目を１行増やし 該当の個所の数字と画像のパスを変更してください。 r_o_pic[1] = 'img/kitune2.gif'; r_o_pic[2] = 'img/risu2.gif';次にソース３を画像を表示したい場所に書き込むか セッティングの項目の要領で増やしてください。 その上で該当個所の数字を増やしてください。 <a href="JavaScript:;" onMouseOver="change_onC(2,1)" onMouseOut="change_offC(1)"> <img src="risu.gif" name="r_o_img2" border="0"></a>■効果音を追加する。 //設定～//ここまでの２行目を１行増やし 該当の個所の数字と音声ファイルのパスを変更してください。 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> |
||||||
|
|
|||||
 |
 |
|
|
■ソース１(以下のソースを<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>
|
■ソース２(以下のソースを<body>～<body>の間に書き込んでください) | |
<span id="r_o_layer" class="r_o_layer"></span> <script language="JavaScript" type="text/javascript"><!-- change_set(); // --></script>
|
■ソース３(以下のソースを<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>
 |
|