Javascript

フェードイン・アウトで画像を切り替える

'15.11.16

「ファイル名_off.***」という画像ファイルをオンマウスで「ファイル名_on.***」という画像に切り替える。

以下のコードを</body>タグの直前に挿入。

<script>
function smartRollover(){if(document.getElementsByTagName)for(var f=document.getElementsByTagName("img"),d=0;d<f.length;d++)f[d].getAttribute("src").match("_off.")&&(f[d].onmouseover=function(){this.setAttribute("src",this.getAttribute("src").replace("_off.","_on."))},f[d].onmouseout=function(){this.setAttribute("src",this.getAttribute("src").replace("_on.","_off."))})}window.addEventListener?window.addEventListener("load",smartRollover,!1):window.attachEvent&&window.attachEvent("onload",smartRollover);
new function(){function f(a,c){a.targetAlpha=c;void 0==a.currentAlpha&&(a.currentAlpha=100);a.currentAlpha==a.targetAlpha||a.fading||(a.fader||(a.fader=d),a.fading=!0,a.fader())}function d(){this.currentAlpha+=.2*(this.targetAlpha-this.currentAlpha);1>Math.abs(this.currentAlpha-this.targetAlpha)&&(this.currentAlpha=this.targetAlpha,this.fading=!1);var a=parseInt(this.currentAlpha);this.style.opacity=a/100;this.style.filter="alpha(opacity="+a+")";if(this.fading){var c=this;setTimeout(function(){d.apply(c)},
30)}}function g(a,c,b){a.addEventListener?a.addEventListener(c,b,!1):window.attachEvent&&a.attachEvent("on"+c,function(){b.apply(a)})}g(window,"load",function(){if(document.images){for(var a=document.images,c=[],b=0;b<a.length;b++){var d=a[b].src.split("_off.");if(d[1]&&"A"==a[b].parentNode.tagName){var e=document.createElement("img");e.src=d[0]+"_on."+d[1];e.currentAlpha=0;e.style.opacity=0;e.style.filter="alpha(opacity=0)";e.style.position="absolute";g(e,"mouseover",function(){f(this,100)});g(e,
"mouseout",function(){f(this,0)});c[c.length]={position:a[b],element:e}}}for(b=0;b<c.length;b++)c[b].position.parentNode.insertBefore(c[b].element,c[b].position)}})};
</script>

 

(View1206)