Image transition and timer

Hi guys!

I have been working on image transition effects with javascript, especially opacity.
What I have is the following...

1 html file called test.html.
1 javascript file called blendtrans.js

Basically, on the test.html page, I have the following......

A blank page on load with a "Show/Hide" title.

When I click on the show/hide, it fades in an image into the page.
When I click on the show/hide a second time, it fades out the image.

What Id like to do, is the following.
a) On page load, nothing is displayed for 2 seconds.
b) After 2 seconds, the image automatically fades into the page and is viewable.
c) After 15 seconds, the image automatically fades out of the page.
d) Another 2 seconds, and the process repeats from step b).

Here is the code for both the html and javascript. Thank you.

============================================================== html
<style>
</style>
<script type="text/javascript" src="blendtrans.js"></script>
<img src="test.jpg" style="width: 936px; height: 267px; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blendimage" alt="" />
<a href="javascript:shiftOpacity('blendimage', 1000)">show/hide</a>

=========================================================== blendtrans.js
function opacity(id, opacStart, opacEnd, millisec) {
      //speed for each frame
      var speed = Math.round(millisec / 100);
      var timer = 0;

      //determine the direction for the blending, if start and end are the same nothing happens
      if(opacStart > opacEnd) {
            for(i = opacStart; i >= opacEnd; i--) {
                  setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
                  timer++;
            }
      } else if(opacStart < opacEnd) {
            for(i = opacStart; i <= opacEnd; i++)
                  {
                  setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
                  timer++;
            }
      }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
      var object = document.getElementById(id).style;
      object.opacity = (opacity / 100);
      object.MozOpacity = (opacity / 100);
      object.KhtmlOpacity = (opacity / 100);
      object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
      //if an element is invisible, make it visible, else make it ivisible
      if(document.getElementById(id).style.opacity == 0) {
            opacity(id, 0, 100, millisec);
      } else {
            opacity(id, 100, 0, millisec);
      }
}

function blendimage(divid, imageid, imagefile, millisec) {
      var speed = Math.round(millisec / 100);
      var timer = 0;
      
      //set the current image as background
      document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
      
      //make image transparent
      changeOpac(0, imageid);
      
      //make new image
      document.getElementById(imageid).src = imagefile;

      //fade in image
      for(i = 0; i <= 100; i++) {
            setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
            timer++;
      }
}

function currentOpac(id, opacEnd, millisec) {
      //standard opacity is 100
      var currentOpac = 100;
      
      //if the element has an opacity set, get it
      if(document.getElementById(id).style.opacity < 100) {
            currentOpac = document.getElementById(id).style.opacity * 100;
      }

      //call for the function that changes the opacity
      opacity(id, currentOpac, opacEnd, millisec)
}
==========================================================================
Thanks guys.


LVL 1
Simon336697Asked:
Who is Participating?
 
ed987Connect With a Mentor Commented:
============================================================== html
<style>
</style>
<script type="text/javascript" src="blendtrans.js"></script>
<img src="test.jpg" style="width: 936px; height: 267px; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blendimage" alt="" />
<a href="javascript:shiftOpacity('blendimage', 1000)">show/hide</a>

<script>
var tm1=2,tm2=15,tm3=1;
function step1()
{
   setTimeout("step2()",tm1*1000);
}
function step2()
{
   shiftOpacity('blendimage', tm3*1000);
   setTimeout("step3()",(tm2+tm3)*1000);
}
function step3()
{
   shiftOpacity('blendimage', tm3*1000);
   setTimeout("step2()",(tm1+tm3)*1000);
}
window.onload=step1;
</script>
0
 
PhatzerConnect With a Mentor Commented:
I'd recommend looking at the setTimeout() function of javascript and tie that into an 'onload' in your body tag (i.e. <body onload="setTimeout(<<first function>>,200); return true">). On part of it then repeating the functions over, you might have to look in to using something like a while loop to do that.

Hope this helps a little.
0
 
Simon336697Author Commented:
Phatzer and ed987!
You guys are brilliant.
I just tested both your ideas out and it works flawlessly.
Thank you so much.
ed987...this is exactly the thing im looking for.
Im going to allocated points now, but if its okay with you guys, Im going to post another question exactly related to this, just a bit more complex.
I will title the next question:
"Image transition and timer - polling a folder of images".
Thanks so much to both of you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.