マウスクリックで画像を変える |
Sample |
画像1 画像2 画像3 上の文字をクリックすると、絵が変わります |
ソース |
<html> <head> <title>Java-Script</title> <SCRIPT LANGUAGE="JavaScript"> <!-- if(navigator.appVersion.charAt(0)>=3){ swp_img=new Array() swp_img[0] = new Image();swp_img[0].src='chg_img1.jpg'; swp_img[1] = new Image();swp_img[1].src='chg_img2.jpg'; swp_img[2] = new Image();swp_img[2].src='chg_img3.JPG'; } function chng_img(img_a,img_b){ if(navigator.appVersion.charAt(0)>=3){ document.images[img_a].src=swp_img[img_b].src; } } //--> </SCRIPT> </head> <BODY bgcolor=white> <br> <IMG SRC="chg_img0.jpg"><br><br> <A HREF="javascript:chng_img(0,0)">画像1</A> <A HREF="javascript:chng_img(0,1)">画像2</A> <A HREF="javascript:chng_img(0,2)">画像3</A> <br> <font color=blue size=2>上の文字をクリックすると、絵が変わります</font><p> </BODY> </html> |
ワンポイント解説 |
<A HREF="javascript:chng_img(0,0) の、chng_img(0,0) とありますが、一つ目のパラメータの 0(ゼロ) は、ウインドウ内でその画像がウインドウの上から数えて最初であれば、0(ゼロ) になりますが、実際にこのウインドウでは、上から3個目の画像にあたるので、一つ目のパラメータは、2にしています。 |