本文へスキップ

パソコンサポート

ポックルの部屋

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

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

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

サンプルはこちらです。


手順

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

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

    ▼XHTML用

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

★変更する所★

  1. 小さい画像のURL同じものが2ヵ所あります)(例:img/sumple180-s.jpg)(img/は保存しているフォルダーを示す)
  2. 画像のタイトル(例:花1)
  3. 大きい画像のURL(例:img/sumple180.jpg)(マウスを載せたときに大きくなる画像)
    の合計4か所です。環境に合わせて変更してください。
    2つ以上設置したいときは同じものをコピーして、変更する所を変えて使います。

w



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

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

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


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


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

広告バナー

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

さくらレンタルサーバー