本文へスキップ

パソコンサポート

ポックルの部屋

ホーム  > ホームページ小技関連メニュー  > CSSを使わずにできるマウスオンで画像拡大表示(リンク付き)

CSSを使わずにできるマウスオンで画像拡大表示(リンク付き)

マウスポインターを画像の上に置くと、リンク付きで画像が拡大します。

サンプルはこちらです。


手順

  1. 小さい画像と大きい画像を用意します。
    小さい画像 ←小さい画像

    01.大きい画像 ←大きい画像
  2. 下の「XHTML用」もしくは「HTML用」のどちらかの枠内をクリックし、(コントロール)キーを押したまま、 キーを押して全選択します。

    ▼XHTML用

    ▼HTML用
  3. 次に(コントロール)キーを押したまま、 キーを押してコピーします。
  4. ご自分のホームページの表示させたい位置にカーソルを置き、(コントロール)キーを押したまま、 キーを押して貼り付けます。

★変更する所★

  1. リンク先URL(例:http://pop212.net)(リンクを飛ばすURLです)
  2. 大きい画像のURL(例:img/sumple178.jpg)(img/は保存しているフォルダーを示す。マウスを載せたときに大きくなる画像)
  3. 小さい画像のURL同じものが2ヵ所あります。マウスが離れたときに小さくなる画像です)(例:img/sumple178-s.jpg)(img/は保存しているフォルダーを示す)
  4. リンク先のタイトル(例:ポポックルの部屋)
    の合計5か所です。環境に合わせて変更してください。

    2つ以上設置したいときは、myppt1(3ヵ所ある)の1の番号を、23などと変えます。(3ヵ所とも同じ番号にする)

w



★画像拡大表示サンプル(複数表示)★

 ← 画像の上にマウスポインターを置くと拡大します。

 ← 画像の上にマウスポインターを置くと拡大します。


▼XHTML用サンプル ソース(複数表示)


▼HTML用サンプル ソース(複数表示)

広告バナー

レンタルサーバー・ロリポップ

さくらレンタルサーバー