プロジェクションマッピング

エンターテインメントから工業利用まで、プロジェクションマッピングの活用・運用をお考えの方へ

more

インタラクティブ&サイネージ

情報表示用のデジタルサイネージから、センサーを利用したインタラクティブ要素などをお考えの方へ

more

VR/360MOVIE

VRHMD用コンテンツからプラットフォームを利用した360度ムービーを活用したPRをお考えの方へ

more
CONTACT 052-253-9866

jQueryでオンマウス時にボタンの画像をふわっと切り替えてみる!(IE8〜対応!)

2014.08.05 火曜日 07:38:38

tumblr_mq7ejb3POL1st5lhmo1_1280_01

Javascriptをより直感的に操作できるようになる、
超便利なライブラリのjQuery。
その中でも「fadeIn」「fadeOout」はUI、UXの面から見ても優れており
非常に使い勝手も良いメソッドです。

オンマウス時に画像を切り替えるのに使い勝手が良いのが「fadeTo」です。
fadeToはfadeOutと違い、display:noneの状態にならず、
Opacityのみ変化するので、マウスを乗せたままの状態に対応することが出来るのが
特徴の一つと言えると思います。

fadeToでオンマウス時に画像を切り替える

オンマウス時に、透過率を変化させて画像を切り替えるために
以下のように記述をしました。

Javascript

$(function(){
  $('.nav_test a over_img').hover(function(){
      $(this).stop().fadeTo(500 , 1);
  },function(){
      $(this).stop().fadeTo(500 , 0);
  });
});

fadeTo(500 , 1)内の500はフェードするのにかかる時間、
1は、透過率なので、0なら透明になります。
HTMLとCSSは以下の様に書いてみました。

html

<ul class="nav_test">
  <li>
    <a href="#">
      <img src="photo_1.jpg" />
      <span class="over_img">
        <h5>タイトルが入ります</h5>
        <p>キャプションです</p>
      </span>
    </a>
  </li>
</ul>

css

.nav_test li{
  display: inline-block;
  width: 200px;
}
.nav_test a{
  position: relative;
  display: block;
}
.nav_test a span{
  opacity: 0;
}
.nav_test a .over_img{
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("img/over_test.png");
  background-position: left top;
  background-repeat: no-repeat;
  padding-left: 30px;
  padding-top: 30px;
  color: #FFF;
  width: 170px;
  height: 70px;
}

IEに対応させるために…

ただIE8が少し問題児でして、このままでは透過pngが透過してくれませんでした。
そこで結局、以下のように書き換えて、透過するようになりました。

CSSの指定では最初の表示でopacity:0が効かない為、
最初にjsで指定しました。
それから、要素をまとめて指定しても透過しないようだったので、
テキストと画像を別々に指定して透過させました。

Javascript

$(function(){
$('.nav_test a span').css("opacity","0");

  $('.nav_test a').hover(function(){
      $(this).children(".over_img_bg").stop().fadeTo(500 , 1);
      $(this).children(".over_text").stop().fadeTo(500 , 1);
  },function(){
      $(this).children(".over_img_bg").stop().fadeTo(500 , 0);
      $(this).children(".over_text").stop().fadeTo(500 , 0);
  });
});

背景画像は別のspanで括って、imgで指定することにしました。

html

<ul class="nav_test">
  <li>
    <a href="#" class="btn_1">
      <img src="img/bt_test_2.jpg" />
      <span class="over_img_bg"><img src="img/over_test.png" /></span>
      <span class="over_text">
        <h5>タイトルが入ります</h5>
        <p>キャプションです</p>
      </span>
    </a>
  </li>
</ul>

css

.nav_test li{
  display: inline-block;
  width: 200px;
}
.nav_test a{
  position: relative;
  display: block;
}
.nav_test a span{
  opacity: 0;
}
.nav_test a .over_img{
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("img/over_test.png");
  background-position: left top;
  background-repeat: no-repeat;
  padding-left: 30px;
  padding-top: 30px;
  color: #FFF;
  width: 170px;
  height: 70px;
}

このような感じで、対応することができました。
IE6、7がサポートが外れて余り必要なくなってはきましたが、
IE8にはまだ悩まされる部分がありますね…

Category:Development , PHP/Javascript     Tag:
Authorブログの著者について
田中 義弘

田中 義弘

イベントプロダクション・グラフィックデザイナーを経て、2010年3月に株式会社アイデアクラウドを設立。近年、WEBから得た技術をベースに、プロジェクションマッピング事業をはじめとした先端事業をスタート。

Our Business
最近の記事
人気記事
Our Project