サムネイルにマウスをのせる

HTMLとCSSで作ったHTML部品

HOME こひつじの家 トップページ 情報トップ 情報・デジタルの部屋トップページ HTML部品 古い部屋 2000年ごろに作った"情報とコンピュータの部屋"
最終更新:2019-06-29 ▼ スタート:2019-06-29
 サムネイル見本用の小さい画像にマウスをのせると画像が大きくなり,マウスをのけると小さい画像に戻るパーツです。HTMLとCSSだけを使用しています。
概要
・サムネイルにマウスをのせると画像が大きくなり,マウスをのけるとサムネイルに戻ります。スマホ等の場合は,タップすると画像が大きくなり,画像以外をタップするとサムネイルに戻ります。
・サムネイル用の画像ファイルは使用しません。ここで使用した画像ファイルは,すべて長辺1200ピクセル,短辺800ピクセルです。サムネイルは長辺300ピクセル,大きい画像は長辺900ピクセルで表示させています。
長所と短所 (△:長所 ▽:短所)
△マウスをのせると拡大し,のけると元に戻るので,操作が楽です。
△大きい画像を表示したとき,それ以下のコンテンツが隠れません。
△サムネイル用の画像を準備する必要がありません。
△ CSSもHTMLも非常に簡単で,少ない量で記述できます。
▽マウスを横方向に動かして画像の上にのせたりのけたりすれば問題ありませんが,縦方向に動かすと,意図しない画像が大きくなることがあります。
▽サムネイルの上に,無意識にマウスをのせただけでも大きくなるので,煩わしく感じられることがあります。
▽ページ内の全画像が最初に読み込まれるので,ページの表示がやや遅くなったり,通信量が多くなる傾向があります。
サンプル
たくさんの機関車が留置されているJR稲沢駅
写真にはDD51形ディーゼル機関車と,EF64形電気機関車の姿が写っている。
竹原フェリーターミナル
広島県竹原市と瀬戸内海の大崎上島を結ぶ,竹原⇔白水・竹原⇔垂水などのフェリーが発着する。
竹原フェリーターミナル(広島県)
JR木更津駅前にある逆さ狸「きぬ太くん」
証城寺の狸囃子たぬきばやしの発祥の地である木更津は,街のあちらこちらにたぬきのオブジェがある。
JR木更津駅前にある逆さ狸「きぬ太くん」
使用したCSS
/* サムネイルの幅300px,大きい画像の幅900px 横長画像用 */
.mo300-900 {
   width:300px;   /* 画像の幅を300pxで表示 */
   cursor:grab;   /* マウスカーソルの形 任意 */
  }

.mo300-900:hover {   /* ":"の隣にスペースを入れてはだめ */
   width:900px;   /* マウスをのせると幅900pxで表示 */
  }

/* サムネイルの幅200px,大きい画像の幅600px 縦長画像用 */
.mo200-600 {
   width:200px;
   cursor:grab;
  }

.mo200-600:hover {
   width:900px;
  }
サンプルのHTML
たくさんの機関車が留置されているJR稲沢駅<br>
写真にはDD51形ディーゼル機関車と,EF64形電気機関車の姿が写っている。<br>
  <img class="mo300-900" src="photo01.jpg">
	<div style="height:25px;"></div> ← 間隔をあけるために入れました。


竹原フェリーターミナル<br>
広島県竹原市と瀬戸内海の大崎上島を結ぶ,竹原⇔白水・竹原⇔垂水などのフェリーが発着する。<br>
  <img class="mo300-900" src="photo02.jpg" alt="竹原フェリーターミナル(広島県)">
	<div style="height:25px;"></div>


JR木更津駅前にある逆さ狸「きぬ太くん」<br>
証城寺の<ruby>狸囃子<rt>たぬきばやし</rt></ruby>の発祥の地である木更津は,
街のあちらこちらにたぬきのオブジェがある。<br>
  <img class="mo200-600" src="photo03.jpg" alt="JR木更津駅前にある逆さ狸「きぬ太くん」">