掲示板/JavaScript質問板/過去ログ/一覧/ 画像を浮かび上がらせる

0 名前：新人： 2007/09/16（日） 14:28 ID:uhjZdAM8 sub-5Z: はじめまして。質問させていただきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<script language="javascript">

</script>
</HEAD>
<BODY text="#ff80c0" link="#ff80c0" vlink="#ff80c0" alink="#ff80c0" onLoad="Start()">
<center>

<BR>
<img id="imgWave" name="imgWave" src="usafish.gif" border="0">
</BODY>
</HTML>

このソースだと最初に画像が表示されてしまいます。
最初は何も表示されない状態で、徐々に画像を浮かび上がらせたいのですがどうすれば良いのでしょうか？

1 名前：匿名： 2007/09/16（日） 14:28 ID:jYmQD2Vn sub-Cl: つscript aculo us

2 名前：匿名： 2007/09/16（日） 14:28 ID:ViZb.nD4 sub-Cz

>>0
・Firefox、Safari、そして今や Opera ですら CSS3 の opacity を実装するこの時代、IE 独自拡張の filter しか使わないのは何故。
・IE の filter は ActiveX を使っているので、必ず try...catch すること。

> 最初は何も表示されない状態で、徐々に画像を浮かび上がらせたい

最初に白紙画像でも指定するのが一番簡単だと思う。

やっつけ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<script type="text/javascript">

/*@cc_on @if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'load', function () {
/************************************************************************/

function FadeOut () {
    arguments.callee.prototype.handleTimer ();
    return arguments.callee;
}

FadeOut.init = function (node) {
/*@if (@_jscript)
    var style = node.currentStyle;
  @else@*/
    var style = document.defaultView.getComputedStyle (node, null);
/*@end@*/
    
    if (style.position == 'static') node.style.position = 'relative';
    
    var nodes = node.getElementsByTagName ('li');
    for (var i = 0, I = nodes.length; i < I; i++) {
        nodes[i].style.position   = 'absolute';
        nodes[i].style.left       = 0 + 'px';
        nodes[i].style.top        = 0 + 'px';
        nodes[i].style.zIndex     = (I - i) + '';
        nodes[i].style.visibility = 'hidden';
    }
    this.prototype.elements = nodes;
    setTimeout (FadeOut, this.prototype.startTimeout);
};

FadeOut.prototype = {
    maxOpacity       :  100,
    currentOpacity   :    0,
    currentIndex     :    0,
    opacityDecrement :   10,
    opacityTimeout   :   50,
    switchTimeout    : 1000,
    startTimeout     : 2000,
    maxLoop          :    5,
    currentLoop      :    0,
    elements         : null,
    state            : 'fadeIn',
    
    handleTimer : function () {
        this[this.state].call (this);
    },
    
    fadeIn : function () {
        if (this.currentOpacity < 100) {
            this.elements[this.currentIndex].style.visibility = 'visible';
            this.currentOpacity += this.opacityDecrement;
            this.setOpacity (this.elements[this.currentIndex], this.currentOpacity);
            setTimeout (FadeOut, this.opacityTimeout);
        } else {
            for (var i = 0, I = this.elements.length; i < I; i++) {
                this.elements[i].style.visibility = 'visible';
            }
            this.state = 'fadeOut';
            setTimeout (FadeOut, this.switchTimeout);
        }
    },
    
    fadeOut : function () {
        if (this.currentOpacity >= 0) {
            this.currentOpacity -= this.opacityDecrement;
            this.setOpacity (this.elements[this.currentIndex], this.currentOpacity);
            setTimeout (FadeOut, this.opacityTimeout);
        } else {
            for (var i = 0, I = this.elements.length; i < I; i++) {
                this.elements[i].style.zIndex = ((I - i) + this.currentIndex) % I;
            }
            this.currentOpacity = this.maxOpacity;
            this.setOpacity (this.elements[this.currentIndex], this.currentOpacity);
            this.currentIndex = (this.currentIndex + 1) % I;
            
            if (this.currentIndex != 0
                || this.maxLoop == 0
                || this.maxLoop > ++this.currentLoop
            ) {
                setTimeout (FadeOut, this.switchTimeout);
            }
        }
    },
    setOpacity : function (node, opacity) {
/*@if (@_jscript)
        try { node.style.filter = 'Alpha(opacity=' + opacity + ')'; } catch (err) { ; }
  @else@*/
        node.style.opacity = opacity / 100;
/*@end@*/
    }
};

FadeOut.init (document.getElementsByTagName ('ul')[0]);

/************************************************************************/
}, false);
</script>
    
<ul>
  <li><img src="sample1.jpg" alt="*"></li>
  <li><img src="sample2.jpg" alt="*"></li>
  <li><img src="sample3.jpg" alt="*"></li>
  <li><img src="sample4.jpg" alt="*"></li>
  <li><img src="sample5.jpg" alt="*"></li>
</ul>

3 名前：新人： 2007/09/16（日） 14:28 ID:uhjZdAM8 sub-5Z: 回答してくださってありがとうございます。
匿名さんが書いてくださったソースちょっと難しくてまだ理解できていないのですが、
最初に白紙画像を指定するというやり方を試してみたのですが、そうした場合、表示させたい「usafish.gif」画像をどこどこに記述すればいいのでしょうか？
ちなみにこのような感じに修正したのですが、うまくいきません。

<script language="javascript">

</script>
</HEAD>
<BODY text="#ff80c0" link="#ff80c0" vlink="#ff80c0" alink="#ff80c0" onLoad="Start()">
<center>

<BR>
<img id="imgWave" name="imgWave" src="white.gif" border="0">
</BODY>
</HTML>