webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

MouseOver で 画像が入れ替わる 1

  • メイン画像の大きさでファイルを新規作成。今回は960px*640px。
  • 5枚の写真を別々のレイヤーに配置する。
  • 各々のレイヤーの名前を、ph01-ph05と割り当てる。
  • 一度この状態で保存。

f:id:ohta-felica:20160513213935j:plain

  • 「ファイル」「スクリプト」「レイヤーをファイルに書き出し」

f:id:ohta-felica:20160513214430j:plain

f:id:ohta-felica:20160513214559j:plain

  • 次にサムネイル用の画像を用意する。
  • 縦横の比率を維持したまま、幅を200pxにリサイズする。
  • 再び、「ファイル」「スクリプト」「レイヤーをファイルに書き出し」。
  • ファイル名を s01からs05とする。
  • すべてのファイルを、htmlと同じ階層に作った、imgフォルダに入れておく。

f:id:ohta-felica:20160513214933j:plain