画像置換

PhotoshopCC2018でJavaScriptでの書き出し

  • 「PhotoshopCC2018」→「Presents」→「Scripts」→「Export Layers to Files.jsx」を開いて以下のように修正します

f:id:web-0220:20180709223153p:plain

レイヤー名をファイル名として書き出し

f:id:web-0220:20180709223451p:plain

JavaScriptで画像置換

要素に直接記述(インライン)
  • マウスがのった画像が変わる場合「this」
  • 他の場所の画像が変わる場合「id名」

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

サムネールにマウスオーバーで画像置換
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>画像置換</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<div class="thumnail">
<img src="img/s01.jpg" alt="" onmouseover="swap.src='img/01.png'" onmouseout="swap.src='img/cover.png'"><img src="img/s02.png" alt="" onmouseover="swap.src='img/02.png'" onmouseout="swap.src='img/cover.png'"><img src="img/s03.png" alt="" onmouseover="swap.src='img/03.png'" onmouseout="swap.src='img/cover.png'"><img src="img/s04.png" alt=""onmouseover="swap.src='img/04.png'" onmouseout="swap.src='img/cover.png'"><img src="img/s05.png" alt="" onmouseover="swap.src='img/05.png'" onmouseout="swap.src='img/cover.png'">
</div>
<div class="mainImg"><img src="img/cover.png" alt="" id="swap"></div>
</div>
</body>
</html>
@charset "utf-8";

html, body {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
img {
  vertical-align: bottom;
}
.content {
  width: 570px;
  margin: 50px auto;
}
.thumnail {
  width: 540px;
  margin: 0 auto 20px;
}
.thumnail img {
  margin-right: 10px;
  cursor: pointer;
}
.thumnail img:last-of-type {
  margin-right: 0;
}
.mainImg{
  width: 540px;
  padding: 15px;
  box-shadow: 0 0 5px #AAA ;  /* 横のズレ 縦のズレ ぼかし幅 影の色 */
}

f:id:web-0220:20180709202004p:plain
  ※スクリーンショットは、幅600px、サムネールの空きを25pxにしてあります。

JavaScriptで画像置換

  • for文を使用する
<script>
var num = 5;
for (var i=1; i<=num; i++) {
   document.write('<img src="img/s0' + i + '.jpg">');
}
</script>


《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptで画像置換</title>
</head>
<body>
<p>
<script>
var num = 5; //イメージの数
for (var i=1; i <= num; i++) {
  document.write( '<img src="img/s0' + i + '.jpg"' + ' ' + 'alt="サムネール' + i + '"' );
  document.write( ' ' + 'onmouseover="swap.src=\'img/0'+ i +'.jpg\'"' );
  document.write( ' ' + 'onmouseout="swap.src=\'img/cover.png' +'\'' +'"');
  document.write( '>' );
}
</script>
</p>
<p><img src="img/cover.png" alt="ギャラリー表紙" id="swap"></p>
</body>
</html>

エスケープ処理

  • 「\」バックスラッシュを使いソースコードとして読まれてしまう「'」シングルクォートをそのまま文字列として読ませるための記述
広告を非表示にする

求職者支援訓練 フェリカテクニカルアカデミー