MouseOn で画像切替え (マウスON操作はスマホではクリックと区別できず異常動作となるから避けるべき。クリックがよい。)
JavaScript により、下のサムネイル(小画像)にマウスを重ねただけで切替ができる。
画像サイズと形状は全て同一である必要がある。
方法は下覧参照。
クリックによる切替の場合は通常のHtmlで可能です。
作成方法:まず、下部のサムネイル写真と、それぞれに相当する上部の大きな写真を用意する。
Script は比較的簡単である。 サムネイル写真を用意しなくても可 → こちら
・HomepageBuilder の場合:
- 最初に表示させる上部写真と、下部のサムネイルを、ページに配置する。
- 上部写真を選択し、右クリック →属性の変更 →その他 →「NAME」に適当な名前をつける。例、swap
- 下部のサムネイルを選択し、右クリック → イベントの設定 → 左窓でonMouseOver、右窓で「画像」をクリック → サブメニュー「画像の入替」を選択。
→ 登録。 パラメーター入力画面になる。
- ここで、NAME属性に 2.で名前をつけた、swap を選択 → 参照ボタ ンをクリック → サムネイルの拡大画像を選択→ OK。
- パネルで、onMouseOver が表示されたことを確認。
- 3.〜5.を枚数の数だけ繰返す。
・DreamWeaver の場合:
- 最初に表示させる上部写真と、下部のサムネイルを、ページに配置する。
- 上部写真を選択し、プロパティーで「イメージ」に適当な名前をつける。例、swap
- 下部のサムネイルを選択し、 ビヘイビア(この表示がない時はウィンドウにあり) → +▼ → スワップイメージを選択 → スワップイメージダイアログが開く。
- ここで、2.で名前をつけた、swap を選択 → 参照ボタ ンをクリック → サムネイルの拡大画像を選択 → OK。 スワップイメージダイアログで OK。
- ビヘイビアパネルに、onMouseOut、onMouseOver が表示されたことを確認。
- 3.〜5.を枚数の数だけ繰返す。
ネットでの例
ふしきの の引用
原典 切り抜き さらに切抜き 2段目リンクを別画像へ
画像サイズ変更して縦幅規制
1段リンク(縦幅規制)
各画像のサイズを同一にしないと見にくい。
QPON
原典
画像入替え QPON氏サイト 1. 2.
| 画像切替えいろいろ | JavaScript スライドショーサンプル | スライドショー 比較 | ホームページ作成体験へ |