?
Solved

Image transition and timer

Posted on 2007-09-29
3
Medium Priority
?
690 Views
Last Modified: 2013-11-19
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.


0
Comment
Question by:Simon336697
3 Comments
 
LVL 10

Assisted Solution

by:Phatzer
Phatzer earned 320 total points
ID: 19984389
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
 
LVL 7

Accepted Solution

by:
ed987 earned 1680 total points
ID: 19984405
============================================================== 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
 
LVL 1

Author Comment

by:Simon336697
ID: 19984471
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The title says it all. Writing any type of PHP Application or API code that provides high throughput, while under a heavy load, seems to be an arcane art form (Black Magic). This article aims to provide some general guidelines for producing this typ…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month15 days, 5 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question