| 公開日 | 2002.1.18 | ||
| 最終更新日 | --- | ||
| バージョン | ver.1.0 | ||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.0 | ||
| cookie | 不使用 | ||
| CSS | 不使用 | ||
| 更新履歴 | --- | ||
| 画像チェンジャー ver.1.0 |
||||
◆サンプル 
 |
||||
| ＜機能と特徴＞ ・所謂ロールオーバーのスクリプト ・ポインタを乗せると画像が代わり外すと元の画像に戻ります |
||||
 |
|
|
|
|
| 画像チェンジャー ver.1.0 |
||||
◆サンプル
|
||||
| ＜機能と特徴＞ ・所謂ロールオーバーのスクリプト ・ポインタを乗せると画像が代わり外すと元の画像に戻ります |
||||
|
|
|
|
|
 |
|
| 公開日 | 2002.1.18 | ||
| 最終更新日 | --- | ||
| バージョン | ver.1.0 | ||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.0 | ||
| cookie | 不使用 | ||
| CSS | 不使用 | ||
| 更新履歴 | --- | ||
 |
|
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
||||
|
１．カスタマイズフォームを使って設定をしてください。 ２．ソース１を<head>～</head>の間に書き込んでください。 ３．ソース２を<body>～</body>の間の 画像を表示したい位置に書き込んでください。 ４．ブラウザでテストしてみてください。 正常に画像が切り替われば設置は完了です。 |
||||||
|
|
|||||
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
|
|||
|
１．ソース１を<head>～</head>の間に書き込んでください ２．//設定～//ここまでの１行目を切り替わる画像ファイルのパスに変更してください。 r_pic[1].src = 'img/kitune2.gif';
３．ソース２を<body>～</body>の間に書き込むか、次の要領で切り替わる画像のソースを書き込んでください。 Ⅰ．切り替わる画像のタグにid属性、name属性をつける。(属性値はr_img1) Ⅱ．onMouseOverでchange_on(1)関数 onMouseOutでchange_off(1)関数を呼び出すソースを書き込む。 ４．ブラウザでテストしてみてください。 正常に画像が切り替われば設置は完了です。 |
||||||
|
|
|||||
 |
|
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
|
|
|
■特にありません。
|
||||||
|
|
|||||
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
||
|
■切り替わる画像を複数設置する。 //設定～//ここまでを１行目を１行増やし 該当の個所の数字と画像のパスを変更してください。 r_pic[1].src = 'img/kitune2.gif'; r_pic[2].src = 'img/risu2.gif';次にソース２を画像を表示したい場所に書き込むか セッティングの項目の要領で増やしてください。 その上で該当個所の数字を変更してください。 <a href="#" onMouseOver="change_on(2)" onMouseOut="change_off(2)"> <img src="img/risu.gif" name="r_img2" border="0"></a>■リンクを張らずにロールオーバーさせる。 イベントハンドラを<img>に直接つければ可能ですが、 一部のブラウザが対応していません。 単純にジャンプさせないだけなら<a>のhref属性の属性値に JavaScript:;を指定してください。
<a href="JavaScript:;" onMouseOver="change_on(1)"
onMouseOut="change_off(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.0
r_pic = new Array();
r_image = new Array();
r_moto = new Array();
//設定
r_pic[1] = 'img/kitune2.gif'; //1個目の切り替わる画像のパス
//ここまで
for(i=1;i<r_pic.length;i++)
{r_image[i] = new Array();
r_image[i].src = r_pic[i];}
function change_on(i)
{if(!r_moto[i])
{r_moto[i] = document.images["r_img"+i].src;}
document.images["r_img"+i].src=r_image[i].src;}
function change_off(i)
{document.images["r_img"+i].src=r_moto[i];}
// -->
</script>
|
■ソース２(以下のソースを<body>～</body>の間に書き込んでください) | |
<!--1個目の画像-->
<a href="JavaScript:;" onMouseOver="change_on(1)" onMouseOut="change_off(1)">
<img src="img/kitune.gif" name="r_img1" border="0"></a>
 |
|