人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【Javascript】マウスオンで画像が変わるJavascript (例:http://starlightquest.fc2web.com/otamesi/imgchger.htm) を使う際、
画像にフェードイン効果を付けて表示させる方法を教えてください。

●質問者: kentajoy
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:JavaScript マウス 画像
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● pahoo
●35ポイント

CSSのalpha.opacityをJavaScriptで動的変化させることでフェードイン/アウトを実現できます。

ただし、ブラウザによってパラメータや挙動が異なります。詳細は下記サイトを参照してください。


参考サイト


2 ● GoldenDawn
●35ポイント
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <script type="text/javascript">
 // 表示する画像
 var images = ["./img/img001.jpg", "./img/img002.jpg", "./img/img003.jpg", "./img/img004.jpg", "./img/img005.jpg"] ;

 var tid = false ;

 // 画像切り替え
 function changeImage(n) {
 //if (tid != false) return ;
 var targentImg = document.getElementById("changing") ;
 document.getElementById("imgspace").style.backgroundImage = 'url('+targentImg.src+')' ;
 document.getElementById("imgspace").style.backgroundRepeat = 'no-repeat' ;
 targentImg.style.filter = 'alpha(opacity=0, type=0)' ;
 targentImg.style.MozOpacity = targentImg.style.opacity = 0 ;
 targentImg.src = images[n] ;
 clearTimeout(tid) ;
 tid = setTimeout("fadeIn(10)", 100) ;
 }

 // フェードイン
 function fadeIn(o) {
 var targentImg = document.getElementById("changing") ;
 targentImg.style.filter = 'alpha(opacity='+o+', type=0)' ;
 targentImg.style.MozOpacity = targentImg.style.opacity = o / 100 ;
 if (o < 100) tid = setTimeout("fadeIn("+(o+10)+")", 100) ;
 else tid = false ;
 }

 onload = function() {
 // 画像先読み
 preloadImages = [] ;
 for (var i = 0; i < images.length; ++i) {
 preloadImages[i] = new Image() ;
 preloadImages[i].src = images[i] ;
 }
 }
 </script>
 </head>

 <body>
 <div id="imgspace"><img src="./img/img001.jpg" id="changing" /></div>
 <span onmouseover="changeImage(0)">1番</span>
 <span onmouseover="changeImage(1)">2番</span>
 <span onmouseover="changeImage(2)">3番</span>
 <span onmouseover="changeImage(3)">4番</span>
 <span onmouseover="changeImage(4)">5番</span>
 </body>
</html>
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ