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

Question

kentajoy

97

93もっと見る

70pt

コンピュータウェブ制作

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

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

回答の条件

1人2回まで

登録：2008/04/12 04:43:29
終了：2008/04/19 04:45:02

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

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

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

pahoo · Answer 1 · 2008-04-12T08:47:36+09:00

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

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

参考サイト

GoldenDawn · Answer 2 · 2008-04-12T10:20:42+09:00

<!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>

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

回答（2件）

pahoo59606332008/04/12 08:47:36

参考サイト

GoldenDawn426812008/04/12 10:20:42

コメント（0件)

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