0710-01 JavaScript: 画像置換はECサイトに使えるワザ
JavaScriptによる画像置換
onMouseOver=” this.src= ’img/***.jpg’ ”
onMouseOut=” this.src= ’img/***.jpg’ ”
- <script>タグ無しでHTMLに直接書き込むJavaScriptのタグ
- イベント属性の値に関数名を指定し、マウスが指定した要素に触った瞬間／離れた瞬間に関数が実行される
やってみよう
<!DOCTYPE html>
<html lang="ja">
<head>
<mata charset="UTF=8">
<title>javascript</title>
<style>
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
margin: 0;
padding: 0;
line-height: 1.0;
}
img {
border: 0;
vertical-align: bottom;
}
/* layout */
#imgBox{
margin: 20px auto;
width: 600px;
}
#thumnail{
margin-bottom: 20px;
height: 73px;
text-align: center;
}
#thumnail img{
margin-right: 10px;
}
#mainImage{
width: 600px;
height: 400px;
text-align: center;
}
</style>
</head>
<body>
<div id="imgBox">
<div id="thumnail">
<img src="img/s01.png" alt="#" onMouseOver="mainImage.src='img/01.png'" onMouseOut="mainImage.src='img/01.png'"> <img src="img/s02.png" alt="#" onMouseOver="mainImage.src='img/02.png'" onMouseOut="mainImage.src='img/02.png'"> <img src="img/s03.png" alt="#" onMouseOver="mainImage.src='img/03.png'" onMouseOut="mainImage.src='img/03.png'">
</div><!--/#thumnail-->
<div id="mainImage">
<img src="img/01.png" alt="#" name="mainImage">
</div><!--/#mainImage--></div><!--/#imgBox-->
</body>
</html>
- #thumnailのHTML部分はインライン要素のため、改行を入れずにimg指定した上でtext-align: center;の指定をする事でうまく中央寄せで配置できる
- #thumnail内のmainImage.srcの「mainImage」は、#mainImage内のname指定したmainImageと呼応している（上記で言うthis.srcの部分）
静止画では分かりにくいですがマウスオーバーで画像が変わります。
この技術使ってひとつ作りたいものあり。野望。近々実現します。
