2014-11-14

2014-11-14

画像置換Add Star

 

 

マンガで分かる JavaScriptプログラミング講座

http://crocro.com/write/manga_javascript/wiki.cgi?p=%BD%F1%A4%A4%A4%C6%A4%DF%A4%E8%A4%A6



JavaScriptで画像置換


要素に直接記述(インライン)

 

 

onmouseover = " this.src = ' img/◎◎.jpg ' "

onmouseout = " this.src = ' img/◎◎.jpg ' "

 

 


f:id:web-0818:20140925225941p:image f:id:web-0818:20140925225943p:image


サムネールで画像置換

 

f:id:web-css-design:20111108231538j:image

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>JavaScriptによる画像置換</title>
<style>
html, body, div, img {
  margin: 0;
  padding: 0;
}
.imgBox {
  width: 600px;
  margin: 50px auto;
}
.thumnail {
  width: 610px;
  text-align: center;
}
.thumnail img {
  margin-right: 10px;
}
.mainImg {
  width: 600px;
  height: 600px;
  margin-top: 10px;
  padding-top: 15px;
  background: url(img/bg.jpg) no-repeat center -15px;
  text-align: center;
}
</style>
</head>
<body>
<divclass="imgBox">
<divclass="thumnail">
<imgsrc="img/thum01.png"alt=""><imgsrc="img/thum02.png"alt=""><imgsrc="img/thum03.png"alt=""><imgsrc="img/thum04.png"alt=""><imgsrc="img/thum05.png"alt="">
</div>
<divclass="mainImg"><imgsrc="img/main01.png"alt=""></div>
</div>
</body>
</html>

画像置換を記述

 

f:id:web-0127:20140315150510j:image

 


<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>JavaScriptによる画像置換</title>
<style>
html, body, div, img {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
.imgBox {
  width: 600px;
  margin: 50px auto;
}
.thumnail {
  width: 610px;
  text-align: center;
}
.thumnail img {
  margin-right: 10px;
}
.mainImg {
  width: 600px;
  height: 600px;
  margin-top: 10px;
  padding-top: 15px;
  background: url(img/bg.jpg) no-repeat center -15px;
  text-align: center;
}
</style>
</head>
<body>
<divclass="imgBox">
<divclass="thumnail">
<imgsrc="img/s01.jpg"alt=""onMouseOver="mainImage.src='img/01.jpg'"onMouseOut="mainImage.src='img/01.jpg'"><imgsrc="img/s02.jpg"alt=""onMouseOver="mainImage.src='img/02.jpg'"onMouseOut="mainImage.src='img/01.jpg'"><imgsrc="img/s03.jpg"alt=""onMouseOver="mainImage.src='img/03.jpg'"onMouseOut="mainImage.src='img/01.jpg'"><imgsrc="img/s04.jpg"alt=""onMouseOver="mainImage.src='img/04.jpg'"onMouseOut="mainImage.src='img/01.jpg'"><imgsrc="img/s05.jpg"alt=""onMouseOver="mainImage.src='img/05.jpg'"onMouseOut="mainImage.src='img/01.jpg'">
</div>
<divclass="mainImg"><imgsrc="img/01.jpg"alt=""name="mainImage"></div>
</div>
</body>
</html>

メイン画像とサムネールを作る