3月7日 授業内容(画像置換 要確認)

d.hatena.ne.jp


f:id:paris1204:20160307234821p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>JavaScriptによる画像置換</title>
</head>

<body>
<div class="imgbox">
<h1>おいしそうなケーキ</h1>

<div class="thumnail">
<img src="img/s1.jpg" alt=""><img src="img/s2.jpg" alt=""><img src="img/s3.jpg" alt=""><img src="img/s4.jpg" alt=""><img src="img/s5.jpg" alt=""><!--imgタグは改行することによって余計なマージンなどがつくのでインライン要素はデザインのために改行しない-->
</div>
<div class="mainImg"><img src="img/b1.jpg" alt="">
</div>

</div>

f:id:paris1204:20160307235157p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>JavaScriptによる画像置換(swap)</title>
</head>

<body>
<div class="imgbox">
<h1>おいしそうなケーキ</h1>

<div class="thumnail">
<img src="img/s1.jpg" alt=""
 onmouseover="swap.src='img/b1.jpg'" 
 onmouseout="swap.src='img/b1.jpg'"><img src="img/s2.jpg" alt=""
 onmouseover="swap.src='img/b2.jpg'"
 onmouseout="swap.src='img/b1.jpg'"><img src="img/s3.jpg" alt=""
 onmouseover="swap.src='img/b3.jpg'"
 onmouseout="swap.src='img/b1.jpg'"><img src="img/s4.jpg" alt=""
onmouseover="swap.src='img/b4.jpg'"
 onmouseout="swap.src='img/b1.jpg'" ><img src="img/s5.jpg" alt=""
 onmouseover="swap.src='img/b5.jpg'"
 onmouseout="swap.src='img/b1.jpg'"><!--imgタグは改行することによって余計なマージンなどがつくのでインライン要素はデザインのために改行しない-->
</div>
<div class="mainImg"><img src="img/b1.jpg" alt="" name="swap">
</div>

</div>



</body>
</html>

f:id:paris1204:20160308000538p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>JavaScriptによる画像置換(swap)</title>
</head>

<body>
<div class="imgbox">
<h1>おいしそうなケーキ</h1>

<div class="thumnail">
<img src="img/s1.jpg" alt=""
 onmouseover="swap.src='img/b1.jpg'" 
 onmouseout="swap.src='img/patisserie.png'"><img src="img/s2.jpg" alt=""
 onmouseover="swap.src='img/b2.jpg'"
 onmouseout="swap.src='img/patisserie.png'"><img src="img/s3.jpg" alt=""
 onmouseover="swap.src='img/b3.jpg'"
 onmouseout="swap.src='img/patisserie.png'"><img src="img/s4.jpg" alt=""
onmouseover="swap.src='img/b4.jpg'"
 onmouseout="swap.src='img/patisserie.png'" ><img src="img/s5.jpg" alt=""
 onmouseover="swap.src='img/b5.jpg'"
 onmouseout="swap.src='img/patisserie.png'"><!--imgタグは改行することによって余計なマージンなどがつくのでインライン要素はデザインのために改行しない-->
</div>
<div class="mainImg"><img src="img/b1.jpg" alt="" name="swap">
</div>

</div>



</body>
</html>

3つとも共通のCSSです。

@charset "utf-8";
/* CSS Document */

html, body, div, img {
  margin: 0;
  padding: 0;
}

h1{color:#6C6;
text-align:center;}


.imgbox {
  width: 600px;
  margin: 50px auto;
}
.thumnail {
  width: 600px;
  text-align: center;
}

.thumnail img {
  margin-right: 25px;
}
.thumnail img:last-child{margin-right:0;}
.mainImg {
  width: 600px;
  height: 600px;
  margin-top: 10px;
  padding-top: 15px;
 
  text-align: center;
}