・　このページの説明

　このページは文字コード「UTF-8」で書いています。ソースコードの一部を他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

　既存のHTMLファイルに貼り付けて使う、レスポンシブデザイン対応でシンプルなJavascriptホバーギャラリーの基本構造を解説しています。「アニメーション無し型」と「透かしアニメーション型」と「全スクロールアニメーション型」の3種類です。 他のアニメーションや別のタイプのスライドショーやギャラリーは IMGスライドショー 、または ホームページテンプレート をご覧ください。

　画像をバナー（クリックすると設定したホームページが別タブに開く）にする時は、見本を参考にしてonclick属性を書き加えてください。 この時スタイル属性style="cursor:pointer;"も書き加えるとカーソルが手の形になります。

　掲載されているソースコードを目的のホームページのHTMLファイルのHEAD内とBODY内に貼り付け、データ部分を自分の画像に書き換えて使用してください。 このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。

　このホバーギャラリーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。

　このページでは、実際の地球の写真を加工したものや生成AIのGeminiで作った地球の画像と私が撮影した写真を合成したものを使っています。

⇔

<!---ここからmy_gal10のスタイルシート。↓---> <style type="text/css"> /** ホバーギャラリーの全体。レスポンシブ対応でwidth:100%;max-width:～px;に画像の最大表示サイズを書く。 **/ #my_gal10{ position:relative; top:0px; left:0px; width:100%; max-width:640px; margin:auto; } /** 画像部分。アスペクト比維持のため、padding-top:～%;に画像部分の（高さ／幅）を％で書く。 **/ #my_gal10 .base{ position:relative; top:0px; left:0px; padding-top:75%; } /** 画像部分の画像。 **/ #my_gal10 .base img{ position:absolute; top:0px; left:0px; z-index:1; width:100%; } /** サムネイル一覧。 **/ #my_gal10 .gallery{ position:relative; top:0px; left:0px; width:100%; margin:5px; text-align:center; } /** サムネイル。 **/ #my_gal10 .gallery img{ width:8%; cursor:pointer; } #my_gal10 .gallery img:hover{ opacity:0.5; } </style> <!-- ここまでスタイルシート。↑ --> <!---ここからmy_gal11のスタイルシート。↓---> <style type="text/css"> /** ホバーギャラリーの全体。レスポンシブ対応でwidth:100%;max-width:～px;に画像の最大表示サイズを書く。 **/ #my_gal11{ position:relative; top:0px; left:0px; width:100%; max-width:640px; margin:auto; } /** 画像部分。アスペクト比維持のため、padding-top:～%;に画像部分の（高さ／幅）を％で書く。 **/ #my_gal11 .base{ position:relative; top:0px; left:0px; padding-top:75%; } /** 画像部分の個々の画像。transition-duration:1s;はアニメーション速度。 **/ #my_gal11 .base img{ position:absolute; top:0px; left:0px; z-index:1; width:100%; opacity:0; transition-property:opacity; transition-duration:1s; } /** サムネイル一覧。 **/ #my_gal11 .gallery{ position:relative; top:0px; left:0px; width:100%; margin-top:5px; text-align:center; } /** サムネイル。 **/ #my_gal11 .gallery img{ width:8%; cursor:pointer; } #my_gal11 .gallery img:hover{ opacity:0.5; } </style> <!-- ここまでスタイルシート。↑ --> <!---ここからmy_gal12のスタイルシート。↓---> <style type="text/css"> /** ホバーギャラリーの全体。レスポンシブ対応でwidth:100%;max-width:～px;に画像の最大表示サイズを書く。 **/ #my_gal12{ position:relative; top:0px; left:0px; width:100%; max-width:640px; margin:auto; overflow:hidden; } /** 画像部分。transition-duration:1s;はアニメーション速度。 **/ #my_gal12 .base{ position:relative; top:0px; left:0px; white-space:nowrap; transition-property:left; transition-duration:1s; } /** 画像部分の個々の画像。 **/ #my_gal12 .base img{ position:relative; top:0px; left:0px; width:100%; } /** サムネイル一覧。 **/ #my_gal12 .gallery{ position:relative; top:0px; left:0px; width:100%; text-align:center; } /** サムネイル。 **/ #my_gal12 .gallery img{ width:8%; cursor:pointer; } #my_gal12 .gallery img:hover{ opacity:0.5; } </style> <!-- ここまでスタイルシート。↑ --> <!-- ここからアニメーション無しホバーギャラリーmy_gal10。↓ --> <div id="my_gal10"> <!-- ここから画像部分。↓ --> <div class="base"> <!-- ここからデータ。↓ --> <!-- title属性にオンマウスで表示されるツールチップ。不要ならば削除。 --> <!-- バナーにするデータはonclick="window.open('～.html');"を書き加える。～.htmlは開くページのURL。 --> <img src="../img47/40.jpg" title="クリックでページが開きます。" style="cursor:pointer;" onclick="window.open('../img102/40.html');" /> <img src="../img47/41.jpg" title="空に地球がある風景 No.41" /> <img src="../img47/42.jpg" title="空に地球がある風景 No.42" /> <img src="../img47/43.jpg" title="空に地球がある風景 No.43" /> <img src="../img47/44.jpg" title="クリックでページが開きます。" style="cursor:pointer;" onclick="window.open('../img47/44.html');" /> <img src="../img47/45.jpg" title="空に地球がある風景 No.45" /> <img src="../img47/46.jpg" title="空に地球がある風景 No.46" /> <img src="../img47/47.jpg" title="空に地球がある風景 No.47" /> <img src="../img47/48.jpg" title="クリックでページが開きます。" style="cursor:pointer;" onclick="window.open('../img47/48.html');" /> <img src="../img47/49.jpg" title="空に地球がある風景 No.49" /> <!-- ここまでデータ。↑ --> </div> <!-- ここまで画像部分。↑ --> <!-- ここからホバーギャラリー。↓ --> <div class="gallery"> <!-- ここからサムネイル。↓ --> <!-- 画像部分の画像と同じ順番に。画像部分の画像を流用してもよい。 --> <img src="../img47/40s.jpg" /> <img src="../img47/41s.jpg" /> <img src="../img47/42s.jpg" /> <img src="../img47/43s.jpg" /> <img src="../img47/44s.jpg" /> <img src="../img47/45s.jpg" /> <img src="../img47/46s.jpg" /> <img src="../img47/47s.jpg" /> <img src="../img47/48s.jpg" /> <img src="../img47/49s.jpg" /> <!-- ここまでサムネイル。↑ --> </div> <!-- ここまでホバーギャラリー。↑ --> </div> <!-- ここまでアニメーション無しホバーギャラリーmy_gal10。↑ --> <!-- ここからアニメーション無し用スクリプト。↓ --> <script type="text/javascript"> "use strict"; //--strict（厳格）モードで実行。 ((o) => { //--ホバーギャラリー要素oを引数にした無名関数。 const syasin = o.querySelectorAll(".base img"), //--画像部分のIMG要素のリスト。 thumb = o.querySelectorAll(".gallery img"), //--サムネイルのリスト。 goukei = syasin.length, //--画像の枚数合計。 ido = sel => { //--引数の画像を表示する関数。 stack = idx; //--現在のインデックスをスタックに入れる。 idx = sel; //--インデックスに引数を入れる。 syasin[idx].style.zIndex = 2; //--新しい画像を前面に。 syasin[stack].style.zIndex = 1; //--古い画像を後面に。 }; let idx = 0, //--インデックスを宣言し初期値0を代入。 stack; //--スタックを宣言。 for(let t=0; t < goukei; t++){ thumb[t].ind = t; //--サムネイルにindプロパティーを作りインデックスを入れる。 thumb[t].onmouseover = () => { if(thumb[t].ind != idx)ido(thumb[t].ind); } //--サムネイルをホバー（タップ）したときの処理。 //--indプロパティーがidxと等しくなければ数値化して引数にしido関数を呼び出す。 }; syasin[idx].style.zIndex = 2; //--最初の画像を前面に。 })(document.getElementById("my_gal10")); //--id="my_gal10"の要素を引数にする。 //-- All Rights Reserved. (C) Miyake_kobo. -- </script> <!-- ここまでアニメーション無し用スクリプト。↑ -->

・　アニメーション無しホバーギャラリー id="my_gal10"

・　アニメーション無しホバーギャラリーのHEAD内のソース

　HEAD内に以下をコピーしてください。

・　アニメーション無しホバーギャラリーのBODY内のソース

　ギャラリーを貼り付ける場所に以下をコピーしてください。

<!-- ここから透かしホバーギャラリーmy_gal11。↓ --> <div id="my_gal11"> <!-- ここから画像部分。↓ --> <div class="base"> <!-- ここからデータ。↓ --> <!-- title属性にオンマウスで表示されるツールチップ。不要ならば削除。 --> <!-- バナーにするデータはonclick="window.open('～.html');"を書き加える。～.htmlは開くページのURL。 --> <img src="../img47/20.jpg" title="空に地球がある風景 No.20" /> <img src="../img47/21.jpg" title="クリックでページが開きます。" style="cursor:pointer;" onclick="window.open('../img47/21.html');" /> <img src="../img47/22.jpg" title="空に地球がある風景 No.22" /> <img src="../img47/23.jpg" title="空に地球がある風景 No.23" /> <img src="../img47/24.jpg" title="クリックでページが開きます。" style="cursor:pointer;" onclick="window.open('../img47/24.html');" /> <img src="../img47/25.jpg" title="空に地球がある風景 No.25" /> <img src="../img47/26.jpg" title="空に地球がある風景 No.26" /> <img src="../img47/27.jpg" title="クリックでページが開きます。" style="cursor:pointer;" onclick="window.open('../img47/27.html');" /> <img src="../img47/28.jpg" title="空に地球がある風景 No.28" /> <img src="../img47/29.jpg" title="空に地球がある風景 No.29" /> <!-- ここまでデータ。↑ --> </div> <!-- ここまで画像部分。↑ --> <!-- ここからホバーギャラリー。↓ --> <div class="gallery"> <!-- ここからサムネイル。↓ --> <!-- 画像部分の画像と同じ順番に。画像部分の画像を流用してもよい。 --> <img src="../img47/20s.jpg" /> <img src="../img47/21s.jpg" /> <img src="../img47/22s.jpg" /> <img src="../img47/23s.jpg" /> <img src="../img47/24s.jpg" /> <img src="../img47/25s.jpg" /> <img src="../img47/26s.jpg" /> <img src="../img47/27s.jpg" /> <img src="../img47/28s.jpg" /> <img src="../img47/29s.jpg" /> <!-- ここまでサムネイル。↑ --> </div> <!-- ここまでホバーギャラリー。↑ --> </div> <!-- ここまで透かしホバーギャラリーmy_gal11。↑ --> <!-- ここから透かし用スクリプト。↓ --> <script type="text/javascript"> "use strict"; //--strict（厳格）モード」で実行。 ((o) => { //--ホバーギャラリー要素oを引数にした無名関数。 const syasin = o.querySelectorAll(".base img"), //--画像部分のIMG要素のリスト。 thumb = o.querySelectorAll(".gallery img"), //--サムネイルのリスト。 goukei = syasin.length, //--画像の枚数合計。 ido = sel => { //--引数の画像を表示する関数。 stack = idx; //--現在のインデックスをスタックに入れる。 idx = sel; //--インデックスに引数を入れる。 syasin[idx].style.zIndex = 2; //--新しい画像を前面に。 syasin[stack].style.zIndex = 1; //--古い画像を後面に。 syasin[idx].style.opacity = 1; //--新しい画像を不透明に。 syasin[stack].style.opacity = 0; //--古い画像を透明に。 }; let idx = 0, //--インデックスを宣言し初期値0を代入。 stack; //--スタックを宣言。 for(let t=0; t < goukei; t++){ thumb[t].ind = t; //--サムネイルにindプロパティーを作りインデックスを入れる。 thumb[t].onmouseover = () => { if(thumb[t].ind != idx)ido(thumb[t].ind); } //--サムネイルをホバー（タップ）したときの処理。 //--indプロパティーがidxと等しくなければ数値化して引数にしido関数を呼び出す。 }; syasin[idx].style.zIndex = 2; //--最初の画像を前面に。 syasin[idx].style.opacity = 1; //--最初の画像を不透明に。 })(document.getElementById("my_gal11")); //--id="my_gal11"の要素を引数にする。 //-- All Rights Reserved. (C) Miyake_kobo. -- </script> <!-- ここまで透かし用スクリプト。↑ -->

・　透かしホバーギャラリー id="my_gal11"

・　透かしホバーギャラリーのHEAD内のソース

　HEAD内に以下をコピーしてください。

・　透かしホバーギャラリーのBODY内のソース

　ギャラリーを貼り付ける場所に以下をコピーしてください。

<!-- ここから全スクロールホバーギャラリーmy_gal12。↓ --> <div id="my_gal12"> <!-- ここから画像部分。↓ --> <div class="base"> <!-- ここからデータ。↓ --> <!-- title属性にオンマウスで表示されるツールチップ。不要ならば削除。 --> <!-- バナーにするデータはonclick="window.open('～.html');"を書き加える。～.htmlは開くページのURL。 --> <img src="../img47/30.jpg" title="空に地球がある風景 No.30" /> <img src="../img47/31.jpg" title="空に地球がある風景 No.31" /> <img src="../img47/32.jpg" title="クリックでページが開きます。" style="cursor:pointer;" onclick="window.open('../img47/32.html');" /> <img src="../img47/33.jpg" title="空に地球がある風景 No.33" /> <img src="../img47/34.jpg" title="空に地球がある風景 No.34" /> <img src="../img47/35.jpg" title="空に地球がある風景 No.35" /> <img src="../img47/36.jpg" title="クリックでページが開きます。" style="cursor:pointer;" onclick="window.open('../img47/36.html');" /> <img src="../img47/37.jpg" title="空に地球がある風景 No.37" /> <img src="../img47/38.jpg" title="空に地球がある風景 No.38" /> <img src="../img47/39.jpg" title="クリックでページが開きます。" style="cursor:pointer;" onclick="window.open('../img47/39.html');" /> <!-- ここまでデータ。↑ --> </div> <!-- ここまで画像部分。↑ --> <!-- ここからホバーギャラリー。↓ --> <div class="gallery"> <!-- ここからサムネイル。↓ --> <!-- 画像部分の画像と同じ順番に。画像部分の画像を流用してもよい。 --> <img src="../img47/30s.jpg" /> <img src="../img47/31s.jpg" /> <img src="../img47/32s.jpg" /> <img src="../img47/33s.jpg" /> <img src="../img47/34s.jpg" /> <img src="../img47/35s.jpg" /> <img src="../img47/36s.jpg" /> <img src="../img47/37s.jpg" /> <img src="../img47/38s.jpg" /> <img src="../img47/39s.jpg" /> <!-- ここまでサムネイル。↑ --> </div> <!-- ここまでホバーギャラリー。↑ --> </div> <!-- ここまで全スクロールホバーギャラリーmy_gal11。↑ --> <!-- ここから全スクロール用スクリプト。↓ --> <script type="text/javascript"> "use strict"; //--strict（厳格）モード」で実行。 ((o) => { //--ホバーギャラリー要素oを引数にした無名関数。 const base = o.querySelector(".base"), //--画像部分。画像を入れたクラス名baseのdiv要素。 syasin = base.querySelectorAll("img"), //--画像部分のIMG要素のリスト。 thumb = o.querySelectorAll(".gallery img"), //--サムネイルのリスト。 goukei = syasin.length, //--画像の枚数合計。 ido = sel => { //--引数の画像を表示する関数。 stack = idx; //--現在のインデックスをスタックに入れる。 idx = sel; //--インデックスに引数を入れる。 base.style.left = -syasin[idx].offsetLeft / o.offsetWidth * 100 + "%"; //--画像の相対left位置（%単位）だけbaseを左に移動する。 }; let idx = 0, //--インデックスを宣言し初期値0を代入。 stack; //--スタックを宣言。 for(let t=0; t < goukei; t++){ thumb[t].ind = t; //--サムネイルにindプロパティーを作りインデックスを入れる。 thumb[t].onmouseover = () => { if(thumb[t].ind != idx)ido(thumb[t].ind); } //--サムネイルをホバー（タップ）したときの処理。 //--indプロパティーがidxと等しくなければ数値化して引数にしido関数を呼び出す。 } })(document.getElementById("my_gal12")); //--id="my_gal12"の要素を引数にする。 //-- All Rights Reserved. (C) Miyake_kobo. -- </script> <!-- ここまで全スクロール用スクリプト。↑ -->

・　全スクロールホバーギャラリー id="my_gal12"

・　全スクロールホバーギャラリーのHEAD内のソース

　HEAD内に以下をコピーしてください。

・　全スクロールホバーギャラリーのBODY内のソース

　スライドショーを貼り付ける場所に以下をコピーしてください。

All Rights Reserved. Copyright (C) 2002- Miyake_kobo.