マウスオーバーで画像を切替える方法はいくつかあります。
大別して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という数字をいじる事で変更する事が可能です。
と言う事で、僕の知る限り最も簡単なマウスオーバーでのハイクオリティな画像切替方法でした。
