HTML
<body>
<div id="container">
<p><img src="img/ph01.jpg" width="600" height="400" alt="ph01" name="mainImg"></p>
<ul>
<li><a href="#"><img src="img/s01.jpg" alt="s01" onMouseOver="mainImg.src='img/ph01.jpg'"></a></li>
<li><a href="#"><img src="img/s02.jpg" alt="s02" onMouseOver="mainImg.src='img/ph02.jpg'"></a></li>
<li><a href="#"><img src="img/s03.jpg" alt="s03" onMouseOver="mainImg.src='img/ph03.jpg'"></a></li>
<li><a href="#"><img src="img/s04.jpg" alt="s04" onMouseOver="mainImg.src='img/ph04.jpg'"></a></li>
<li><a href="#"><img src="img/s05.jpg" alt="s05" onMouseOver="mainImg.src='img/ph05.jpg'"></a></li>
</ul>
</div>
</body>
- onMouseover="mainImg.src='img/ph01.jpg'" "''mainImg.alt='ph01'"
- 上記緑色の箇所、「alt」に関する記述をすると、表示されない。
- javascript、ではなくjquaryで解決すること、のようです。
- ダブルクオーテーションの中は、シングルクオーテーション。（赤字部分）
CSS
@charset "utf-8";
/* CSS Document */
html, body, li, ul, p, img, a{
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul, li{
list-style-type: none;
}
img{
vertical-align: bottom;
}
a{
text-decoration: none;
}
body{
background: #ffffff;
font-size: 16px;
color: #ffffff;
}
/*reset
-------------------------------*/
#container{
background: #ffffff;
width: 800px;
margin: 0 auto;
padding: 120px 0 0 0;
}
p{
text-align: center;
margin: 0 0 120px 0;
}
ul{
width: 680px;
margin: 0 auto;
overflow: hidden;
padding: 20px 0 0 0;
border-top: 1px solid #cccccc;
}
li{
width: 120px;
float: left;
margin-right: 20px;
}
li:nth-child(5){
margin-right: 0;
}
- ul をbody のセンターにレイアウトする、定番の方法を模索中。
