新-画像置換 - web-0127のブログ

画像の準備

Photoshopで、「幅600px 高さ400px」の新規ファイルを作成する
画像をレイヤーとして重ねる
レイヤー名を連番にしておく

レイヤーをファイルへ書き出し

「ファイル」メニュー →「スクリプト」→「レイヤーをファイルへ書き出し」
保存してから行わないと、トリミングしない前の大きな画像が書き出されます

_0000_を削除するには

アプリケーション > Adobe Photoshop CSn > Presets > Scripts > Export Layers To Files.jsx

以下のように書き換えます。（自己責任で！）

サムネール画像の書き出し

「イメージ」メニュー →「画像解像度」

表紙を作る

「幅600px 高さ400px」のメイン画像の上に新規レイヤー「cover」を作成する
「cover.png」

JavaScriptで画像置換

for文を使用する

<script>
var num = 5;
for (var i=1; i<=num; i++) {
   document.write('<img src="img/sph0' + 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/sph0' + i + '.jpg"' + ' ' + 'alt="サムネール' + i + '"' );
  document.write( ' ' + 'onmouseover="swap.src=\'img/ph0'+ i +'.jpg\'"' );
  document.write( ' ' + 'onmouseout="swap.src=\'img/cover.png' +'\'' +'"');
  document.write( '>' );
}
</script>
</p>
<p><img src="img/cover.png" alt="ギャラリー表紙" id="swap" name="swap"></p>
</body>
</html>

以下の記述はこのままのでは、間違いですが「文字列」として出力するための「' シングルクォート」を「『』」で置き換えてみました
エスケープ処理が必要な「' シングルクォート」は、そのままにしてあります
属性どおしが連続しないように「『半角スペース』」を入れてあります

document.write( 『<img src="img/sph0』 + i + 『.jpg"』 + 『半角スペース』 + 『alt="サムネール』 + i + 『"』 );
document.write( 『半角スペース』 + 『onmouseover="swap.src=\'img/ph0』+ i +『.jpg\'"』 );
document.write( 『半角スペース』 + 『onmouseout="swap.src=\'img/cover.png』 +『\'』 +『"』);
document.write( 『>』 );

エスケープ処理

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

CSSで修飾

DOMやjQueryでは可能ですが、JavaScriptで生成されたHTMLに対してCSS擬似クラスの「first-child」を設定することはできません
今回は「ネガティブマージン」を指定しています

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

《style.css》

p {
  margin: 0;
  padding: 0;
}
img {
  border: none;
  vertical-align: bottom;
}
#content {
  width: 630px;
  margin: 50px auto;
  text-align: center;
}
#thumbnail {
  margin-bottom: 20px;
}
#thumbnail p {
  margin-left: -25px;  /* 左側にずらすネガティブマージン */
}
#thumbnail p img {
  margin-left: 25px;
  cursor: pointer;
}
#mainImage {
  width: 600px;
  padding: 15px;
  box-shadow: 0 0 5px #AAA;  /* 横のズレ 縦のズレ ぼかし幅 影の色 */
}

ポイント

for文を使う
エスケイプ処理が必要
alt属性は、何かしらの文字（スペースも含む）が入っていないと正しく処理されない

複数の画像を使用することから「配列」を使うともう少し整理できますが、「new演算子」を使うオブジェクトの範囲に入ってから書き直しましょう。