• 0

Fading background Pics


Question

Hey Everybody,

So I'm working on a website, and I have a main table that encloses everything else and provides the main background image of the site. I would like to have 4 or 5 pics that I can fade one into another and then into another in the background of this table. What is the best way to achieve this?

Any help or advice appreciated.

Cheers,

Dean

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

1) You are using TABLEs for layout purposes? Are you certain that you don't prefer to use DIV based layouts?

2) You want to fade (animate) background images? That could be VERY distracting/annoying for the user. But I cannot comment on every usage of such a style.

3) jQuery could do this VERY easily by using an array of images, a setTimeout and a function that alters the CSS of the area to set a new background image.

Edit:

I fail to see a need for AJAX here... AJAX to me represents calling a server-side script from the client, and then updating the client based upon the result (if necessary). Why is there server-side needed in a purely client-side presentation element. Sorry, I am questioning if you know what AJAX actually represents...

Link to comment
Share on other sites

  • 0

1) You are using TABLEs for layout purposes? Are you certain that you don't prefer to use DIV based layouts?

2) You want to fade (animate) background images? That could be VERY distracting/annoying for the user. But I cannot comment on every usage of such a style.

3) jQuery could do this VERY easily by using an array of images, a setTimeout and a function that alters the CSS of the area to set a new background image.

Edit:

I fail to see a need for AJAX here... AJAX to me represents calling a server-side script from the client, and then updating the client based upon the result (if necessary). Why is there server-side needed in a purely client-side presentation element. Sorry, I am questioning if you know what AJAX actually represents...

Not every AJAX piece refers back to the server.

The real question is, why would you want to burden your viewers by forcing a download of multiple (presumably large) images? Good design techniques means balancing appearance with efficiency. And, this would be far from being efficient.

Link to comment
Share on other sites

  • 0

AJAX: Asynchronous JavaScript and XML...

Sure the AJAX part is a client-side technology, but XML is genrally used as a "live" data source, residing on a server or populated by server-side scripting. I agree it doesn't have to be, but it USUALLY is.

The images need to be loaded at some point, and I agree, not all necessarily at first page render. But jQuery can take care of that. There is no need to dynamically pull their source from a server at the time they are needed. It serves no benefit - bandwidth or otherwise.

Sorry, I still think you are referring to AJAX when you really should simply be looking at scripting (JavaScript native or jQuery).

I would:

1) Create an array of image URLS

2) Create a function that loads the next image into an actual image object if it does not already exist (thus pre-loading it) and then swaps the existing background image for this one

3) On page render, call the function with a default value to preload and swap the first image

Link to comment
Share on other sites

  • 0

Rohdekill, ajax is unnecessary and entirely bloated for the OP's request. There's a time and place for ajax and this just isn't it. If anything is far from efficient, your suggestion is just that.

To the op, what you want to try out is: Supersized. You will just need to rework the script to fit into your own personal requirements.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.