サムネイル2F■フェード同一画像スライド・コメ付    最終修正日 : 2016/09/13

■下に並んだサムネイル(小さな画像)をマウスオーバーすると拡大画像がフェードで変化します。

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

コメントもtitleも付いてないフェードのJavaScriptはこちら → サムネイル1F■フェード同一画像スライド

上記のJavaScriptを改造しました。
コメントの付いたフェード切替のサムネイルのスライドのJavaScriptです。
小さなサムネイル画像をマウスオーバーすると、フェードイン、フェードアウトで拡大画像が変化します。
このJavaScriptは、小さなサムネイル画像も拡大画像も、同じ画像をサイズ指定を変えて使用しているので、あまり重い画像には向きません。

原本はイヌでもわかるJavaScript講座から。 マウスアウトでも画像が消えないように改造しました。
画像は全部が同サイズの画像を使用して下さい。バラバラのサイズでは使用できません。
マウスオーバーからクリックへの変更はできません。

画像やコメントの配置用に「#waku」を指定してますが、この「#waku」はJavaScriptとは無関係なので、削除してもかまいません。
改造元のように、「#Mini」「#Bs」「#Me」を並べるだけでもいいし、「#waku」の代わりに「テーブル(table)」等を利用してもいいです。
即時関数のマウスオンの記述方法は、Qiitaを参考にしました。

フェードが付かず、マウスオーバーとクリックの選択可のJavaScriptはこちら → サムネイル2■同一画像スライドコメント付

■2016/09/13:指定によって位置配置がおかしくなることがあるので1行追加修正。