JavaScriptを使ってサムネールで画像置換

JavaScript 授業




☆★データーでの確認★☆

サムネールで画像置換


  • サムネイル画像とメイン画像は別々のサイズで準備をする


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソファーのあるインテリア</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
mig {
border: none;
}
#container {
width: 700px;
margin: 0 auto;
text-align: center;
}
h2 {
color: #82A76D;
font-size: 1.1em;
margin: 20px 0 15px 0;
}

/* メイン画像部分 */
p.main {
background-color: #FFF;
background-image: url();
background-repeat: no-repeat;
background-position: center center;
height: 510px;
width: 660px;
margin: 0px auto;
}
p.main img {
margin-top: 30px;
}
p.thumbnail {
margin: 0 0 0 5px;
}
p.thumbnail img {
margin: 0 5px 0 0;
}
-->
</style>
</head>
<body>
<!-- ▼#container -->
<div id="container">

<noscript>
<p>このWebページはJavaScriptを使用しています。<br>
お使いのブラウザがJavaScriptに未対応の場合や<br>
JavaScriptの設定が無効になっている場合には、<br>
正しく表示されないことがあります。</p>
</noscript>

<h2>ふとした日常</h2>
<p class="thumbnail">
<img src="img15/thumb2.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='img15/2.jpg'">
<img src="img15/thumb4.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='img15/4.jpg'">
<img src="img15/thumb3.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='img15/3.jpg'">
<img src="img15/thumb1.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='img15/1.jpg'">
<img src="img15/thumb5.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='img15/5.jpg'">
</p>
<p class="main"><img src="img15/dog.jpg" width="600" height="450" alt="" name="mainImg"></p>
</div>
<!-- ▲#container -->
</body>
</html>

ブラウザで表示【 Chrome 】


タイトル画像を準備（スタートのみの画像）