java

web

リンクボタンが３種類あり、そろぞれ、クリックしたりマウスを乗せると画像が変わるjavaスクリプトです。
注）私はjavaスクリプトの文法は全く知りません。いきなり、参考になるurlからソースを落として改造しただけですので、間違っていたり動かないときは、指摘なり、正しい情報を教えてくださいませ。よろしくおねがいします。（＾＾）

<HEAD>

<script language="JavaScript">

<!-----

var ButtonImage=new Array();

for(i=1;i<4;i++){

ButtonImage[i]=new Image();

ButtonImage[i].src="midori"+i+".gif";

ButtonImage[i+3]=new Image();

ButtonImage[i+3].src="kiiro"+i+".gif";

ButtonImage[i+6]=new Image();

ButtonImage[i+6].src="aka"+i+".gif";

}

function SetImage1(flag,position){

document.images[position].src=ButtonImage[flag+position*3].src;

}

// -->

</script>

</HEAD>

<BODY>

<A HREF="**.html" onMouseOver="SetImage1(2,0)" onMouseOut="SetImage1(1,0)" onClick="SetImage1(3,0)">

<IMG SRC="midori1.gif" name="midori" WIDTH="80" HEIGHT="30" ALT="midori" BORDER="0"></A>

<BR>

<A HREF="**.html" onMouseOver="SetImage1(2,1)" onMouseOut="SetImage1(1,1)" onClick="SetImage1(3,1)">

<IMG SRC="kiiro1.gif" name="kiiro" WIDTH="80" HEIGHT="30" ALT="kiiro" BORDER="0"></A>

<BR>

<A HREF="**.html" onMouseOver="SetImage1(2,2)" onMouseOut="SetImage1(1,2)" onClick="SetImage1(3,2)">

<IMG SRC="aka1.gif" name="aka" WIDTH="80" HEIGHT="30" ALT="aka" BORDER="0"></A>

<BR>

</BODY>


こういうプログラムを見た場合、ベーシックとか、Ｃとか何かしらプログラミングをしたことのある人間は「大体こんな事なんだろう」とか「想像」するもんですが、想像できない人もいます。
そう言うときは素直に、「展開」してみましょう。
http://www13.plala.or.jp/ayamenobasho/me/java/cursor02.html
<HEAD>

<script language="JavaScript">

<!-----

var ButtonImage=new Array();

for(i=1;i<4;i++){

ButtonImage[i]=new Image();

ButtonImage[i].src="midori"+i+".gif";

}

function SetImage1(flag,position){

document.images[position].src=ButtonImage[flag].src;

}

// -->

</script>

</HEAD>

<BODY>

<A HREF="**.html" onMouseOver="SetImage1(2,0)" onMouseOut="SetImage1(1,0)" onClick="SetImage1(3,0)">

<IMG SRC="midori1.gif" name="midori" WIDTH="80" HEIGHT="30" ALT="midori" BORDER="0"></A>

</BODY>

単純化して、まずボタンを一つだけ変える場合。
３使える場合は、midoriに対してmidori1.gif、midori2.gif、midori3.gif、
同じくkiiroは、kiiro1.gif、kiiro2.gif、kiiro3.gif、
akaについても、aka1.gif、aka2.gif、aka3.gifを準備しますが、
一つだけの場合でmidoriについて変える場合です。
〜1.gifはマウスが触れていない場合の画像、〜2.gifはマウスが乗っている場合の画像、〜3.gifはマウスをそこでクリックしたときの画像を準備します。javaを走らせるhtmlファイルと同じフォルダに置いておくと（ファイル名が短くなるので）便利です。
それでは見てみましょう。
var ButtonImage=new Array();
たぶんこれは新しい配列の宣言のように見えます。
ｉ=1から３まで見ていきましょう。
１の時、
ButtonImage[1]=new Image();
ButtonImage[1].src="midori"+1+".gif";
ButtonImage[1]に”midori1.gif”を入れる。
２の時、
ButtonImage[2]に”midori2.gif”を入れる。
３の時、
ButtonImage[3]に”midori3.gif”を入れる。

これが、bodyでは。
<A HREF="**.html" onMouseOver="SetImage1(2,0)" onMouseOut="SetImage1(1,0)" onClick="SetImage1(3,0)">
　**.htmlへ飛ぶリンクですが、（javaだけでなくhtmlについても理解していないと、ここらへんはよけい難しいかもしれません。急がば回れで、分からなければ、まずはhtmlについて、勉強するといいでしょう。）
function SetImage1(flag,position){
document.images[position].src=ButtonImage[flag].src;
}
で、
onMouseOver="SetImage1(2,0)"
−＞　document.images[0].src=ButtonImage[2].src;
midori2.gif マウスが乗っている場合の画像
onMouseOut="SetImage1(1,0)"
−＞　document.images[0].src=ButtonImage[1].src;
midori1.gif マウスが触れていない場合の画像
onClick="SetImage1(3,0)"
　−＞　document.images[0].src=ButtonImage[3].src;
midori3.gif マウスをそこでクリックしたときの画像
となります。
一つずつ順を追っていけば、なんとなく分かる気がしませんか？

同じようにはじめの３つのボタンを使う場合も考えてみましょう。
これは、宿題でいいですね。（＾＾）
ちなみに
ButtonImage[flag+position*3]ですので、
position=0の場合、１，２，３が、position=1の場合、４，５，６が、position=2の場合、７、８，９が入ります。
もし次にposition=3を使うなら、１＋３＊３＝１０，２＋３＊３＝１１，３＋３＊３＝１２を入れることになります。
3でなくいきなりposition=10とか使っちゃって３１，３２，３３とやると、やっぱり何か問題があるんでしょうかね。（＾＾；