第10回ホームページ勉強会

36日目　2020年 1月30日実施
講師 ： 三宅　節雄


 今回の勉強会は皆さんのホームページのサムネイル写真をオンマウスで拡大表示する、PhotoChgで、数段にわたって表示したいというご要望が有り、再度の勉強となります。

　目　　　次
１．事前準備
２．圧縮ファイルのダウンロード
３．写真切替アプリの使い方
４．作成事例
５．別の作成事例


１．事前準備

　切替えて拡大表示したい写真を540×405ピクセル(サイズを変えました)で数段分で更に３～5枚準備し、01-1.jpg～01-5.jpg、02-1.jpg～02-5.jpgの様な名前を付けて、数段分をPhotoChgのimgというフォルダーの中に保保存しておいて下さい。


２．圧縮ファイルのダウンロード

　5段用のアプリ本体は下記からダウンロードし、cssファイルは前回の物を使用しますが、cssフォルダーからpage.cssだけを取り出して、プログラム本体と同じ場所に置いて下さい。また、cssフォルダーは削除して下さい。

　PhotoChg5はここからダウンロードし、ダウンロード後にいつもの様に展開して下さい。


３．写真切替アプリの使い方

　 以下の手順で作業を進めます。
　１．PhotoChg5.htmlをホームページビルダーで開きます
　２．HTMLソースに切り替えます
　３．下記に記載の様に、1段ごとに<!-- 内容01 -->から<!-- 内容05 -->の設定が表示されます。
　４．ページ編集画面では、内容の設定がまったく反映されていませんから、HTMLソースで入力して下さい。
　5．下記に表示する
　　　function myChgPic1(myPicURL){document.images["myBigImage1"].src = myPicURL;}
　　　は表示する段数を表示し、必要に応じて行そのものを段数分に追加･削減します。
　6．格段の内容に対する、見出しとコメントを記載します。
　　　コメント、詳細説明を皆さんの写真用に記載して下さい
　７．各項目の
　　　　<img src="img/01-1.jpg" name="myBigImage1"></div>
　　　に写真名と段数名を記載します。
　８．拡大表示写真を、各段毎に記載します。
　　　　<a href="javascript:void(0)" onmouseover="myChgPic1('img/01-1.jpg')"><img src="img/01-1.jpg"></a>
　９．上書き保存します
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2">
<link rel="stylesheet" href="page.css" type="text/css">
<title>Title</title>
<meta name="description" content="">
<script language="JavaScript"><!--
function myChgPic1(myPicURL){document.images["myBigImage1"].src = myPicURL;}
function myChgPic2(myPicURL){document.images["myBigImage2"].src = myPicURL;}
function myChgPic3(myPicURL){document.images["myBigImage3"].src = myPicURL;}
function myChgPic4(myPicURL){document.images["myBigImage4"].src = myPicURL;}
function myChgPic5(myPicURL){document.images["myBigImage5"].src = myPicURL;}
// --></script>

</head>
<body>
<div class="main">
<div class="main-title pure-g">
<div class="mt-white pure-u-1 pure-u-md-4-5">
<table width="844">
<tbody>
<tr>
<td width="210"><h2>大見出し</h2></td>
<td align="right" width="624"><a href="../main.html" target="_self"><img src="img/Back.jpg" width="92" height="23" border="0"></a></td>
</tr>
</tbody>
</table>
</div>
<div class="mt-pink pure-u-1 pure-u-md-4-5">冒頭の説明</div>
</div>
<hr>

<!-- 内容１ -->
<div class="mainbox mainbox-sm">
<div class="mainpic mainpic-sm">
<img src="img/01-1.jpg" name="myBigImage1"></div>
<div class="maintitle maintitle-sm">
<p>項目①</p></div>
<div class="maint maint-sm">
<p>項目①の説明</p></div>
<div class="mainminipic mainminipic-sm">
<a href="javascript:void(0)" onmouseover="myChgPic1('img/01-1.jpg')"><img src="img/01-1.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic1('img/01-2.jpg')"><img src="img/01-2.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic1('img/01-3.jpg')"><img src="img/01-3.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic1('img/01-4.jpg')"><img src="img/01-4.jpg"></a>
</div></div>

<!-- 内容２ -->
<div class="mainbox mainbox-sm">
<div class="mainpic mainpic-sm">
<img src="img/02-1.jpg" name="myBigImage2"></div>
<div class="maintitle maintitle-sm">
<p>項目②</p></div>
<div class="maint maint-sm">
<p>項目②の説明</p></div>
<div class="mainminipic mainminipic-sm">
<a href="javascript:void(0)" onmouseover="myChgPic2('img/02-1.jpg')"><img src="img/02-1.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic2('img/02-2.jpg')"><img src="img/02-2.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic2('img/02-3.jpg')"><img src="img/02-3.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic2('img/02-4.jpg')"><img src="img/02-4.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic2('img/02-5.jpg')"><img src="img/02-5.jpg"></a>
</div></div>

<!-- 内容３ -->
<div class="mainbox mainbox-sm">
<div class="mainpic mainpic-sm">
<img src="img/03-1.jpg" name="myBigImage3"></div>
<div class="maintitle maintitle-sm">
<p>項目③</p></div>
<div class="maint maint-sm">
<p>項目③の説明</p></div>
<div class="mainminipic mainminipic-sm">
<a href="javascript:void(0)" onmouseover="myChgPic3('img/03-1.jpg')"><img src="img/03-1.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic3('img/03-2.jpg')"><img src="img/03-2.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic3('img/03-3.jpg')"><img src="img/03-3.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic3('img/03-4.jpg')"><img src="img/03-4.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic3('img/03-5.jpg')"><img src="img/03-5.jpg"></a>
</div></div>

<!-- 内容４ -->
<div class="mainbox mainbox-sm">
<div class="mainpic mainpic-sm">
<img src="img/04-1.jpg" name="myBigImage4"></div>
<div class="maintitle maintitle-sm">
<p>項目④</p></div>
<div class="maint maint-sm">
<p>項目④の説明</p></div>
<div class="mainminipic mainminipic-sm">
<a href="javascript:void(0)" onmouseover="myChgPic4('img/04-1.jpg')"><img src="img/04-1.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic4('img/04-2.jpg')"><img src="img/04-2.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic4('img/04-3.jpg')"><img src="img/04-3.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic4('img/04-4.jpg')"><img src="img/04-4.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic4('img/04-5.jpg')"><img src="img/04-5.jpg"></a>
</div></div>

<!-- 内容５ -->
<div class="mainbox mainbox-sm">
<div class="mainpic mainpic-sm">
<img src="img/05-1.jpg" name="myBigImage5"></div>
<div class="maintitle maintitle-sm">
<p>項目⑤</p></div>
<div class="maint maint-sm">
<p>項目⑤の説明</p></div>
<div class="mainminipic mainminipic-sm">
<a href="javascript:void(0)" onmouseover="myChgPic5('img/05-1.jpg')"><img src="img/05-1.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic5('img/05-2.jpg')"><img src="img/05-2.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic5('img/05-3.jpg')"><img src="img/05-3.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic5('img/05-4.jpg')"><img src="img/05-4.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic5('img/05-5.jpg')"><img src="img/05-5.jpg"></a>
</div></div>

<!-- ページ移動 上 -->
<div class="pagebt pure-g">
<div class="pline pure-u-1">
<hr>
<a href="#top">&nbsp;<font SIZE="3">ページトップへ戻る</font></a></div>
</div></div>
</body>
</html>



５．作成事例
　　作成事例はここをクリックします。

 
６．別の作成事例

　　別のアプリ
資料作成 ： 三宅