Any JavaScript experts out there?

lonogod · **Joined:** Wed Sep 10, 2008 6:22 pm

Hey everyone! I'm trying to do something that I've done before years ago, but can't for the life of me figure out how to do now. I'm trying to simulate an animated GIF using PNGs. Obviously, I'm trying to use JavaScript, but it's been nearly five years since I've done any programming. Can someone help me with this, please?

Basically, what I want to do is have a rotating background image for a table cell. I've seen some scripts out there for something similar...just not in a table cell. That's my problem. Any help would be greatly appreciated.

And I hate to sound rude, but time is a factor.

Thanks!

- Billy

lonogod · **Joined:** Wed Sep 10, 2008 6:22 pm

Sorry for the bump, but I still need help with this. Here's what I've got so far.

JavaScript File

Code:

var bannerImg = new Array();
  bannerImg[0]="image1.png";
  bannerImg[1]="image2.png";

var newbanner = 0;
var totalBan = bannerImg.length;

function cycleBan() {
  newbanner++;
  if (newbanner == totalBan) {
    newbanner = 0;
  }
  document.banner.src=bannerImg[newbanner];
  setTimeout("cycleBan()", 3*1000);
}
window.onload=cycleBan;

Head of HTML Page

Code:

Body of HTML Page

Code:

All I need is for this to be modified slightly so that it can be called to a table background instead of an img tag. Thanks!

- Billy

TomZ · **Posted:** Tue Apr 12, 2011 10:25 am

In your table:

Code:

In your script:

Code:

document.getElementById("something").style.background="url(someimage.png)";

lonogod · **Joined:** Wed Sep 10, 2008 6:22 pm

Thanks for the reply, TomZ! Where in my script do I put that? Thanks, again!

- Billy

Skarabajo · **Joined:** Wed Jan 21, 2009 12:58 pm

TomZ code is almost perfect. Here's a little adaptation that will work with the existing code, this is a modification of your existing external JavaScript banner.js (it replaces the line that starts with document.banner.src)

Code:

  document.getElementById('banner').style.background="url("+bannerImg[newbanner]+")";

Don't forget the CSS also inside HEAD:

Code:

<style type="text/css">
#banner {
   background-image: url(image1.png);
}
</style>

Also, your cell will be:

Code:

Skarabajo.

lonogod · **Joined:** Wed Sep 10, 2008 6:22 pm

Thanks, Skarabajo, but that just posted image1.png. as the background image. It does not rotate the images. Any idea why it's not working for me?

Thanks, again!

- Billy

Skarabajo · **Joined:** Wed Jan 21, 2009 12:58 pm

I tried the above code, it works perfectly. Simply double check everything: the external JavaScript, the CSS, the ID of the TD.

Maybe you should repost every part here again, or maybe this should now go to PM...

Skarabajo.

lonogod · **Joined:** Wed Sep 10, 2008 6:22 pm

I'll post it here one more time then go to PM. Thanks!

Here you go! Switched everything to "back" instead of "banner."

JavaScript File

Code:

var backImg = new Array();
  backImg[0]="50years.png";
  backImg[1]="lewis.png";

var newback = 0;
var totalBack = backImg.length;

function cycleBack() {
  newback++;
  if (newback == totalBack) {
    newback = 0;
  }
  document.getElementById('back').style.background="url("+backImg[newback]+")";
  setTimeout("cycleBack()", 3*1000);
}
window.onload=cycleBack;

Head of HTML Page

Code:

<script type="text/javascript" src="back.js"></script>

<style type="text/css">
#back {
   background-image: url(50years.png);
}
</style>

Body of HTML Page

Code:

Tried in the TD tag and it still didn't work. Thanks, again! I really appreciate the help!

- Billy

Skarabajo · **Joined:** Wed Jan 21, 2009 12:58 pm

It will definately work... the TD tag is part of the TABLE tag. See example below of a 3x3 empty table with one cell that has the ID:

Code:

<table width="200" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td id="back">&nbsp;</td>
  </tr>
</table>

Skarabajo.

lonogod · **Joined:** Wed Sep 10, 2008 6:22 pm

Nevermind! It works! It was a stupid error on my part. Thank you guys soooooooo much! This was for my mother's anniversary so she'll love it. Thanks, again!

- Billy

lonogod · **Joined:** Wed Sep 10, 2008 6:22 pm

Actually, when I post it into my full script it doesn't work anymore. Would someone mind taking a look at my entire script to see what may be causing the issue? Let me know! Thank you, guys!

- Billy

Joshua Bell · **Posted:** Tue Apr 12, 2011 11:12 am

You may want to pre-load the images as well. Here's my take on the problem:

Code:

window.onload = function () {
    var images = ["images/pic1.png", "images/pic2.png", "images/pic3.png"],
        interval = 300,
        target = document.getElementById('back');

    // returns a function; after the function is called "count" times, "then" will be called
    function after(count, then) {
        return function () {
            count -= 1;
            if (count === 0) { then(); }
        };
    }

    // start the animation loop
    function start() {
        var cur = 0;

        setInterval(function () {
            target.style.backgroundImage = 'url("' + images[cur] + '")';
            cur = (cur + 1) % images.length;
        }, interval);
    }

    // pre-load the images
    (function () {
        var i, img, callback = after(images.length, start);

        for (i = 0; i < images.length; i += 1) {
            img = new Image();
            img.onload = callback;
            img.src = images[i];
        }
    }());
};

lonogod · **Joined:** Wed Sep 10, 2008 6:22 pm

Well, all is well. Thank you all for your help! It works perfectly now. You guys are great! Consider this topic closed.

- Billy

Any JavaScript experts out there?

Who is online