読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

画像置換

JavaScript

JavaScriptで画像置換

要素に直接記述(インライン)

onmouseover = " this.src = ' img/◎◎.jpg ' "
onmouseout = " this.src = ' img/◎◎.jpg ' "

サムネールで画像置換

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptによる画像置換</title>
<style>
html, body, div, img {
  margin: 0;
  padding: 0;
}
.imgBox {
  width: 600px;
  margin: 50px auto;
}
.thumnail {
  width: 610px;
  text-align: center;
}
.thumnail img {
  margin-right: 10px;
}
.mainImg {
  width: 600px;
  height: 600px;
  margin-top: 10px;
  padding-top: 15px;
  background: url(img/bg.jpg) no-repeat center -15px;
  text-align: center;
}
</style>
</head>
<body>
<div class="imgBox">
<div class="thumnail">
<img src="img/s01.jpg" alt=""><img src="img/s02.jpg" alt=""><img src="img/s03.jpg" alt=""><img src="img/s04.jpg" alt=""><img src="img/s05.jpg" alt="">
</div>
<div class="mainImg"><img src="img/01.jpg" alt=""></div>
</div>
</body>
</html>
画像置換を記述

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptによる画像置換</title>
<style>
html, body, div, img {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
.imgBox {
  width: 600px;
  margin: 50px auto;
}
.thumnail {
  width: 610px;
  text-align: center;
}
.thumnail img {
  margin-right: 10px;
}
.mainImg {
  width: 600px;
  height: 600px;
  margin-top: 10px;
  padding-top: 15px;
  background: url(img/bg.jpg) no-repeat center -15px;
  text-align: center;
}
</style>
</head>
<body>
<div class="imgBox">
<div class="thumnail">
<img src="img/s01.jpg" alt="" onmouseover="swap.src='img/01.jpg'" onmouseout="swap.src='img/01.jpg'"><img src="img/s02.jpg" alt="" onmouseover="swap.src='img/02.jpg'" onmouseout="swap.src='img/01.jpg'"><img src="img/s03.jpg" alt="" onmouseover="swap.src='img/03.jpg'" onmouseout="swap.src='img/01.jpg'"><img src="img/s04.jpg" alt="" onmouseover="swap.src='img/04.jpg'" onmouseout="swap.src='img/01.jpg'"><img src="img/s05.jpg" alt="" onmouseover="swap.src='img/05.jpg'" onmouseout="swap.src='img/01.jpg'">
</div>
<div class="mainImg"><img src="img/01.jpg" alt="" name="swap"></div>
</div>
</body>
</html>

メイン画像とサムネールを作る

Photoshopで新規ドキュメント作成
  • 「幅450、高さ300」の場合

  • 画像を「コピー&ペースト」

  • Web用に保存「01.jpg〜05.jpg」

  • 画像解像度「幅:100」に変更

  • Web用に保存「s01.jpg〜s05.jpg」

背景画像を作る

  • ドロップシャドウ
フレームを作成
  • 「幅450、高さ300」と同じサイズの新規ドキュメント作成
  • 上下左右に「10px」拡張

  • 新規レイヤーの選択範囲を「白」で塗りつぶす
  • 以下の例では「レイヤー2」
  • 「レイヤー1」は写真が入る範囲にあらかじめ色を塗っておきます

ドロップシャドウ用の枠を広げる
  • 以下の場合、上下左右「20px」拡張

  • 「レイヤー2」に効果を加える






広告を非表示にする