Jump to content

Rotating My Header/banner Using Css


stkr
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...