How to make a pic fading in html or flash?

Asked By 10 points N/A Posted on -
qa-featured

I’m learning web development and was wondering if it is possible to make a picture fade in html or flash? If it is possible then tell me how to make a pic fading in html or flash? Any kind of help would be appreciated.

SHARE
Answered By 5 points N/A #164667

How to make a pic fading in html or flash?

qa-featured

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

Related Questions