本文へスキップ

パソコン初心者さんを対象にしたホームページです。パソコンで悩んでいることがあった時の手助けになれれば幸いです。

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

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

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

サンプルはこちら。

手順

01.大きい画像

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

02. 下の「XHTML用」もしくは「HTML用」のどちらかの枠内をクリックし、コントロールキーを押したまま、Aキーを押して全選択します。

▼XHTML用

▼HTML用

03. 次にコントロールキーを押したまま、Cキーを押してコピーします。

04. 表示させたいホームページの位置にカーソルを置き、コントロールキーを押したまま、Vキーを押して貼り付けてください。

★変更する所★

05. 1つ目の小さい画像のURL(例:img/sumple180-s.jpg)(img/は保存しているフォルダーを示す)
06. 画像のタイトル(例:花1)
07. 大きい画像のURL(例:img/sumple180.jpg)(マウスを載せたときに大きくなる画像)
08. 2つ目の小さい画像のURL(例:img/sumple180-s.jpg)(マウスが離れたときに小さくなる画像=05.と同じもの)

の4か所です。環境に合わせて変更してください。

2つ以上設置したいときは同じものをコピーして、変更する所を変えて使います。

バナースペース

相田みつを氏の詩集