Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Banner that cycles/Fades through multiple images

2:13 pm on Dec 22, 2011 (gmt 0)

New User

10+ Year Member

joined:Feb 10, 2005
posts: 7
votes: 0

Hi Guys,

I'm a complete ignorant when it comes to anything to do with web graphic design.. What I do know is that I want to create a banner for my website.

I want it to cycle through 5 or so images with a fade effect like you would find in say an online slideshow, I then want my websites title to lay over said images.

I'm guessing i'll need to make a high quality gif or somthing of the like.

I have photoshop installed, but as I mentioned before, I'm not exactly competent.

Thanks for any help!

5:05 pm on Dec 22, 2011 (gmt 0)

Senior Member

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

joined:Nov 28, 2004
votes: 0

1. Graphics editor (GIMP is free) - you can use any image format (.jpg, .gif, .png)
2. A little knowledge of HTML
3. A little knowledge of CSS
4. Even less knowledge of Javascript

Create all your images at the same size and include them in a page. You can use any image editor, all you need to do is size them at 700 pixels wide or so (not much larger than that.)

The most simple slide show solution: look at some of the jQuery (javascript) slide shows. Include the jQuery library in your document and try one of them.

They are very easy to understand and all of them have examples. Most of them use absolute positioning, which basically means it constructs the slide show in "layers." The layers are assigned by the CSS property z-index, where the higest number is the "topmost layer"


z-index: 5000

Then you just position your heading layer on top of the slide show.
6:32 pm on Dec 22, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
votes: 77

Check Hot Scripts [hotscripts.com] for free banner and slideshow scrips.

8:00 pm on Jan 2, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 4, 2004
votes: 3

I'm guessing i'll need to make a high quality gif or somthing of the like.

You can use an animated .gif and avoid all the CSS, JS etc but it's not something I'd recommend. The file size is going to be much larger and if you wanted to do a fade effect absolutely huge. If the images are photo type image then the quality suffers too. If you want to try it here's some basic directions.

You'd create your images then save as .gif, not hugely important at this point but the following conversions should have little impact on them and you can allow the the photo software to control final quality. Import into some video software like that will allow you to export custom sized video using lossless format, Video Studio used to allow this and has fee 30 day trial last I checked. Set a transition between each image. Set the last image the same as the first and halve their display times.

Export the video using lossless format like uncompressed AVI and Import into Virtualdub which will allow you to export animated gif.

There's better ways to go about this but this is easiest method I can think of. You can do it all in Virtualdub but that's a bit of learning curve. Ultimately your best bet is to avoid it altogether because of the file sizes.

As far as image formats go you can break them down for what the use is:

gif pro's: great for anything that does not need a lot of color, has sharp edges you want to maintain like text, and large areas of the same color. For example screen shots of web pages like this one. You'll keep the edges of the text as sharp as the original and get much smaller file size than even .jpg. Gif also supports animation and transparency. They are lossless and can be opened and resaved without any effect on quality assuming you do not screw up the color pallette.

Cons: Only 256 colors and not very good for photo type images and when used with photo type images the file sizes balloon to much larger ones than using .jpg. The transparency is either fully transparent or not, you may have in the past seen icons with white fringe on dark background? That's because the icon was designed for light colored background.

jpg pros: Great for photo type images and can produce very small file sizes for them. The quality is adjustable. Higher quality gives you larger file sizes, lower quality gives you smaller file sizes.

jpg cons: Only good for photo type images. :P They are lossy images so opening and resaving them will result in resampling. You image will suffer if you do this a lot especially along edges of sharply contrasting color.

Png pros: Great for photos or any type of content really, the format is lossless. One really nice feature about .png is alpha transparency. The color can be transparent in the full sense of the word allowing colors behind the image to partially or fully bleed through. Why that is important is because with gif's you have to match the fringe of the image to the background, change your background and all your images are worthless. Not so when using .png with alpha transparency.

png cons: Larger files than .jpg for photo type images but that is the price you pay for lossless images. Overall they are not huge and most certainly the format of the future unless something else comes along.
5:17 pm on Jan 14, 2012 (gmt 0)

New User

5+ Year Member

joined:Jan 8, 2012
posts: 2
votes: 0

You can use PNGCRUSH to reduce the size of your lossless PNG's. Wikipedia has a decent entry on PNGCRUSH.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members