パソコン初心者さんを対象にしたホームページです。

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

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

★サンプルはこちらです。

1. 小さい画像と大きい画像を用意します。
    ←小さい画像
   
    ←大きい画像
2. 下の「ＸＨＴＭＬ用」もしくは「ＨＴＭＬ用」のどちらかの枠内をクリックし、（コントロール）キーを押したまま、 キーを押して全選択します。
   
   
   ▼ＸＨＴＭＬ用
   

   <p><img src="小さい画像のURL" title="画像のタイトル" onmouseover="this.src='大きい画像のURL'" onmouseout="this.src='小さい画像のURL'" /></p>
   
   
   ▼ＨＴＭＬ用
   

   <p><img src="小さい画像のURL" title="画像のタイトル" onmouseover="this.src='大きい画像のURL'" onmouseout="this.src='小さい画像のURL'"></p>
3. 次に（コントロール）キーを押したまま、 キーを押してコピーします。
4. ご自分のホームページの表示させたい位置にカーソルを置き、（コントロール）キーを押したまま、 キーを押して貼り付けます。

★変更する所★

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

w

★画像拡大表示サンプル（複数表示）★

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

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

▼ＸＨＴＭＬ用サンプル ソース（複数表示）

※画像のURLを置き換えてください。

▼ＨＴＭＬ用サンプル ソース（複数表示）

※画像のURLを置き換えてください。