画像ボタン
ver.1.0
　
　◆サンプル
　

 
　 　 ＜機能と特徴＞
　
　・フォーム部品のボタンのような動作を
　　画像で再現できます。
　
　・クリックした時の動作はいろいろ指定できますが、
　　どちらかと言えば中級者以上向けのスクリプトです。
 



 

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

 

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

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

２．ソース１を<head>〜</head>の間に書き込んでください。

３．ソース２を<body>〜</body>の間の
　　画像を表示したい位置に書き込んでください。

４．ブラウザでテストしてみてください。
　　正常に動作すれば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

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

２．ソース２を<body>〜</body>の間の
　　表示したい位置に書き込んでください。

３．//設定〜//ここまでの１行目を切り替わる画像のパスに変更してください 
ib_button[1]  = 'img/botoru2.gif';
　　次にソース２の該当個所を元の画像のパスに変更してください。 
ib_button[1]  = 'img/botoru2.gif';
４．ブラウザでテストしてみてください。
　　正常に画像が切り替われば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 
 
■ダウンロードする形式を選択してください。

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

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

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

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

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

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

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

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

 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
設置するリンクの数：
☆★☆1個目のリンク☆★☆
 元の画像のパス：  
 ボタンを押した時の画像のパス：  
 ボタンを押した時の動作：
*詳しくは補足説明をどうぞ。
 
　
 カスタマイズフォーム   補足説明   改造方法 
 
■ボタンを押した時の動作について

ボタンを押した時の動作はJavaScript構文で設定するので
ある程度詳しい方でないとわかりにくいかもしれません。
一例として簡単なものを紹介します。
赤文字で示した部分を変更して設定してください。

☆アラートを出す。 
alert('ここに表示したい文字を書き込んでください。');
☆ジャンプする。 
location.href = 'ここにジャンプ先のファイルのパスを書き込んでください。';
 
 カスタマイズフォーム   補足説明   改造方法 
 
■ボタンを押した時の動作を変更する。

　//設定〜//ここまでを２行目を変更してください。
　JavaScript構文で設定してください。
　ユーザ定義関数を呼び出す事も可能です。
ib_scripts[1] = 'location.href = "index.html"';
■複数設置する。

　//設定〜//ここまでを２行１組で増やし、
　該当個所の数字を増やし、該当個所を変更してください。 
ib_button[2]  = 'img/mail2.gif';
ib_scripts[2] = 'location.href = "index.html"';
　次にソース２を表示したい位置に増やし
　該当個所(５箇所)の数字を増やし、該当個所を変更してください。 
<a href="javascript:;" onMouseDown="button_down(2);return false;" onMouseOut="button_out(2);"
 onMouseOver="button_over(2);" onMouseUp="button_up(2);">
<img src="img/mail.gif" border="0" name="ib_button2"></a>
 
 
  

■ソース１(以下のソースを<head>〜</head>の間に書き込んでください)  
  
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
    //ver.1.0

ib_check  = 0;
ib_button   = new Array();
ib_buttons  = new Array();
ib_buttons2 = new Array();
ib_scripts  = new Array();


//設定
ib_button[1]  = 'img/botoru2.gif';         //1個目のボタンが押されている時の画像
ib_scripts[1] = 'alert("動作の一例です")'; //1個目のボタンを押した時の動作(JavaScript構文)
//ここまで


for(i in ib_button)
{ib_buttons[i]     = new Image();
 ib_buttons[i].src = ib_button[i];}


if(document.all || document.getElementById || document.layers)
{document.onmousemove = return_f;
 document.onmouseup   = check_off;}


function check_off()
{ib_check = 0;}


function return_f()
{if(ib_check)
 {return false;}}


function button_up(i)
{if(ib_check == i)
 {document.images["ib_button"+i].src=ib_buttons2[i];}
 eval(ib_scripts[i])
 ib_check = 0;}


function button_down(i)
{ib_check = i;
 if(!ib_buttons2[i])
 {ib_buttons2[i] = document.images["ib_button"+i].src;}
 document.images["ib_button"+i].src=ib_buttons[i].src;}


function button_over(i)
{if(ib_check == i)
 {document.images["ib_button"+i].src=ib_buttons[i].src;}}


function button_out(i)
{if(ib_check == i)
 {document.images["ib_button"+i].src=ib_buttons2[i];}}


// -->
</script>

■ソース２(以下のソースを<body>〜</body>の間に書き込んでください)  
  
<!--1個目の画像-->
<a href="javascript:;" onMouseDown="button_down(1);return false;" onMouseOut="button_out(1);"
 onMouseOver="button_over(1);" onMouseUp="button_up(1);">
<img src="img/botoru1.gif" border="0" name="ib_button1"></a>


■スクリプト無効時には動作しません。
　リンクとして使用する場合などは
　<noscript>を使ってリンクを張っておく事をお勧めします。

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