K18 触ると絵が替わるインタラクティブリンクボタン2

ボタンに触ると画像が替り、クリックするとリンク先を読み込みます。K10と違ってボタンの種類を変えられるようになってます。NN3.x,IE4.xから使えます(これ以外のブラウザでは普通のリンクボタンになります*IE3.01forMacは使えます)。

応用 :
画像やリンク先を取り替えてみましょう。
参照 : バージョンチェックif(navigator.appVersion.charAt(0)>=バージョン番号){命令}, function, document.images[index番号], window.location.href, eval(), javascript, onMouseOver, onMouseOut, onClick,

Sample

画像はありものを使ったので(^^;; 変ですがお許しください。










Source
ソース
(コピーしてお使いください) <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- /* まずボタン画像を "BTOF0.GIF"から"BTOF5.GIF"----触っていない時のボタン画像6枚 "BTON0.GIF"から"BTON5.GIF"----触った時のボタン画像6枚 "BTCL0.GIF"から"BTCL5.GIF"----click時のボタン画像6枚 の名前で計18枚(なるべく軽くね^^)用意してください。 */ //フラグ var ldflg=0; //ページのload完了したかどうか?onLoadで1にする。 var clickflg=10;//clickしたかどうか?clickした画像noが入る。 //バージョンチェック var nv=navigator.appVersion.charAt(0);//バージョン番号 var nMac=navigator.userAgent.indexOf("Mac");//Macでなければ-1を返す var nIE=navigator.userAgent.indexOf("MSIE");//IEでなければ-1を返す //画像事前読み込み(ここでは3パターン*6個のボタン用) if(nv>=3){ //NN2.xを分岐 var imgBTOF=new Array();//触っていない時のボタン画像用配列を用意 var imgBTON=new Array();//触った時のボタン画像用配列を用意 var imgBTCL=new Array();//click時のボタン画像用配列を用意 for (i=1;i<=6;i++){ //読み込み //ここは通常はi=0からですが //IE3.01Mac版にimages[0]画像へアクセスできないという //bugがあります。このbugに対処するため //ダミーでIMGを1枚置き("IMGNO0")、ボタンはi=1から始めています imgBTOF[i]=new Image();imgBTOF[i].src="BTOF"+(i)+".GIF" imgBTON[i]=new Image();imgBTON[i].src="BTON"+(i)+".GIF" imgBTCL[i]=new Image();imgBTCL[i].src="BTCL"+(i)+".GIF" } } //離れた時(触っていない時/onMouseOut)の処理 function BTOF(imgNo) { if(ldflg==1&&nv>=3){ //load完了するまで動作させない&&NN2.xを分岐 if(nv<=3&&nIE!=-1&&nMac==-1){}else{ //IE3.x以下でMac以外を除く if(clickflg!=imgNo) //imgClear();//離れたらボタンを戻したい時用 document.images["IMGNO"+imgNo].src=imgBTOF[imgNo].src; } } } //触った時/onMouseOver時の処理 function BTON(imgNo) { if(ldflg==1&&nv>=3){ //load完了するまで動作させない&&NN2.xを分岐 if(nv<=3&&nIE!=-1&&nMac==-1){}else{ //IE3.x以下でMac以外を除く if(clickflg!=imgNo) document.images["IMGNO"+imgNo].src=imgBTON[imgNo].src; } } } //click時の処理 function BTCL(imgNo) { if(ldflg==1&&nv>=3){ //load完了するまで動作させない&&NN2.xを分岐 if(nv<=3&&nIE!=-1&&nMac==-1){}else{ //IE3.x以下でMac以外を除く imgClear(); clickflg=imgNo; document.images["IMGNO"+imgNo].src=imgBTCL[imgNo].src; } } } //imgクリア(clickした以外のボタンを初期状態にもどします) function imgClear(){ if(nv>=3){ if(nv<=3&&nIE!=-1&&nMac==-1){}else{ //IE3.x以下でMac以外を除く for(j=1;j<=6;j++){ document.images[j].src=imgBTOF[j].src; } } } } <!----> </SCRIPT> </HEAD> <BODY BGCOLOR="#dddddd" onLoad="setTimeout('ldflg=1',2000)"> <!--この"IMGNO0"はIE3.01Mac版のbug対策用ダミー画像です--> <IMG SRC="BTOF1.GIF" NAME="IMGNO0" BORDER="0" WIDTH="1" HEIGHT="1"><BR> <CENTER> <!--ここからボタン--> <A HREF="LINKP1.HTM" TARGET="targ1" onMouseOver="BTON(1)" onMouseOut="BTOF(1)" onClick="BTCL(1)" ><IMG SRC="BTOF1.GIF" NAME="IMGNO1" BORDER="0" WIDTH="120" HEIGHT="32"></A><BR> <A HREF="LINKP2.HTM" TARGET="targ1" onMouseOver="BTON(2)" onMouseOut="BTOF(2)" onClick="BTCL(2)" ><IMG SRC="BTOF2.GIF" NAME="IMGNO2" BORDER="0" WIDTH="120" HEIGHT="32"></A><BR> <A HREF="LINKP3.HTM" TARGET="targ1" onMouseOver="BTON(3)" onMouseOut="BTOF(3)" onClick="BTCL(3)" ><IMG SRC="BTOF3.GIF" NAME="IMGNO3" BORDER="0" WIDTH="120" HEIGHT="32"></A><BR> <A HREF="LINKP4.HTM" TARGET="targ1" onMouseOver="BTON(4)" onMouseOut="BTOF(4)" onClick="BTCL(4)" ><IMG SRC="BTOF4.GIF" NAME="IMGNO4" BORDER="0" WIDTH="120" HEIGHT="32"></A><BR> <A HREF="LINKP5.HTM" TARGET="targ1" onMouseOver="BTON(5)" onMouseOut="BTOF(5)" onClick="BTCL(5)" ><IMG SRC="BTOF5.GIF" NAME="IMGNO5" BORDER="0" WIDTH="120" HEIGHT="32"></A><BR> <A HREF="LINKP6.HTM" TARGET="targ1" onMouseOver="BTON(6)" onMouseOut="BTOF(6)" onClick="BTCL(6)" ><IMG SRC="BTOF6.GIF" NAME="IMGNO6" BORDER="0" WIDTH="120" HEIGHT="32"></A><BR> <!--上の<A HREF=...(6)...</A>をコピーして(7)(8)(9)と増やしていくことでボタンを 増やせます。この場合、いっしょに上のリンク先の記述部分も増やしましょう。--> </CENTER> </BODY> </HTML>
使用した画像 :
BTOF0.GIF BTOF1.GIF BTOF2.GIF BTOF3.GIF BTOF4.GIF BTOF5.GIF
BTON0.GIF BTON1.GIF BTON2.GIF BTON3.GIF BTON4.GIF BTON5.GIF
BTCL0.GIF BTCL1.GIF BTCL2.GIF BTCL3.GIF BTCL4.GIF BTCL5.GIF

Contents
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)


Maintained by
tato@fureai.or.jp works1997 Toshirou Takahashi