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

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

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

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

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

   <p><a href="リンク先URL" onmouseover="myppt1.src='大きい画像のURL'" onmouseout="myppt1.src='小さい画像のURL'"><img src="小さい画像のURL" name="myppt1" border="0" title="リンク先のタイトル" /></a></p>
   
   
   ▼ＨＴＭＬ用
   

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

★変更する所★

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

w

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

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

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

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

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

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

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