複数版
画像チェンジャー

ver.1.0
 
 ◆サンプル
 

サンプル集トップ  ウェブ木箱トップ
 
    <機能と特徴>
 
 ・所謂ロールオーバーのスクリプト

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

 ・1つの画像をポインタを乗せたリンクに応じて
  いろいろな画像に切替えることができます。
 



 

公開日 2002.10.12
最終更新日 ---
バージョン ver.1.0
動作確認 IE6.0,NN4.7,NN7.0,Opera7.2
cookie 不使用
CSS 不使用
更新履歴 ---    

 

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

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

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

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

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

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

2.//設定〜//ここまでの1〜2行目を切り替わる画像ファイルのパスに変更してください。
  r_s_pic[1] = 'img/risu2.gif';
  r_s_pic[2] = 'img/risu3.gif';
3.ソース2を<body>〜</body>の間に書き込むか、
  次の要領で切り替わる画像のソースを書き込んでください。

  T.切り替わる画像のタグにid属性、name属性をつける。(属性値はr_s_img1)
  U.onMouseOverでchange_onB(1,*)関数
    onMouseOutでchange_offB(1)関数を呼び出すソースを書き込む。(<a>推奨)
  V.上記の*の部分は//設定〜//ここまでで設定した中から
    切替えたい画像の数字を書き込みます。
    例えばr_s_pic[2].srcで指定した画像に切替えたいなら
    change_onB(1,2)といった要領です。

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

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

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

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

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

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

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

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

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

 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
 【切り替わる画像の設定】 
切り替わる画像の数:
 
☆★☆1個目の切り替わる画像☆★☆
 元の画像のパス:  
 カーソルを合わせた時の動作:    
 切り替わる画像のパス:  
 リンクのジャンプ先のパス:
(ジャンプさせない場合空欄にしておいてください) 
 画像を切り替えるリンク数:
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
特にありません。
 
 カスタマイズフォーム   補足説明   改造方法 

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

 //設定〜//ここまでを1行増やし
 該当の個所の数字と画像のパスを変更してください。
r_s_pic[1] = 'img/kitune2.gif';
r_s_pic[2] = 'img/risu2.gif';
 次にソース2を画像を表示したい場所に書き込むか
 セッティングの項目の要領で増やしてください。
 その上で該当個所の数字を変更してください。
<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>
 
 
  

ソース1(以下のソースを<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>

ソース2(以下のソースを<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>


ソース3(以下のソースを<body>〜<body>の間に書き込んでください)  
 
<!--1個目の画像を切替えるリンク(1個目)-->
<a href="index.html" onMouseOver="change_onB(1,1)" onMouseOut="change_offB(1)">トップページ</a>



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


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