くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[JavaScript] 画像置換

①画像にマウスを乗せた時はカラー、マウスを乗せていないときはモノクロ、というように画像が変わる仕組み

CSSを使わずにJavascriptで行います。

マウスオフ時

f:id:pleasure10501:20150404091058j:plain

マウスオン時

f:id:pleasure10501:20150404091107j:plain

手順

① 画像を用意する(Photoshop
② Javascriptを埋め込む

1.画像を用意する(Photoshop

マウスを乗せていないときはモノクロ、マウスオン時はカラーの画像をPhotoshopで用意する。サイズは幅400px 高さ300px 

 ① 素材を開く

マウスオン時の画像の作り方 

 ② 切り抜きツールで必要なサイズを設定し、切り抜く ・・・必要なサイズの比率を保ったまま、全体が縮小されてそのサイズに収まる

f:id:pleasure10501:20150404100116j:plain

f:id:pleasure10501:20150404100121j:plain

 ※ 長方形選択ツールを使うと、全体を縮小できず一部しか切り取れないので使わないこと

 ③ マウスオン時の画像として保存

モノクロ画像の作り方 ③の画像を加工

 ④ イメージ>色調補正>白黒 にする

 ⑤ 保存

カラー画像のファイル名は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>

 

CSS

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>

 

f:id:pleasure10501:20150404113031j:plain

小画像にマウスオンすると、大きい画像が表示されます。

このタイプは、グリッドデザインに通じるもので、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>