Posts Tagged ‘javascript’

jQuery_logo

マウスオーバーで画像を切替える方法はいくつかあります。
大別してCSSを使ってやる方法とJavascriptを使ってやるというのが主流かと思います。

CSSでやる場合、ボタンの切り替えはどうしても瞬間的に切り替わるものになってしまいます。
(ふわっと切り替える方法もあるのかな・・・)

でもやっぱり僕的には「ふわり」と切り替わるエフェクトの方が好みなんです。
そこで今回はJavascriptを使ってやる方法を選択してみました。

Javascriptを使って簡単にアニメーションを実装といえばもちろんjQueryさんの出番です。

と言う事で、HTMLのHEAD内にまずはjQueryをインポートしてしまいましょう。

<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="./scripts/smart-crossfade.js"></script>
</head>

2行目googleのライブラリからjQueryを引っ張ってきてインポート。
3行目でインポートしてる”smart-crossfade.js”が今回の肝にあたるライブラリです。

こいつを使うとどうなるのか。

こちらにサンプルを用意しました。
smart-crossfade demo

このとおりふわりと画像が切り替わるのですね!

使用するには色違いの画像を2枚用意して、それぞれのファイル名の末尾を”_on”,”_off”としてあげます。
“button_off.jpg”,”button_on.jpg”といった具合にですね。

_offをつけている方はマウスが画像から外れている時に表示する画像。
_onをつけている方がマウスオーバーした時に表示する画像となっています。

後はその画像をaタグで囲ってあげると自動的に、ふわっと画像が切り替わるマウスオーバーエフェクトが実装されています。

以下実装ソースです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>smart-crossfade demo</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/smart-crossfade.js"></script>
</head>
<body>
<a href="#"><img src="img/facebook_off.png"></a>
<a href="#"><img src="img/twitter_off.png"></a>
<a href="#"><img src="img/google_off.png"></a>
<a href="#"><img src="img/rss_off.png"></a>
</body>
</html>

ライブラリのソースも一応アップしときます。

function smartRollover() {
	if(document.getElementsByTagName) {
		var images = document.getElementsByTagName("img");

		for(var i=0; i < images.length; i++) {
			if(images[i].getAttribute("src").match("_off."))
			{
				images[i].onmouseover = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
				}
				images[i].onmouseout = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
				}
			}
		}
	}
}

if(window.addEventListener) {
	window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
	window.attachEvent("onload", smartRollover);
}


// cross fade

new function(){
  function setRollOver2(){
    if(!document.images){return;}
    var imgs = document.images;
    var insert = [];
    for(var i=0;i<imgs.length;i++){
      var splitname = imgs[i].src.split('_off.');
      if((splitname[1])&&(imgs[i].parentNode.tagName=='A')){
        var rolloverImg = document.createElement('img');
        rolloverImg.src = splitname[0]+'_on.'+splitname[1];
        var alpha = 0;
        rolloverImg.currentAlpha = alpha;
        rolloverImg.style.opacity = alpha/100;
        rolloverImg.style.filter = 'alpha(opacity='+alpha+')';
        rolloverImg.style.position = 'absolute';


        addEvent(rolloverImg,'mouseover',function(){setFader(this,100);});
        addEvent(rolloverImg,'mouseout',function(){setFader(this,0);});

        insert[insert.length] = {position:imgs[i],element:rolloverImg};
      }
    }
    for(var i=0;i<insert.length;i++){
      var parent = insert[i].position.parentNode;
      parent.insertBefore(insert[i].element,insert[i].position);
    }
  }


  function setFader(targetObj,targetAlpha){
    targetObj.targetAlpha = targetAlpha;
    if(targetObj.currentAlpha==undefined){
      targetObj.currentAlpha = 100;
    }
    if(targetObj.currentAlpha==targetObj.targetAlpha){
      return;
    }
    if(!targetObj.fading){
      if(!targetObj.fader){
        targetObj.fader = fader;
      }
      targetObj.fading = true;
      targetObj.fader();
    }
  }

  function fader(){
    this.currentAlpha += (this.targetAlpha - this.currentAlpha)*0.2;
    if(Math.abs(this.currentAlpha-this.targetAlpha)<1){
      this.currentAlpha = this.targetAlpha;
      this.fading = false;
    }
    var alpha = parseInt(this.currentAlpha);
    this.style.opacity = alpha/100;
    this.style.filter = 'alpha(opacity='+alpha+')';
    if(this.fading){
      var scope = this;
      setTimeout(function(){fader.apply(scope)},30);
    }
  }

  function addEvent(eventTarget, eventName, func){
    if(eventTarget.addEventListener){
      eventTarget.addEventListener(eventName, func, false);
    }else if(window.attachEvent){
      // IE
      eventTarget.attachEvent('on'+eventName, function(){func.apply(eventTarget);});
    }
  }

  addEvent(window,'load',setRollOver2);

}

ちなみにフェードインのスピードは87行目
setTimeout(function(){fader.apply(scope)},30);
の30という数字をいじる事で変更する事が可能です。

と言う事で、僕の知る限り最も簡単なマウスオーバーでのハイクオリティな画像切替方法でした。

cssやjavascriptのファイルを変更したけど、ブラウザ上でキャッシュが残っていて
反映してくれない。仕方なくF5を押す。

と言う事で内にタグを使ってキャッシュを抑制している人も多いかも知れません。
具体的には↓の様に。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

でもこの方法だけだと、上手くキャッシュが破棄されない事も多々ありまして、
普段自分が使っているブラウザ「Firefox」でも、この方法ではキャッシュ残っちゃいます。
おそらく、HTTPの仕様に則ったものではないんでしょうね。

と言う事で、この問題をどのように回避するかと言うと、こうします。

//javascript
<script type="text/javascript" src="./javascript/menuCode.js?ver=20120829"></script>
//css
<link rel=stylesheet type="text/css" href="./style.css?ver=20120829"/>

一見普通のjavascriptの呼び出し文ですが、最後に?ver=20120829と追加しています。
この”?”マーク以降の部分はクエリー文と呼ばれるものなんですが、この値を変更する事によって、
ブラウザは現在キャッシュしているjavascriptファイル、もしくはcssファイルとは別物だと認識してくれるようです。

これはHTTPの仕様にも記述してあるようです。

オリジンサーバがそれらのレスポンスのキャッシングを明示的に禁止していない場合に、あらゆるリソースへ GET や HEAD メソッドを適用する事によってそれらのレスポンスがキャッシュから取り出されたならば、誤った動作を導くような副作用を抱えるべきではない。それらは副作用を抱えるかもしれないが、キャッシュはそのキャッシング決定においてそのような副作用を考慮必要は無い。キャッシュは常にキャッシングにおいてオリジンサーバの明示的な制限を観察する事が期待される。
この規則の一つの例外について記す。アプリケーションの中には伝統的に重要な副作用を抱えた操作を実行するためにクエリ URL (それらは rel_path 部分に “?” を含んでいる) を伴う GET や HEAD を使用しているものがあるので、キャッシュはサーバが明示的有効期限を与えていなければそのようなURI へのレスポンスを新鮮であるように扱ってはならない。これは、そのような URI に対する HTTP/1.0 サーバからのレスポンスはキャッシュから取り出されるべきではない という事を特に意味している。関連する情報については section 9.1.1 参照。
引用元:http://www.koikikukan.com/archives/2011/08/29-015555.php

今回は?ver=xxxという形式にしてみましたが、実際、これはなんでもいいです。
ただし、クエリー文は?x=yという基本形式を持っていますので、この形式に則っていれば問題ないと思います。