シンプルなJavascriptホバーギャラリーの基本構造[オープンソース][S][レスポンシブ対応]SHD_n050h

・　このページの説明: 　レスポンシブデザイン対応でシンプルなJavascriptホバーギャラリーの基本構造を解説しています。「アニメーション無し型」と「透かしアニメーション型」と「全スクロールアニメーション型」の3種類です。パソコンでは下部のサムネイルにマウスを重ねると画像が切り替わり、モバイルではサムネイルのタップで切り替わります。他のアニメーションや別のタイプのスライドショーやギャラリーは IMGスライドショー、またはホームページテンプレートをご覧ください。; 　掲載しているソースコードは、ホバーギャラリーだけを表示するホームページ全体のものです。ソースコードを「メモ帳」などのテキストエディタにコピーし、データ部分を自分のURLに書き換えて、文字コードを「UTF-8」に設定し、拡張子を「html」にして「名前を付けて保存」してください。; 　他のホームページに貼り付けて使うときは、掲載しているソースコードのスタイルシート部分を貼り付けるページのhead内に、ホバーギャラリーとスクリプトをbody内にコピーしてください。; 　このページは文字コード「UTF-8」で書いています。ソースコードの一部を他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　見本のホバーギャラリーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。有料版はありません。

⇔

</div>

</div>

</div>

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

</div>

</div>

</div>

"use strict";						//--strict（厳格）モード」で実行。

!function(o) {						//--ホバーギャラリー要素oを引数にした無名関数。

}(document.getElementById("my_gal11"));			//--id="my_gal11"の要素を引数にする。

・　透かしホバーギャラリー id="my_gal11": 　使用している「違和感がある風景」は生成AIのCopilotで作ったものです。

</div>

</div>

</div>

・　全スクロールホバーギャラリー id="my_gal12": 　使用している「二重惑星の世界」は生成AIのCopilotで作ったものです。

シンプルなJavascriptホバーギャラリーの基本構造[オープンソース][S][レスポンシブ対応]SHD_n050h_os