サンプル写真にさわると拡大画像が表示され、説明文がフォームに出力されます。NN3.0,IE4.0から使えます。
応用 :
説明文をオリジナルにするには、たとえば、document.forms[0].elements[0].value='牛久大仏初日'の'牛久大仏初日'の部分を取り替えます。formのsizeを大きくしたりtextaraなどにすれば長い文章もokです。画像も取り替えたり増やしたりして使ってみてください。
参照 : オブジェクトの有無を調べる if(document.images){命令}, new, Array(), Image(), function, 変数, src, document.images[], javascript, onMouseOver, forms[], elements[], value,
<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';
movimg[4] = new Image();movimg[4].src='HOKUSAI.GIF';
movimg[5] = new Image();movimg[5].src='HOZAKI.GIF';
movimg[6] = new Image();movimg[6].src='HONB.GIF';
movimg[7] = new Image();movimg[7].src='TEIEN.GIF';
}
//画像書き換え
function changimg1(imgNo){
if(document.images)document.images['img0'].src = movimg[imgNo].src
}
//-->
</script>
</head>
<body>
<img src="KAWARA.GIF" name="img0" width="108"><p>
<a href="javascript:function voi(){};voi()"
onMouseOver="changimg1(0);
document.f0.e0.value='牛久大仏初日'">
<img src="HATUHI.GIF" width="24" border="0"></a>
<a href="javascript:function voi(){};voi()"
onMouseOver="changimg1(1);
document.f0.e0.value='発遣門'">
<img src="HAKEN.GIF" width="24" border="0"></a>
<a href="javascript:function voi(){};voi()"
onMouseOver="changimg1(2);
document.f0.e0.value='牡丹の小径'">
<img src="BOTAN.GIF" width="24" border="0"></a>
<a href="javascript:function voi(){};voi()"
onMouseOver="changimg1(3);
document.f0.e0.value='著者事務所の庭石'">
<img src="ISHI.GIF" width="24" border="0"></a><br>
<a href="javascript:function voi(){};voi()"
onMouseOver="changimg1(4);
document.f0.e0.value='東京本願寺(北斎)'">
<img src="HOKUSAI.GIF" width="24" border="0"></a>
<a href="javascript:function voi(){};voi()"
onMouseOver="changimg1(5);
document.f0.e0.value='著者事務所前の花'">
<img src="HOZAKI.GIF" width="24" border="0"></a>
<a href="javascript:function voi(){};voi()"
onMouseOver="changimg1(6);
document.f0.e0.value='本廟'">
<img src="HONB.GIF" width="24" border="0"></a>
<a href="javascript:function voi(){};voi()"
onMouseOver="changimg1(7);
document.f0.e0.value='浄土庭園'">
<img src="TEIEN.GIF" width="24" border="0"></a>
<form name="f0"><input type="text" name="e0" size="18"></form>
</body>
</html>
詳しい説明はK01とK05を参照してくださいdocument.f0.e0.value f0という名前のformの中のe0という名前の構成要素(INPUT)の値(value)という意味。この場合document.forms[0].elements[0].valueやdocument.forms['f0'].elements['e0'].valueと書いても同じ意味です
使用している画像:
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)