Rotating My Header/banner Using Css

[stkr]

Hello everyone !What I am basically trying to do is have the header/banner on my website switch out every time someone changes pages or refreshes their current page. It's kind of boring seeing the same image when you view a site, so I'm thinking that this will be a welcome change. I'm using CSS, so I posted it in here hoping that someone could give me a simple solution. I am not a HTML or CSS wizard by any means, so I would appreciate it if it were explained in the most simplistic way possible.

#splash {	width: 791px;	height: 316px;	margin: 0 auto;	background: url(images/banners/WOTWBanner.jpg) no-repeat;}

That's the code for the banner.Here is my website: http://lostvalley-photography.com/index2.htmlI'm a photographer, so I really want my photographs to be seen around the site without bombarding a visitor with images all over any one page.I appreciate all help.

[jlhaslip]

Nope, CSS can't do this.Either Server-side scripting (php or asp) or Client side (javascript) are needed.Html is used to structure and present the content of your page, CSS is used to style the content. Server side scripting or javascript are what you use to affect the content on the page aside from the style. Changing content is a behavioural thing.

[stkr]

Thanks for the quick reply . Can you recommend any scripts/codes that would allow me to do this?

[jlhaslip]

Well, I lean towards using php. I have a rotation script someplace around here that I can post back.What format are your images? gif, jpg, png, all of the above?

[stkr]

They are all .jpg .

[jlhaslip]

Okay, stand by. I'll need a few minutes to find it. It is on a Thumbdrive. be right back.

[stkr]

Thanks so much . I appreciate the help.

[jlhaslip]

Okay, here is how this script works:1. create a folder named image.jpg ( exactly correct... a folder with and extension name)2. create a file named index.php inside the folder and add the code found below to that file. Save the file.3. upload the jpg images for the rotating banner into the folder also. check that they all have the same extension (.jpg)4. use an image tag to call the "folder" as an image. (adjustdetails to suit):

<img src="./image.jpg" height="40px" width="800px" alt="alternate information here" title="title info here" />

What happens is: when the folder gets called as an image, the index.php script goes to work selecting all the jpg's it finds in the folder, if there are more than one .jpgs in the folder, it randomly selects one to present. There is an error trap that creates an image if the script can not find a .jpg, but as long as even one jpg is there, it works fine.Script code for your index.php inside the image.jpg folder:

<?php$filesj = glob('*.jpg');if(empty($filesj)){echo 'no images found...die<br />';die();}else{foreach ($filesj as $file) {$img_array[] = trim($file);}}shuffle($img_array); //select image at random$image = $img_array[0];$image = imagecreatefromjpeg( "$image" );if (!$image) { /* See if it failed */		header("Content-type: image/png");		$im = imagecreatetruecolor (150, 30); /* Create a blank image */		$bgc = imagecolorallocate ($im, 200, 200, 255);		$tc = imagecolorallocate ($im, 0, 0, 0);		imagefilledrectangle ($im, 0, 0, 150, 30, $bgc);		/* Output an errmsg */		imagestring ($im, 1, 5, 5, "Error loading Image", $tc);		imagepng($im);		imagedestroy($im);		die();	}header("Content-type: image/jpg");imagejpeg ($image);imagedestroy($image);?>

Hope it helps.

[stkr]

Wow, thanks so much! I'll give it a try...

[stkr]

Sorry for the double-post, but I'm a little unsure of something. I've done everything, but I'm not sure where this code is supposed to go:

<img src="/design/image.jpg" height="316px" width="791px" alt="alternate information here" title="title info here" />

Does it go into the CSS file...or the html file for the actual page? :S

[jlhaslip]

in the html page where you need the image for the banner.

[stkr]

Hmm...but what if there isn't a designated part of the html for the banner? The link for the banners are all in the CSS files.

[jlhaslip]

Just noticed that you were using a background image. My bad...Place the image code in the #splash div in the html page and remove the background-image from the #splash CSS rule. The height and width could stay in the CSS rule as well. The rule should change to something like:

#splash img {	width: 791px;	height: 316px;	margin: 0 auto;}

[stkr]

Okay, I got it . Thanks so much! One last thing, though. It a drop in image quality supposed to happen? It's not a huge drop or anything, but I'm just wondering.

[jlhaslip]

No, the script does not affect the image quality what-so-ever. It simply finds what is there and displays it.Are the images full-size when you put them into the folder? If the css is re-sizing them the quality may be affected by the resizing.Better to have them as close to full-size as possible if quality is a concern. As long as bandwidth is not an issue, or dialup users don't complain.Are you still using the same link as a test case? http://lostvalley-photography.com/index2.html

[stkr]

Hmm, no the CSS is set to the same exact size. If it's not the script then I'll have to just have to look around and see if I did something wrong. Either way, it's nothing major, but there is some slight pixelation around the text. It's nothing that someone else would notice. Thanks for all of your help. It is greatly appreciated .EDIT: No, I tested it out on http://dsn.lostvalley-photography.com/gallery.html since no one has access to it yet . I didn't want to test it on a page someone might actually visit.

[jlhaslip]

Don't know what to say about the text. Looks okay to me. Jpg is not a "lossless" format. They deteriorate, apparently due to its compression format. Might want to try png instead.I have another version of the same script for png's if you want it. But IE6 whines about png's... can't win some times...

[stkr]

No, it's really fine . I have a habit of looking too closely with some things. Besides, the tradeoff is worth it. If anything, I'll just try to reupload them without being compressed as much.