How to make a pic fading in html or flash?

How to make a pic fading in html or flash?

Hey Pedro Mahons,

You can do this in Html with the help of CSS and JavaScript. Besides, you can always do this in Flash with the help of individual element.

First of all you may assign <DIV> tag to your <IMG> and provide the SRC for this IMAGE and after that assign a unique ID to it as well.

Now in the CSS part, you’ll have to assign Properties and Attributes to that DIV tag with specific ID you assigned earlier.

Following is the example for assigning Properties and Attribution to the ID named “photoplace” and “photo”

#photoplace {

  width:450px;

  height:338px;

  background:#fff url('/images/loading.gif') 50% 50% no-repeat;

}

#photo {

  width:450px;

  height:338px;

}

Do it in the same way and you are just one step away from fading your first image on HTML.

The last step is to put the JavaScript into you html page so as to make this thing work in the proper way.

Put those javascript lines below your HEAD TAG and right above the BODY.

<script type="text/javascript">

<!--

document.write("<style type='text/css'>#photo {visibility:hidden;}</style>");

function initImage() {

        imageId = 'photo';

        image = document.getElementById(imageId);

        setOpacity(image, 0);

        image.style.visibility = "visible";

        fadeIn(imageId,0);

}

function fadeIn(objId,opacity) {

        if (document.getElementById) {

               obj = document.getElementById(objId);

               if (opacity <= 100) {

                       setOpacity(obj, opacity);

                       opacity += 10;

                       window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);

               }

        }

}

function setOpacity(obj, opacity) {

        opacity = (opacity == 100)?99.999:opacity;

        // IE/Win

        obj.style.filter = "alpha(opacity:"+opacity+")";

        // Safari<1.2, Konqueror

        obj.style.KHTMLOpacity = opacity/100;

        // Older Mozilla and Firefox

        obj.style.MozOpacity = opacity/100;

        // Safari 1.2, newer Firefox and Mozilla, CSS3

        obj.style.opacity = opacity/100;

}

window.onload = function() {initImage()}

// -->

Thanks