|    40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  |

縦横比が同じでない複数の写真をロールオーバー効果で拡大表示させる

縦横比が同じない画像でロールオーバー効果を挿入する方法について紹介します

写真の準備

以下のように、いろんな場面で撮り貯めたオリジナル写真1から4があり、それぞれ縦横比が一定でない写真がある場合のケースです。

写真1 写真2 写真3 写真4
写真1(640 X 480) 写真2(480 X 640) 写真3(640 X 425) 写真4(387 X 640)

 全ての写真の高さを360ピクセルにしたサイズ変更を行う。

写真1 写真2
写真1(480 X 360) 写真2(270 X 360)
写真3 写真4
写真3(542 X 360) 写真4(217 X 360)

 高さをそろえたときに、最大の幅となる写真の幅をメモします。

ページトップへ

ホームページビルダーを起動し写真を表示するページを作成する

 ホームページビルダーを起動し、「スタート」 > 「ページを作成する」 > 「白紙ページ」 > 「標準モード」 > 「OK」で、白紙ページが表示されます。

ページトップへ

表を挿入

表の挿入ダイアログ 白紙ページに表を挿入します。:4行2列にし、「最初の行を見出しセルにする」のチェックを外します。

 表の近くでクリックし、表を選択します。表をページの真ん中に移します。

 表を選択した状態で右クリックし、「属性の変更」を選択します。

表の属性ダイアログ 「表の列」のタブを開きます。「列1」を選択します。「セルの幅」に136ピクセルを設定します。

表の属性ダイアログ 同じく「列2」を選択します。「水平位置揃え」を「左揃え」に、「セルの幅」を542に設定します。

挿入された表 以下のような表が表示されます。

列が統合された表 列2のセルを統合します。

ページトップへ

写真を挿入

写真1が挿入された表 表の列1に写真1を挿入します。写真は高さ360ピクセルでサイズ調整を行った写真を使います。このあと、サムネイル用のサイズに変更します。

写真1のサムネイルが挿入された表 写真1のサムネイルができあがりです。

写真2から4までのサムネイルが挿入された表 同じように写真2~4のサムネイルも追加します。

列2に大きな写真を挿入した表 列2には写真1(高さ360ピクセルに調整した写真)を挿入します。

表のソースからwidth指定を削除する 挿入した写真1を選択した状態で、「ページ/ソース」タブをクリックします。

 写真1の記述が黄色の蛍光ペンでマークされています。そこでは写真の幅 (width) と高さ (height) が記述されていますが、「width="480"」の部分を削除します。

 「ページ編集」に戻ります。

ページトップへ

ロールオーバー効果で拡大写真を表示するようにする

ロールオーバー効果のウィザード 写真1のサムネイルを選択した状態で、「挿入」から「ロールオーバー効果」を選択します。「画像のロールオーバー効果ウィザード(通常時の画像の指定)」が表示されます。「次へ」をクリックします。

ロールオーバー効果で、マウスポイントが上に来た時の画像を選定 「(マウスポインタが上にきたときの画像の指定)」で「効果の選択」から、「ボタン化」を選びます。「次へ」をクリックします。

 リンクの設定をしないので「次へ」をクリックします。

ロールオーバー効果で、他の場所の画像の交換を設定 「(他の場所の画像の交換)」で、「追加」をクリックします。

他の場所の効果で、場所の指定を選択 列2にある拡大写真を交換することになるので、それに相当する画像を左側から選択します。選択された画像は右側の「ページのプレビュー」では反転されて表示されますので、正しく画像を選択しているかどうかを確認します。

他の場所の効果で、効果を指定 「(効果の指定)」画面で、入れ替わった時に表示される画像を指定します。この場合は写真1(高さ360にサイズ調整したもの)を使います。

 「画像のロールオーバー効果ウィザード」の画面に戻るので、「完了」をクリックします。

 写真2~4についても同じようにロールオーバー効果を設定します。

 プレビューで動作を確認します。

 ブラウザにて動作を確認します。

ページトップへ

|    40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  |