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