K07+1 サンプル写真にさわったら拡大画像と説明文を表示する

サンプル写真にさわると拡大画像が表示され、説明文がフォームに出力される。NN3.0,IE4.0から使えます。K07と違って拡大画像を名前で指定しているので拡大画像の前に何枚画像を置いても画像index番号を調整する必要がありません。

応用 :
説明文をオリジナルにするには、たとえば、document.forms[0].elements[0].value='牛久大仏初日'の'牛久大仏初日'の部分を取り替えます。FORMのSIZEを大きくしたりtextaraなどにすれば長い文章もokです。画像も取り替えたり増やしたりして使ってみてください。
参照 : バージョンチェックif(navigator.appVersion.charAt(0)>=バージョン番号){命令}, new, Array(), Image(), function, 変数, src, document.images[], javascript, onMouseOver, forms[], elements[], value,

Sample





Source
ソース
(コピーしてお使いください) <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- //イメージの事前読み込み if(navigator.appVersion.charAt(0)>=3) { 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(imgNoB) { if(navigator.appVersion.charAt(0)>=3){ //K07からの変更箇所--images["KAKUDAI"] document.images["KAKUDAI"].src=movimg[imgNoB].src; }; }; <!----> </SCRIPT> </HEAD> <BODY> <BR> <CENTER> <IMG SRC="KAWARA.GIF" NAME="KAKUDAI" WIDTH="108"><P> <A HREF="javascript:function voi(){};voi()" onMouseOver="changImg1(0); document.forms[0].e0.value='牛久大仏初日'"> <IMG SRC="HATUHI.GIF" WIDTH="24" BORDER="0"></A> <A HREF="javascript:function voi(){};voi()" onMouseOver="changImg1(1); document.forms[0].e0.value='発遣門'"> <IMG SRC="HAKEN.GIF" WIDTH="24" BORDER="0"></A> <A HREF="javascript:function voi(){};voi()" onMouseOver="changImg1(2); document.forms[0].e0.value='牡丹の小径'"> <IMG SRC="BOTAN.GIF" WIDTH="24" BORDER="0"></A> <A HREF="javascript:function voi(){};voi()" onMouseOver="changImg1(3); document.forms[0].e0.value='著者事務所の庭石'"> <IMG SRC="ISHI.GIF" WIDTH="24" BORDER="0"></A><BR> <A HREF="javascript:function voi(){};voi()" onMouseOver="changImg1(4); document.forms[0].e0.value='東京本願寺(北斎)'"> <IMG SRC="HOKUSAI.GIF" WIDTH="24" BORDER="0"></A> <A HREF="javascript:function voi(){};voi()" onMouseOver="changImg1(5); document.forms[0].e0.value='著者事務所前の花'"> <IMG SRC="HOZAKI.GIF" WIDTH="24" BORDER="0"></A> <A HREF="javascript:function voi(){};voi()" onMouseOver="changImg1(6); document.forms[0].e0.value='本廟'"> <IMG SRC="HONB.GIF" WIDTH="24" BORDER="0"></A> <A HREF="javascript:function voi(){};voi()" onMouseOver="changImg1(7); document.forms[0].e0.value='浄土庭園'"> <IMG SRC="TEIEN.GIF" WIDTH="24" BORDER="0"></A><BR> <FORM><INPUT TYPE="text" NAME="e0" SIZE="15"></FORM> </CENTER> </BODY> </HTML>
詳しい説明はK01K05を参照してください。

document.images["KAKUDAI"].src=movimg[imgNoB].src;K06や7では拡大先の画像をimages[imgNoA]として可変にしていましたがここでは"KAKUDAI"という名前の画像に特定しています。これによって、ページ内に他の画像が何枚あっても拡大先は"KAKUDAI"の名前の付いた画像に限定されます。

document.forms[0].e0.valueページの中の最初のform(form[0])の中のe0という名前の構成要素(INPUT)の値(value)という意味。この場合document.forms[0].elements[0].valueでも同じ意味ですが、NN4.0b2現在、バグでelements[0]を読めないため直接名前(e0)で指定しています。このように、バージョンによるバグが今のところindexまわりに現われることが多いので少し不便でも名前で直接指定したほうが安全かもしれません。

使用している画像:
KAWARA.GIF HATUHI.GIF HAKEN.GIF BOTAN.GIF ISHI.GIF HOKUSAI.GIF HOZAKI.GIF HONB.GIF TEIEN.GIF


Contents
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)


Maintained by
tato@fureai.or.jp works1997 Toshirou Takahashi