[JavaScript] 画像置換
①画像にマウスを乗せた時はカラー、マウスを乗せていないときはモノクロ、というように画像が変わる仕組み
CSSを使わずにJavascriptで行います。
マウスオフ時
マウスオン時
手順
① 画像を用意する(Photoshop)
② Javascriptを埋め込む
1.画像を用意する(Photoshop)
マウスを乗せていないときはモノクロ、マウスオン時はカラーの画像をPhotoshopで用意する。サイズは幅400px 高さ300px
① 素材を開く
マウスオン時の画像の作り方
② 切り抜きツールで必要なサイズを設定し、切り抜く ・・・必要なサイズの比率を保ったまま、全体が縮小されてそのサイズに収まる
※ 長方形選択ツールを使うと、全体を縮小できず一部しか切り取れないので使わないこと
③ マウスオン時の画像として保存
モノクロ画像の作り方 ③の画像を加工
④ イメージ>色調補正>白黒 にする
⑤ 保存
カラー画像のファイル名は01.jpg~06.jpg、
モノクロ画像のファイル名はm01.jpg~m06.jpgとして保存
2.Javascriptを埋め込む
<script>タグではなく、要素に直接記述します
==========================
onmouseover = " this.src = ' img/◎◎.jpg ' " (マウスオン時)
onmouseout = " this.src = ' img/◎◎.jpg ' " (マウスを乗せていない時)
==========================
HTML
<body>
<div id="container">
<H1>画像置換 ①</H1>
<p>マウスを画像の上に置くと画像が変化します</p>
<ul>
<li><img src="../img/01m.jpg" alt=""></li>
<li><img src="../img/02m.jpg" alt="" ></li>
<li><img src="../img/03m.jpg" alt="" ></li>
<li><img src="../img/04m.jpg" alt="" ></li>
<li><img src="../img/05m.jpg" alt=""></li>
<li><img src="../img/06m.jpg" alt="" ></li>
</ul>
</div><!-- /#container -->
</body>
body{
color: #FFF;
background: #000;
width:960px;
margin: 0 auto;
}
#container {
width: 960px;
margin: 30px 0 auto; /*上、下、左右の順*/
}
h1 {
margin:0 0 10px 10px;
padding-top: 20px;}
p {
margin:0 0 10px 10px;
}
ul {
overflow: hidden;}
li {
float : left;
margin: 10px;
-----------------
Javascriptを追加したHTML記述
<body>
<div id="container">
<H1>画像置換 ①</H1>
<p>マウスを画像の上に置くと画像が変化します</p>
<ul>
<li><img src="../img/01m.jpg" alt="" onmouseover="this.src='../img/01.jpg'" onmouseout="this.src='../img/01m.jpg'"></li>
<li><img src="../img/02m.jpg" alt="" onmouseover="this.src='../img/02.jpg'" onmouseout="this.src='../img/02m.jpg'"></li>
<li><img src="../img/03m.jpg" alt="" onmouseover="this.src='../img/03.jpg'" onmouseout="this.src='../img/03m.jpg'"></li>
<li><img src="../img/04m.jpg" alt="" onmouseover="this.src='../img/04.jpg'" onmouseout="this.src='../img/04m.jpg'"></li>
<li><img src="../img/05m.jpg" alt="" onmouseover="this.src='../img/05.jpg'" onmouseout="this.src='../img/05m.jpg'"></li>
<li><img src="../img/06m.jpg" alt="" onmouseover="this.src='../img/06.jpg'" onmouseout="this.src='../img/06m.jpg'"></li>
</ul>
</div><!-- /#container -->
</body>
②
小画像にマウスオンすると、大きい画像が表示されます。
このタイプは、グリッドデザインに通じるもので、Javascript以前にスタイルを厳密につくる必要があります。
そのため各画像のサイズ、間隔を細かく計算することが、レイアウトを組み立てる鍵となります。
必要な画像: メイン画像 400×300 各5枚 l01.jpg~l05.jpgで保存
小画像 195×145 各5枚 s01.jpg~s05.jpgで保存
この場合は、マウスオンによって変化する画像の位置が異なるため、
メイン画像にname属性の”mainImage”をつけています
<img src="../img/s02.jpg" alt="" onmouseover="mainImage.src='../img/l02.jpg'" onmouseout="mainImage.src='../img/l01.jpg'">
CSS
/* reset */
html, body, h1, p, div, ul, li {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul {
list-style: none;
}
img {
vertical-align: bottom;
border: none;
}
body {
background: #000;
color: #FFF;
}
#container {
width: 625px; /*必要な幅400+195+余白(5+5+10)*/
margin: 30px auto 0 auto;
}
h1 {
margin-bottom: 20px;
}
ul {
overflow: hidden;
background: #fff;
padding: 5px;
}
.ul1 {
padding-bottom: 0;
}
li {
float: left;
margin: 5px;
}
HTML
<body>
<div id= "container">
<h1>Javascriptによる画像置換2</h1>
<ul class ="ul1">
<li><img src="../img/l01.jpg" alt="" name="mainImage"></li>
<li><img src="../img/s01.jpg" alt="" onmouseover="mainImage.src='../img/l01.jpg'" onmouseout="mainImage.src='../img/l01.jpg'" ></li>
<li><img src="../img/s02.jpg" alt="" onmouseover="mainImage.src='../img/l02.jpg'" onmouseout="mainImage.src='../img/l01.jpg'"></li>
</ul>
<ul>
<li><img src="../img/s03.jpg" alt="" onmouseover="mainImage.src='../img/l03.jpg'" onmouseout="mainImage.src='../img/l01.jpg'"></li>
<li><img src="../img/s04.jpg" alt="" onmouseover="mainImage.src='../img/l04.jpg'" onmouseout="mainImage.src='../img/l01.jpg'"></li>
<li><img src="../img/s05.jpg" alt="" onmouseover="mainImage.src='../img/l05.jpg'" onmouseout="mainImage.src='../img/l01.jpg'"></li>
</ul>
</div>
</body>