Presumably, which points out a recurring problem: because we don't
know the OP's intended use, vis-à-vis actual markup and CSS, etc.
everything we suggest is somewhat academic. There's a tradeoff with
modifying style rules vs. using class names. If you find yourself
having to alter too many styles, it can become cumbersome and more
prone to errors (and your presentation layer is now beginning to
pollute your behavior layer). Class names allow you to roll up several
styles into one 'package' as well as take advantage of CSS hierarchy
(which you could use e.g. to affect the results of the js modification
to the style).
For the OP's situation, i.e. changing a background image, it might be
even more efficient to use a sprite-- a single image (so you'd only
have a single http request), and re-position the image on each
rotation. That could be done in the JavaScript as you suggest, but I'd
still prefer to abstract it to classes rather than have to keep
position information in the js:
.img1,.img2, .img3,.img4,.img5 {
background-image:#fff url(some_image_url) 0 0 no-repeat;
}
.img2{
background-position:0 100px;
}
.img3{
background-image:50px 0;
}
etc...
Since it's presentational, it feels better to me to change the image
positions (e.g. if I decided to update the size of the image) in the
CSS, or perhaps add a different background-color to each style in case
the image (if individual ones are used) is missing. Changing the
latter along with the image url in the js is where it would begin to
get cumbersome I think. I think the fact that everybody has a
different approach makes it very interesting though; I hope the OP can
see at least that there are many ways to come at the same problem.
On Mar 22, 7:12 pm, RobG <rg...@iinet.net.au> wrote:
> On Mar 20, 10:15 pm, Alexandru Dinulescu <alex.d.a...@gmail.com>
> wrote:
>
> > Hello.
>
> > I have a huge question. I need something that rotates classes each 5 seconds
> > for ex
>
> > I have a <div class="img1"> </div>. I want each 5 seconds the class to be
> > changed from img1 to img2, and so on so at the start an array should be
> > placed like
> > imgArray = [ "img1" , "img2", "img3", etc ]
>
> > I need css classes changed not a plain image since the image is a
> > background image and i have text on it.
>
> Presumably there can be any number of div's with a class name of
> "img1", etc. The most efficient method is to modify the style rule
> for the class, not the class name of all the elements that might have
> it. Then changing the style will take the same amount of time
> regardless of how many elements are involved.
>
> --
> Rob
