文字にさわると画像が切り替わります。NN3.0,IE4.0から使えます。
応用 :
画像を取り替えたり増やしたりして使ってみてください。ここではhref="javascript:function voi(){};voi()"でクリックしてもわざとなにも起こらないようにしていますが もしhref="URL"にすればふつうのリンクと同じでクリックすると指定したページへ跳びます。ですから、画像を各ページのタイトルなどにしてみるのも面白いかもしれません。
参照 : オブジェクトの有無を調べる if(document.images){命令}, new, Array(), Image(), function, 変数, src, document.images[], javascript, onMouseOver,
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
//イメージの事前読み込み
if(document.images){
movimg=new Array()
movimg[0] = new Image() ; movimg[0].src = 'HATUHI.GIF';
movimg[1] = new Image() ; movimg[1].src = 'HAKEN.GIF';
movimg[2] = new Image() ; movimg[2].src = 'BOTAN.GIF';
movimg[3] = new Image() ; movimg[3].src = 'ISHI.GIF';
}
//アニメーション
function changImg1(imgName,imgNo){
if(document.images) document.images[imgName].src = movimg[imgNo].src
}
//-->
</script>
</head>
<body>
<img name="view" src="KAWARA.GIF"><p>
|<a href="javascript:function voi(){};voi()"
onMouseOver="changImg1('view',0)"> 大仏と初日 </a>
|<a href="javascript:function voi(){};voi()"
onMouseOver="changImg1('view',1)"> 発遣門 </a>
|<a href="javascript:function voi(){};voi()"
onMouseOver="changImg1('view',2)"> 牡丹の小径 </a>
|<a href="javascript:function voi(){};voi()"
onMouseOver="changImg1('view',3)"> 十方堂の庭石日 </a>|
</body>
</html>
詳しい説明はK01を参照してくださいa href="javascript:命令文"でもクリックしたら"命令文"を実行するという意味ですが
ここではfunction voi(){}という 中味のない voi()という関数を作って から、続くvoi()で「なにもしない」^^;を実行してます。もし、HREF="URL"とすれば普通のリンクになります。 NN3/IE4以上を対象ならA HREF="javascript:void(0)"でも同じ意味になりますonMouseOver="命令文"でマウスがさわったら"命令文"を実行するという意味です
使用している画像:
HATUHI.GIF
HAKEN.GIF
BOTAN.GIF
ISHI.GIF
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)