| 公開日 | 2002.1.18 | ||
| 最終更新日 | 2003.7.20 | ||
| バージョン | ver.2.1 | ||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.2 | ||
| cookie | 不使用 | ||
| CSS | 不使用 | ||
| 更新履歴 | 2003.7.20 | ver.2.0 | スクリプトを簡略化 |
| アイコンセレクター ver.2.0 |
||||
◆サンプル |
||||
|
＜機能と特徴＞ ・セレクトボックスで選択したアイコンに 画像が切り替わります。 |
||||
 |
|
|
|
|
| アイコンセレクター ver.2.0 |
||||
◆サンプル |
||||
|
＜機能と特徴＞ ・セレクトボックスで選択したアイコンに 画像が切り替わります。 |
||||
|
|
|
|
|
 |
|
| 公開日 | 2002.1.18 | ||
| 最終更新日 | 2003.7.20 | ||
| バージョン | ver.2.1 | ||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.2 | ||
| cookie | 不使用 | ||
| CSS | 不使用 | ||
| 更新履歴 | 2003.7.20 | ver.2.0 | スクリプトを簡略化 |
 |
|
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
||||
|
１．カスタマイズフォームを使って設定をしてください。 ２．ソース１を<head>〜</head>の間に書き込んでください。 ３．ソース２を<body>〜</body>の間の セレクトボックスを表示したい位置に書き込んでください。 ４．ソース３を<body>〜</body>の間の 切り替わる画像を表示したい位置に書き込んでください。 ５．ブラウザでテストしてみてください。 正常に画像が切り替われば設置は完了です。 |
||||||
|
|
|||||
 |
|
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
|
|
|
■特にありません。
|
||||||
|
|
|||||
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
||
|
■セレクトボックスを複数設置する。 まずソース２を表示したい場所に書き込み、該当個所の数字を増やします。
<form><select onChange="icon_selecter(2,this);">
<option>ここから選んでね</option>
<option>みかん</option>
</select></form>
次にソース３を表示したい場所に書き込み、該当個所の数字を増やします。
<img src="img/mikan.gif" name="i_icon2">
次に//設定〜ここまでを２行１組で増やし該当個所の数字を増やしてください。
i_list[2] = new Array(); i_list[2][1] = "img/mikan.gif";■選択肢の数を増やす。 セレクトボックスの方は<option>タグを使って選択肢を増やしてください。 切り替わる画像のパスの設定は//設定〜//ここまでの３行目を１行増やし、 該当個所と該当の数字を増やしてください。 i_list[1][2] = 'img/dango.gif';■一番上の選択肢でも切り替わるようにする。 //設定〜//ここまで２番目の添字に0を使用して 切り替わる画像のパスを書き込んでください。 i_list[1] = new Array(); i_list[1][0] = 'img/kani.gif'; i_list[1][1] = "img/mikan.gif"; |
||||||
|
|
|||||
 |
 |
|
|
■ソース１(以下のソースを<head>〜</head>の間に書き込んでください) | |
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
//ver.2.0
i_list = new Array();
i_list2 = new Array();
//設定
i_list[1] = new Array();
i_list[1][1] = 'img/mikan.gif';
//ここまで
for(i in i_list)
{i_list2[i] = new Array();
for(ii in i_list[i])
{i_list2[i][ii] = new Image();
i_list2[i][ii].src = i_list[i][ii];}}
function icon_selecter(i,posi)
{if(i_list2[i][posi.selectedIndex])
{document.images["i_icon"+i].src=i_list2[i][posi.selectedIndex].src;}}
// -->
</script>
|
■ソース２(以下のソースを<body>〜<body>の間に書き込んでください) | |
<!--1個目のセレクトボックス-->
<form><select onChange="icon_selecter(1,this);">
<option>ここから選んでね</option>
<option>みかん</option>
</select></form>
|
■ソース３(以下のソースを<body>〜<body>の間に書き込んでください) | |
<!--1個目の切り替わる画像-->
<img src="img/mikan.gif" name="i_icon1">
 |
|