サムネイル１-１■同一画像スライドtitle付

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

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

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

上記のJavaScriptを改造しました。
titleの付いたサムネイルのスライドです。
titleとは、サムネイル画像にマウスオンした時に表示される、画像の説明文です。
説明のコメント用スペースが無くても、画像内容がわかります。

改造元と同じく、クリックか、マウスオーバーかは、JavaScriptのソースの中で選択して下さい。
そして同じく、小さなサムネイル画像も拡大画像も、同じ画像をサイズ指定を変えて使用しているので、あまり重い画像には向きません。
即時関数のマウスオンの記述方法は、Qiitaを参考にしました。

フェードが付いて、マウスオーバーのみのJavaScriptはこちら　→　サムネイル１-１Ｆ■フェード同一画像スライドtitle付

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サムネイル１-１■同一画像スライドtitle付</title>

<!--★コピーここから-->
<style type="text/css"><!--
body{background:#044;}/*★背景色濃緑色指定。不要なら削除*/
#Big{ margin-left:10%;height:400px; border:solid 3px #ff0;}/*★拡大画像の指定。サイズ違いなので画像縦幅のみ統一。横幅は同比率で自動指定になる*/
#Mini{ margin-left:10%;}/*★サムネイル全体領域の指定*/
#Mini img{ height:50px; margin-right:10px; border:solid 2px #fff;}/*★サムネイル1個の指定*/
#Mini img:hover{outline:solid 2px #ff0;}/*★サムネイル画像にマウスオン時の変化指定。見本は黄色の外枠線*/
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<p style="margin-left:10%;color:#fff;">並んだサムネイル（小さな画像）にマウスオーバーすると拡大画像が変化します。選択を「1」にして画像クリックにすることもできます。</p>

<!--★ここからコピー-->
<div id="Mini"></div><!--★サムネイル指定 id="Mini"は必須-->
<img src="on4.jpg" id="Big"><!--★拡大画像指定。一番最初の画像を記述。 id="Big"は必須-->

<script type="text/javascript"><!--
/*=====================================================================
同一画像サムネイル・スライドtitle付き　クリックかマウスオーバーの選択　★2016/08/31
即時関数のonclickの参考サイト：http://qiita.com/kyoshiro-obj/items/96890ffe973d3bec0547
=======================================================================*/
(function (){ var n=0,i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像とtitleの同時指定。増減可能。["画像","title"];　の２個をこの順番で記述。最後の ] の前には ,(カンマ) 無し
var ga=[];
ga[n++]=["on4.jpg","梅"];
ga[n++]=["on5.jpg","ひまわり"];
ga[n++]=["muka2.jpg","メジロと桜"];
ga[n++]=["on6.jpg","チューリップ"];
ga[n++]=["pan14.jpg","コスモス"];
ga[n++]=["pan15.jpg","コスモスの&#13;&#10;蜜を吸う蝶"];/*■titleの改行には「&#13;&#10;」を使用*/

var myurl="";   //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var mo=0;       //★画像変化がマウスオーバーなら 0  マウスクリックなら 1

//指定ここまで----------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var sss="";
for(i=0;i<n;i++){ sss +='<img src='+myurl+ga[i][0]+' title="'+ga[i][1]+'">';}
$("Mini").innerHTML=sss;
var b=$("Mini").getElementsByTagName("img");
function a(){
for (i=0; i<n; i++){
var fnc=function (){$("Big").src=this.src;}
if(mo===0){b[i].onmouseover=fnc;}else{b[i].onclick=fnc;}
}
}
a();
}());//即時関数終了
//--></script>
<!--★ここまでコピー。終わり-->

</body>
</html>

サムネイル１-１■同一画像スライドtitle付 UP日時 : 2016/08/31

　サムネイル１-１■同一画像スライドtitle付　　　　UP日時 : 2016/08/31