webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

課題:06-08

  • 問08
  • ul,liのリセットを忘れて時間をかける。
  • 途中から構造を変えるときは要注意。
  • サムネイルは、メイン画像へのリンクだと考える。
  • リンク→href属性、と連想する。
  • サムネイルにはhref属性を付けなければならない。
  • サムネイルは、なににリンクするのか?それは、メイン画像のsrcにリンクする。
  • メイン画像が切り替わる→メイン画像の「img」のsrc属性が変わると考える。
  • 総合すると、メイン画像のsrc属性が、サムネイルのhref属性に変わる、ということになる。
  • $('#mainImg>img').attr('src', 'AAA');
  • AAA=$(this).attr('href')

script

<script>
$(function(){
$('li.small').on('click', function(){
$('#mainImg>img').attr('src', $(this).attr('href'));
});
});
</script> 

 

 html

<body>
<div id="container">
<div id="mainImg"><img src="img/Q08_1.jpg"></div><!--mainImg-->
<ul class="thumbnail">
<li href="img/Q08_1.jpg" class="small"><img src="img/Q08_s1.jpg"></li>
<li href="img/Q08_2.jpg" class="small"><img src="img/Q08_s2.jpg"></li>
<li href="img/Q08_3.jpg" class="small"><img src="img/Q08_s3.jpg"></li>
<li href="img/Q08_4.jpg" class="small"><img src="img/Q08_s4.jpg"></li>
<li href="img/Q08_5.jpg" class="small"><img src="img/Q08_s5.jpg"></li>
<li href="img/Q08_6.jpg" class="small"><img src="img/Q08_s6.jpg"></li>
</ul>
</div><!--container-->
</body>

 css

@charset "utf-8";
/* CSS Document */
html, body, img, ul, li{
margin: 0;
padding: 0;
line-height: 1.0;
}
ul, li{
list-style-type: none;
}
img{
vertical-align: bottom;
}
/*-----------------------------------------------------------------
reset*/
#container{
width: 800px;
margin: 100px auto;
}
#mainImg{
margin-bottom: 16px;
}
.thumbnail{
overflow: hidden;
width: 800px;
}
li.small{
width: 120px;
float: left;
cursor: pointer;
margin-left: 16px;
}
.thumbnail li:first-child{
margin-left: 0;

f:id:ohta-felica:20160605135338p:plain