ボタンに触ると画像が替り、クリックするとリンク先を読み込みます。NN3.0,IE4.0から使えます(これ以前のブラウザでは普通のリンクボタンになります)。
じっそう 応用 :
画像やリンク先を取り替えてみましょう。
参照 : オブジェクトの有無を調べる if(document.images){命令}, function, document.images[index番号], window.location.href, eval(), javascript, onMouseOver, onMouseOut, onClick, go(),
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
//この3枚の画像を取り替えれば自分専用のボタンが作れます(^^)/
Img0="SHEET0.GIF" //離れた時の画像
Img1="SHEET1.GIF" //触った時の画像
Img2="SHEET2.GIF" //クリックした時の画像
//画像をクリックした時(onClickした時)の作業。
function BTN1Click(imgName,url){
if(document.images) {
document.images[imgName].src = Img2 //画像の書き換え
}
window.location.href = url //ページを読み込む
}
//マウスが触った時(onMouseOverの時)の作業。
function BTN1Over(imgName){
if(document.images) document.images[imgName].src=Img1
}
//マウスが離れた時(onMouseOutした時)の作業。
function BTN1Out(imgName){
if(document.images) document.images[imgName].src=Img0
}
//-->
</script>
</head>
</body>
<center>
<a
HREF="javascript:BTN1Click('img0','LINKP0.HTM')"
onMouseOver="BTN1Over('img0')"
onMouseOut="BTN1Out('img0')"
><img name="img0"
src="SHEET0.GIF" border=0></a><a
HREF="javascript:BTN1Click('img1','LINKP1.HTM')"
onMouseOver="BTN1Over('img1')"
onMouseOut="BTN1Out('img1')"
><img name="img1"
src="SHEET0.GIF" border=0></a><a
HREF="javascript:BTN1Click('img2','LINKP2.HTM')"
onMouseOver="BTN1Over('img2')"
onMouseOut="BTN1Out('img2')"
><img name="img2"
src="SHEET0.GIF" border=0></a><a
HREF="javascript:BTN1Click('img3','LINKP3.HTM')"
onMouseOver="BTN1Over('img3')"
onMouseOut="BTN1Out('img3')"
><img name="img3"
src="SHEET0.GIF" border=0></a><a
HREF="javascript:BTN1Click('img4','LINKP4.HTM')"
onMouseOver="BTN1Over('img4')"
onMouseOut="BTN1Out('img4')"
><img name="img4"
src="SHEET0.GIF" border=0></a>
</center>
</body>
</html>
たとえば、document.images[imgName].src=Img2でページ内のimgNameと言う名前の画像をImg2つまり、SHEET2.GIFの画像に描き換えますwindow.location.href=URLでURLを読み込みます
使用した画像 :
SHEET1.GIF
SHEET2.GIF
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)