第11回ホームページ勉強会 　　 第57日目2023年02月09日 今回の勉強はマウスオーバーで図や写真を拡大する手法です 　図や写真にマウスを乗せるとその図や写真が拡大表示され、マウスを外すと元の表示に戻す設定の仕方です。 　例題は、岡山県高梁市の臥牛山にある山城･備中松山城への山行きで、これを改訂しました。ここをクリックしてサンプルをご覧下さい。 　事前準備：各自htmlで写真やイラストが5か所以上入ったページを作って下さい。 　　　　　　 後で拡大されることを考慮し、写真やイラストはやや小さめにしておきます。 １．htmlをＨＰビルダーで開く ２．下記をコピーし <style type="text/css"> <!-- .scaling { } .scaling img { -moz-transition: -moz-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; transition: transform 0.1s linear; } .scaling img:hover { -webkit-transform: scale(2.0); -moz-transform: scale(2.0); -o-transform: scale(2.0); -ms-transform: scale(2.0); transform: scale(2.0); }--> </style> ３．htmlソースで<title></title>の下に貼り付けます ４．ページ編集に切り替え図や写真をクリックし、HTMLソースに切り替えます ５． <img src="img/B564.png" width="301" height="246" border="0"> 　　の様にimgタグの背景が黄色で表示されてるはずですが、<img････>の直前に <div class="scaling"> 　　と記載し、<img････>の直後に </div> 　　と記載して閉じます ６．ブラウザで動作確認し、マウスオーバーで図や写真が拡大されれば完成です。 ７．青函トンネルと電気機関車についてもRev.Upしました。 　　 上記２．の<style type="text/css">から</style>はcssファイルとして独立させることもできます。 scale(2.0)は拡大倍率で、自由に変更できます   2023-01-30　資料作成：三宅　節雄