サムネイル3■別画像スライド・コメ付    最終修正日 : 2016/09/06

三隻の帆船

右に並んだサムネイル(小さな画像)をクリックすると拡大画像が変化します。選択を「0」にして画像マウスオーバーにすることもできます。

●2016/08/27:即時関数で囲んで、グローバル変数を消しました。

拡大と縮小画像が同じ画像のJavaScriptはこちら → サムネイル2■同一画像スライド・コメ付

上記のJavaScriptを改造しました。
コメントの付いたサムネイルのスライドです。
改造元と同じく、クリックか、マウスオーバーかは、JavaScriptのソースの中で選択して下さい。
改造元と違うのは、小さなサムネイル画像と拡大画像が、別画像である点です。

画像というのは、元々大きな画像を縮小表示しても、画像の重さは縮小しません。元の画像と同じ重さです。
だからサムネイルのように大量に重い画像を並べて表示すると、PCの読み込み速度が遅くなります。
そのために、サムネイル用の小さな画像を別に作成する方が、PCに負担がかからないのです。

画像やコメントの配置用に「#waku」を指定してますが、この「#waku」はJavaScriptとは無関係なので、削除してもかまいません。
「#Mini」「#Big」「#Me」を並べるだけでもいいし、「#waku」の代わりに「テーブル(table)」等を利用してもいいです。
今回は「領域(ここでは#waku)を基準にして、画像やコメントを配置するAllAboutを参考にしました。

即時関数のonclickの記述方法は、Qiitaを参考にしました。

フェードが付いて、マウスオーバーのみのJavaScriptはこちら → サムネイル3F■フェード別画像スライドコメント付

■2016/08/28:a(b)をa()へ修正。
■2016/09/06:CSSの位置指定のミスを修正。