Document

     画像の入替・拡大 実例集

順不動で色々実験してみました。作り方の詳細は、このページを 右クリック して
「ページのソースを表示」から確認して下さい。一部「Javascript」の知識が必要です

1.アップロードした全画像の再生確認です。「FTP」による画像の破損のチェックです
 画像の横並べの機能も入っています 2.下の画像をクリックしますと、元の大きな画像が別のページで開きます
 最上部に表示されているページ内容の案内で、切り替えて見る事も出来ます


3.マウスを乗せると画像が変わります


4.下側の小さな画像にマウスを乗せたり、クリックしますと、上側に大きく再生されます
5.文字を対象にした Javascript の起動チェックです。文字にマウスを乗せたりクリックしてみて下さい
 VSCode から接続するブラウザで確認の時に、onclick が動作しません
 例えば この文字で 確認出来ます

6.ボタンをクリックしますと、上の大きな画像が変わります
 装飾の出来ないボタン形式です

ボタン
7.右下に「メニュー」用のボタンを作ります
 背景と同色にしておきますと、五月蠅くありません
下側 ホーム 中間
8.下の画像をクリックしますと、元の大きな画像が同じページで開きます
 左上の「戻る」← で元のページに帰ります。複雑な「ポップアップ」より簡単に作れます


9.画像をクリックする都度、右に動きます(只それだけです。戻りません)