本文へスキップ

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

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

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

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

サンプルはこちら。

手順

01.大きい画像

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

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

▼XHTML用

▼HTML用

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

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

★変更する所★

05. リンク先URL(例:http://pop212.net)(リンクを飛ばすURLです)
06. 大きい画像のURL(例:img/sumple178.jpg)(img/は保存しているフォルダーを示す。マウスを載せたときに大きくなる画像)
07. 1つ目の小さい画像のURL(例:img/sumple178-s.jpg)(マウスが離れたときに小さくなる画像)
08. 2つ目の小さい画像のURL(例:img/sumple178-s.jpg)(07.と同じものを入力)
09. リンク先のタイトル(例:ポポックルの部屋)

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

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

バナースペース

相田みつを氏の詩集