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

第74日目（22日目の宅学習の復習）　2023年9月28日

資料作成：三宅　節雄

今回の勉強会は皆さんのホームページに並べたサムネイル(小さい)写真にマウスを乗せると拡大表示する、PhotoChgの復習で、5グループを表示する設定です。

　今回改めての勉強になりますが、このサムネイル写真の拡大表示については、元々は『分解工房』のパソコンの『分解方法のマニュアル』で、これを見てサムネイル写真の拡大表示に応用しました。

　この勉強は第10回HP勉強会では2020年の1月早々に実施しました｡第11回HP勉強会では2021年8月に22日目の勉強会で計画しましたが、新型コロナの蔓延のため8月6日に西那須野公民館から、8月中の利用自粛要請があり自宅学習としました。

　5グループ(5段)表示にしていますが、増減もできます。

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

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

２．事前準備

　切替えて拡大表示したい写真を540×405ピクセルで5グループ分で更に2～5枚準備し､
　01-1.jpg～01-5.jpg､02-1.jpg～02-5.jpgの様な名前を付けて､5グループ分をPhotoChg1のimgという
　フォルダーの中に保存しておいて下さい｡

　サンプルは5グループで、各グループに5枚の写真を使用する設定で、合計25枚です。
　当日までに5グループ✕5枚が準備できない方は、3グループ✕5枚でも、5グループ✕(2～5枚)でもOKです。

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

　5グループの写真5枚用のアプリ本体、cssファイルおよびサンプル写真は下記からダウンロードします。
　(自宅学習された方は前回の物を使用しても構いませんが、今回は全体説明が変更されています。)

　PhotoChg1.zipはここからダウンロードして下さい。

　ダウンロードしたファイル｢PhotoChg.zip｣は圧縮されています。展開するにはファイル①PhotoChg.zipを
　クリックし、②展開タブから③全て展開をクリックします。
　

　デフォルトで展開すると圧縮ファイルと同じフォルダー内に『PhotoChg1』というフォルダーを作成し、その中に
　『img』という写真のフォルダー、『page.css』と『PhotoChg.html』というファイルが作成されます。

　展開されたフォルダー『PhotoChg1』は皆さんのホームページフォルダー『My-HP』の中にフォルダー毎入れて下さい。

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

　以下の手順で作業を進めます。
　１．PhotoChg1フォルダーの中のPhotoChg.htmlをホームページビルダーで開きます
　２．全体説明の内容は2行2列の表で作られておりページ編集で編集できますが、
　　　ページ編集の画面では、各グループの写真の内容の設定が一部表示されません。
　　　全体説明の内容を皆さんのデータ用に変更します。
　　

３．HTMLソースに切り替えると、下記に記載の様に、写真グループ毎にからの
　　　設定が表示されます。
　　　写真の名前をサンプルと同じ01-1.jpg～05-5.jpgにすれば見出しとコメント欄以外はそのまま使えます。
　　　下記ソースの黄緑文字と赤文字で示した部分だけ自分用に変える。(これが一番簡単です)
　４．グループを追加する場合には
　　　下記HTMLソースの
　　　function myChgPic6(myPicURL){
　　　document.images["myBigImage6"].src = myPicURL;}を追加しのグループを追加します
　５．上書き保存します

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
27
28
29
30
31
32

33
34
35

36
37
38
39

40
41
42

43
44
45
46
47
48
49
50
51
52
53
54
55

56
57

58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
102
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

<!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"></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="942" height="230">
<tbody>
<tr>
<td width="623"><h2> 私の思い出の山２</h2></td>
<td align="right" width="289"><a href="../index.html" target="_top"><img src="img/Back.jpg" width="92" height="23" border="0"></a> </td>
</tr>
<tr>
<td class="mt-pink pure-u-1 pure-u-md-4-5" valign="top" height="182" width="623">　20代の頃は神奈川に住んでおり、中央アルプスやライチョウを見たくて南アルプスの北岳～農鳥岳を縦走したり、富士山登山も実施しました。<br>
<br>
　その頃は山々へは右の時刻表に示す新宿23:55発の超有名なギューギュー詰めの夜行列車で行きました。<br>
<br>
　那須に移転後に会社の同僚と､約45年ぶりにトレッキングしました｡初めて登った山は男体山で､その後1人でもトレッキングに出かけ､初めて登った山は日光白根山です｡<br>
<br>
　以下は､南アルプスと近年に行った私のお気に入りの山とそこに咲く花の一例です｡</td>
<td align="left" class="mt-pink pure-u-1 pure-u-md-4-5" height="182" width="289">1975年3月改正ダイヤ<img src="img/時刻表2.jpg" width="294" height="221" border="0"></td>
</tr>
</tbody>
</table>
</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>25歳頃に、会社同僚と南アルプスの農鳥岳(3027m)、間ノ岳(3189m)、北岳(3192m)をライチョウを見たくて縦走しました。<br><br>
新宿発23:55の夜行列車から夜明け前のバスに乗り次ぎ、山小屋に2泊して帰ってきました。<br>
<br>左から<font color="#0000ff" SIZE="-1"><b>(写真が古い為､色が少しセピアになっています)</b></font><br><br>
①北岳(中央が頂上で山頂に人影が見える)<br>
②雷鳥(ライチョウ)<br>
③キタダケソウ<br>
④チシマギキョウ<br>
⑤ミネウスユキソウとタカネナデシコ</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>
<a href="javascript:void(0)" onmouseover="myChgPic1('img/01-5.jpg')"><img src="img/01-5.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>白根山は関東以北では最高峰(2578m)の山で、<br>
2009年9月の、シルバーウイーク
(秋の5連休)に行って以来、5回登りました。<br>
<br>
①日光白根山山頂<br>
②シラネアオイ<br>
③群生するカニコウモリ<br>
④ハクサンフウロ<br>
⑤キオン</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>元会社同僚と裏男体林道を通り、志津避難小屋付近から男体山(2484m)に登りました。<br><br>
8合目付近までは谷筋を通るために全く展望が利きませんが、そこを超えると景色は最高です。<br><br>
左から<br>
①男体山山頂の全貌<br>
②8合目付近のダイモンジソウ<br>
③山頂に咲くハンゴンソウ<br>
④アキノキリンソウ<br>
⑤戦場ヶ原のホザキシモツケ</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"><b>　　<ruby>至仏山<rp>(</rp><rp>)</rp></ruby></b></div>
<div class="maint maint-sm">
<p>尾瀬ヶ原から見ると西側には至仏山(2228m)が東側には燧ケ岳(2356m)が見えます。<br><br>
至仏山は蛇紋岩の山で花の百名山で、ウスユキソウ(エーデルワイス)を始め数多くの種類の花が咲いています。<br><br>
①至仏山山頂<br>
②シナノキンバイ(黄)とハクサンコザクラ(薄紫)<br>
③ハクサンイチゲ<br>
④ウスバヒナウスユキソウ<br>
⑤シナノキンバイ</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"><b>　　<ruby>帝釈山･田代山<rp>(</rp><rp>)</rp></ruby></b></div>
<div class="maint maint-sm">
<p>オサバグサが群生している帝釈山(2060m)と花の百名山の田代山(1971m)は大好きで4回行ってきました。<br><br>
田代山の山頂は全体がお花畑で、登山者を虜にしてしまいます。<br><br>
①田代山の手前の帝釈山山頂で奥に会津駒ケ岳<br>
②オサバグサ<br>
③イワカガミ<br>
④一面のワタスゲの果穂<br>
⑤ミヤマリンドウ</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"> <font SIZE="3">ページトップへ戻る</font></a></div>
</div></div>
</body>
</html>