【Javascript】マウスオンで画像が変わるJavascript (例:http://starlightquest.fc2web.com/otamesi/imgchger.htm) を使う際、

画像にフェードイン効果を付けて表示させる方法を教えてください。

回答の条件
  • 1人2回まで
  • 登録:2008/04/12 04:43:29
  • 終了:2008/04/19 04:45:02

回答(2件)

id:pahoo No.1

pahoo回答回数5960ベストアンサー獲得回数6332008/04/12 08:47:36

ポイント35pt

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

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


参考サイト

id:GoldenDawn No.2

GoldenDawn回答回数426ベストアンサー獲得回数812008/04/12 10:20:42

ポイント35pt
<!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>

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません