画像の表示のサンプル例
Webページでは、画像の利用が欠かせません。代表的なのは写真、イラスト、ロゴなどがあります。
画像ファイルは <img> タグで、外部ファイルを読み込んで利用します。
(例)として<img src="img/photo1.jpg" alt="">
基本的な写真の表示
1.テーブルを利用しての写真の表示
写真はただ表示するだけでは、見る人にとって必ずしも写真が表現している内容を理解してもらうことは出来ません。 このため写真と合わせてその説明を掲載する必要があります。そこで、テーブル設定を利用して、 写真とその説明文を掲載します。
平成23年10月16日に開催された緑区民まつり 「緑と森のフェスティバル 2011」に参加したMICSの会員の方々です。 | 緑区民まつりに参加したMICSの「大和なでしこ」の方々です。非常に明るく、元気でPCにも詳しいモダンなご婦人方です。 | 緑区民まつりではMICSは大抽選会を開催し、Tシャツ、絵はがき、名刺作り(無償提供)を実施、500名の方々が行列を作りました。 |
2.スライドショーによる写真の表示
3.その他の写真やイラストの表現
小さな写真をクリックして大きな写真を表示する関数を利用
JavaScriptを使った表示例、小さくした画像をクリックすると拡大表示できます。
予め、640X480pxに加工したサイズの画像を準備して、小さく表示:96x63のサイズで一覧で表示します。
マウスでクリックすると拡大された写真が切り替わります。
上記の写真を名前で拡大写真を表示する方式です。上記は、写真の変更が容易です。
画像のロールオーバー
マウスを重ねると別の写真に変わります。マウスが外れると元の写真に戻ります。
ツールをたかって写真をスライドショーに変換する方式
Windows Liveムビーメーカーを使用しての写真をスライドショーへの変換
パワーポイントを使用しての写真をスライドショーを作成し動画への変換
画像を同様に切り替える:メニューイメージ
但し、メニューのリンク先は設定していません