Thumbnailで画像置換

javascript

段取り

  • レイアウトのイメージ
  • 画像枚数、画像サイズを決める
  • メイン画像とサムネイル画像を用意する／phoshop使用
  • メイン画像の枠をつくる（今回は画像で）
  • HTMLコーディング
  • JavaScriptコーディング
  • CSSコーディング

１．レイアウトイメージ

f:id:fujiwarashinichi:20140315164730g:plain

２．画像５枚、メイン５４０px＊４００px／サムネイル１００px＊（同比率での縮小値）

３．割愛

４．ドロップシャドウの分多めに周囲の幅を３０px 取る

f:id:fujiwarashinichi:20140315173617g:plain

 

５．HTMLコーディング

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="ｕtf-8">
    <title>
      <span data-unlink="">javascript</span>の練習
    </title>
    <link rel="stylesheet" href="ｃss/style1.ｃss">
  </head>
  <body>
    <noscript>
      <p>ＪavaScriptをOFFにしていると正常に表示できません</p>。
    </noscript>
    <div id="container">
      <h1>心に通ずる道は胃を通る</h1>
      <div class="thumbnail">
        <p>
          <img src="img/01-2.jpg" alt="">
          <img src="img/02-2.jpg" alt="">
          <img src="img/03-2.jpg" alt="">
          <img src="img/04-2.jpg" alt="">
          <img src="img/05-2.jpg" alt="">
        </p>
      </div>
      <!--/.thumbnail-->
      <div class="frame">
        <p>
          <img src="img/01.jpg" alt="" name="mainImage">
        </p>
        <!--/.frame-->
      </div>
      <!--/#container-->
    </div>
  </body>
</html>

６．JavaScriptコーディング

name属性を間違えないように注意！

>>過去記事

 
<img src="img/01-2.jpg" alt="" >
<img src="img/02-2.jpg" alt="" onMouseOver="mainImage.src='img/02.jpg'" onMouseOut="mainImage.src='img/01.jpg'">
<img src="img/03-2.jpg" alt="" onMouseOver="mainImage.src='img/03.jpg'" onMouseOut="mainImage.src='img/01.jpg'">
<img src="img/04-2.jpg" alt="" onMouseOver="mainImage.src='img/04.jpg'" onMouseOut="mainImage.src='img/01.jpg'">
<img src="img/05-2.jpg" alt="" onMouseOver="mainImage.src='img/05.jpg'" onMouseOut="mainImage.src='img/01.jpg'">

<img src="img/01.jpg" alt="" name="mainImage">

７．CSSコーディング

@charset "ｕtf-8";
/* reset
====================*/
html,body,div,h1,img{
  margin:0;
  padding:0;
  line-height:1.0;
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
}
img{
  border:none;
  vertical-align:bottom;
}

/* layout
=====================*/
#container{
  margin:30px auto;
  width:690px
}
h1{
  text-align:center;
  color:#007F55;
  font-size:24px;
}
.thumbnail{
  width:600px;
  text-align:center;
  margin:0 auto;
}
.thumbnail img{
  margin-right:5px;
}
.frame{
  margin:0 auto;
  width:600px;
  height:460px;
  background:url(../img/frame.jpg) no-repeat;
}
.frame img{
  margin:30px 0px 0px 30px;
}

>>画像にリンクあり

 

f:id:fujiwarashinichi:20140315213528p:plain