6/13のまとめ - はれあめはれ

JavaScriptで画像置換(2)

モノクロからカラー写真に置換

http://puisto.moo.jp/mOver/index2.html←ここに実物があります

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>画像置換2</title>
  <style type="text/css">
  <!--
	* {
		margin: 0;
		padding: 0;
	}
	img {
		vertical-align: top;
		cursor: pointer;
	}
	body {
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		color: #fff;
		background-color: #000;
	}
	#container {
		width: 820px;
		height: auto;
		overflow: auto;
		margin: 15px auto;
	}
	h1, p {
		text-align: center;
		padding: 10px 0 15px 0 ;
	}
	h1 {
		font-size: 1.875em;
	}
	p {
		font-size: 0.875em;
	}
	ul {
		list-style-type: none;
	}
	li img {
		margin-bottom: 10px;
	}
	 li {
		float: left;
		width: 400px;
		margin: 0 5px 0 5px;
	}	
	-->
  </style
</head>
<body>
<div id="container">
	<h1>風景・花写真集</h1>
  <p>画像の上へマウスを移動させると、カラー画像画表示されます</p>
  <ul>
  <li><img src="images/01.jpg" width="400" height="300" alt="" onMouseOver="this.src='images/01_o.jpg'" onMouseOut="this.src='images/01.jpg'"></li><li><img src="images/02.jpg" width="400" height="300" alt="" onMouseOver="this.src='images/02_o.jpg'" onMouseOut="this.src='images/02.jpg'"></li><li><img src="images/03.jpg" width="400" height="300" alt="" onMouseOver="this.src='images/03_o.jpg'" onMouseOut="this.src='images/03.jpg'"></li>
  <li><img src="images/04.jpg" width="400" height="300" alt="" onMouseOver="this.src='images/04_o.jpg'" onMouseOut="this.src='images/04.jpg'"></li><li><img src="images/05.jpg" width="400" height="300" alt="" onMouseOver="this.src='images/05_o.jpg'" onMouseOut="this.src='images/05.jpg'"></li><li><img src="images/06.jpg" width="400" height="300" alt="" onMouseOver="this.src='images/06_o.jpg'" onMouseOut="this.src='images/06.jpg'"></li>
  </ul>
  </div>
</body>
</html>

サイズ変更した写真の上に、調整レイヤーで白黒、色調補正かける
一番上に一枚作ればok
anchorのない画像はcursor: pointerを打ってポインターを表示させる

サムネイルで画像置換

http://puisto.moo.jp/mOver/index3.html←ここに実物があります

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>画像置換3</title>
  <style type="text/css">
  <!--
	* {
		margin: 0;
		padding: 0;
	}
	img {
		vertical-align: top;
		cursor: pointer;
	}
	body {
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		color: skyblue;
		background-color: #fff;
	}
	#container {
		width: 450px;
		margin: 0 auto;
		text-align: center;
	}
	h2 {
		font-size: 1.5em;
		padding: 20px;
	}
	.thumbnail {
		margin-bottom: 15px;
	}
	ul {
		list-style-type: none;
	}
	li {
		float: left;
		width: 80px;
        height: 60px;
		margin: 0 5px;
	}
	.main {
		background-color: #fff;
		background-image: url(images/main.jpg);
		background-repeat: no-repeat;
		background-position: center 55px;
	}
	.main p img {
		padding: 35px 0 15px 0;
	}
	-->
  </style>
  </head>
<body>
<div id="container">
<noscript>
<p>このWebページはJavaScriptを使用しています。<br>お使いのブラウザがJavaScriptに未対応の場合や<br>JavaScriptの設定が無効になってる場合には、<br>正しく表示されないことがあります。</p>
</noscript>
<h2>Photo Gallery</h2>
<div class="thumbnail">
  <ul>
  <li><img src="images/s01.jpg" width="80" height="60" alt="" onMouseOver="document.mainImg.src='images/01_o.jpg'"></li>
  <li><img src="images/s02.jpg" width="80" height="60" alt="" onMouseOver="document.mainImg.src='images//02_o.jpg'"></li>
  <li><img src="images/s03.jpg" width="80" height="60" alt="" onMouseOver="document.mainImg.src='images//03_o.jpg'"></li>
  <li><img src="images/s04.jpg" width="80" height="60" alt="" onMouseOver="document.mainImg.src='images//04_o.jpg'"></li>
  <li><img src="images/s05.jpg" width="80" height="60" alt="" onMouseOver="document.mainImg.src='images//05_o.jpg'"></li>
  </ul>
  </div>
  <div class="main">
  <p><img src="images/01_o.jpg" width="400" height="300" alt="" name="mainImg"></p>
  </div>
  </div>
</body>
</html>

メインの写真にはname属性をつけてサムネイルと紐づける
セールスポイントを見せるときに使える

CrossSlide-fade

http://puisto.moo.jp/slide/index.html←ここに実物があります

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CrossSlide-fade</title>
  <script src="js/jquery-1.7.2.min.js"></script>
  <script src="js/jquery.cross-slide.min.js"></script>
<script>
$(function() {
	$('#slideshow').crossSlide({
		sleep: 3,
		fade: 2
	}, [
	{ src: 'images/01_o.jpg'},
	{ src: 'images/02_o.jpg'},
	{ src: 'images/03_o.jpg'},
	{ src: 'images/04_o.jpg'},
	{ src: 'images/05_o.jpg'},
	{ src: 'images/06_o.jpg'}
	])
});
</script>
<style type="text/css">
<!--
#slideshow {
	width: 400px;
	height: 300px;
	margin: 10px auto;
}
-->
</style>
</head>
<body>
<div id="slideshow">
</div>	
</body>
</html>