サンプル写真にさわると拡大画像が表示されます。NN3.0,IE4.0から使えます。
応用 :
画像を取り替えたり増やしたりして使ってみてください。もし、説明文を付けたいならK07をご覧ください。
参照 : オブジェクトの有無を調べる 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';
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)">
<img src="HATUHI.GIF" width="24" border="0"></a>
<a href="javascript:function voi(){};voi()"
onMouseOver="changImg1(1)">
<img src="HAKEN.GIF" width="24" border="0"></a>
<a href="javascript:function voi(){};voi()"
onMouseOver="changImg1(2)">
<img src="BOTAN.GIF" width="24" border="0"></a>
<a href="javascript:function voi(){};voi()"
onMouseOver="changImg1(3)">
<img src="ISHI.GIF" width="24" border="0"></a><br>
<a href="javascript:function voi(){};voi()"
onMouseOver="changImg1(4)">
<img src="HOKUSAI.GIF" width="24" border="0"></a>
<a href="javascript:function voi(){};voi()"
onMouseOver="changImg1(5)">
<img src="HOZAKI.GIF" width="24" border="0"></a>
<a href="javascript:function voi(){};voi()"
onMouseOver="changImg1(6)">
<img src="HONB.GIF" width="24" border="0"></a>
<a href="javascript:function voi(){};voi()"
onMouseOver="changImg1(7)">
<img src="TEIEN.GIF" width="24" border="0"></a><br>
</body>
</html>
詳しい説明はK01とK05を参照してください
使用している画像:
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)