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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

新-画像置換

画像の準備

  • 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演算子」を使うオブジェクトの範囲に入ってから書き直しましょう。