Welcome to WebmasterWorld Guest from 54.224.63.26

Forum Moderators: open

Message Too Old, No Replies

Rotating images

     
10:31 pm on Aug 13, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 21, 2002
posts: 1541
votes: 0


These days people tend to avoid flash, so what is the best alternative method for having e.g. a banner with some rotating images?
2:06 am on Aug 14, 2012 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:10553
votes: 13


one option is an animated gif.

using javascript you could cycle through an array of similar-sized images, replacing the src attribute value of an image element at regular intervals sufficient to simulate animation or rotate at a readable speed as required.
you might also want to preload those images into browser cache so that the first cycle of animation isn't slowed by the individual image downloads.
8:51 am on Aug 14, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13210
votes: 347


OK, I give up. Do you mean "rotating" as in revolving (turning or visibly moving), or do you mean "rotating" as in cycling through a rota of images at intervals of 10 seconds or a minute?
10:04 am on Aug 14, 2012 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:10553
votes: 13


it's essentially the same problem, just the display time of each image changes.
6:47 pm on Aug 14, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


Aside of the problems with flash ...

Is it also not a reaction of the visitors that the web designers want to avoid: the more it moves, the faster the visitor looks for the back button ?


You have other options: transitions in css is about the first I come up with, but other options exist as well such as svg animation (yeah, "that" browser won't do svg to start with)

Ref:
CSS3 transitions: [w3.org...]
SVG animation: [w3.org...]
9:14 pm on Aug 14, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 21, 2002
posts: 1541
votes: 0


I mean rotating as in cycling through images, perhaps the image also contains some text on top of it, is hyperlinked, and has back and forward buttons to scroll through the images.
This is fairly simple stuff though right?
4:30 am on Aug 15, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:925
votes: 21


The web is full of JavaScript slideshows that will do that. Search on "JavaScript slideshow captions".