Cafi Netつながる情報技術
  1. トップ>
  2. ホームページ作成>
  3. 拡大画像を表示

小さな画像から大きな画像を表示

小さな画像をクリックすると、見やすいように大きな画像が表示される設定を作成したいと思います。

商品の拡大写真などを見せたいときに便利かと思います。

ここでは JavaScript を使わない簡単な方法をご紹介します。

設定はホームページビルダー12で行います。

拡大画像を表示する方法

作成方法はいたってシンプルで、「小さな画像」と「大きな画像」を用意してリンクするだけです。

それでは、例として海の写真をクリックしたら拡大するように作成します。

ステップ1:小さな画像と大きな画像の両方を用意して、同じフォルダに保存します。

ステップ2:小さな画像を掲載したいページに追加します。(初めから掲載するページ内で、デジカメ写真を編集された場合はそのままで結構です)

ステップ3:小さな画像をクリックで選択・右クリック・リンクの設定をクリック・ファイルへを選択・参照から拡大画像を選択(HTMLファイルしか表示されていない場合は、ファイルの種類から全てのファイルを選択)・ターゲット(新しいウィンドウ)を選択・OKで設定を完了します。

以上の作業を行うと、次のように動作します。

ホームページビルダ-12「拡大画像を表示する方法」

画像にはクリックで拡大と文字を追加しましたが、もちろん追加しなくても動作します。

拡大表示することを記載しておくと、ユーザーにとって分かりやすいかと思います。

文字ではなく虫眼鏡のアイコンにすると、デザインが良くなるケースもあります。

拡大画像を表示する方法も様々ございますので、ご自身のホームページに合った方法を選択して頂けたらと思います。

ホームページビルダー12の使い方としてご参考になりましたら幸いです。