Is there any way to cycle images on a website using CSS?

[thereds]

Need a different image to show up, lets say, everyday.

Currently, the url of the background image (the one that has to change everyday) is retrieved from CSS. Don't want to put it in the main page php code as that's going to mess up things.

Ideas?

 

[thereds]

?

 

[Atheus]

No idea if you can do it just with CSS, but you can if you use javascript too...

 

[Zugzwang152]

the best way to do this is with javascript. you can do it with a server-side scripting language, but that would require unnecessary refreshes, wasting bandwidth.

CSS cannot do this alone.

 

[thereds]

Well my css stylesheets holds the background image, and from what I've read javascript can't be used within css to work across both mozilla and ie.

Anyway to use both and make the page work?

 

[wallsfd949]

Write your stylesheet with php, then incorporate the logic into the php stylesheet.

This may not be exactly what you are looking for but it will probably get you in the right direction.

 

[thereds]

Yea, that's like greek to me

 

[notfred]

CSS is not a programming language, so it doesn't have things like a random number generator or counters, or any other way to select one image from a list of images. You will need to use javascript or a server-side language to do this. It would be pretty easy to do with iether Javascript or PHP.

 

[Chosonman]

If you don't want to use server side scripting you can do it using a random generator writen in JavaScript.

You could do something like this:

<script language="javaScript">

var bg_Image = new Array(5);
bg_Image[0]="tiger_img";
bg_Image[1]="lion_img";
bg_Image[2]="elephant_img";
bg_Image[3]="monkey_img";
bg_Image[4]="zebra_img";

var ranNum = Math.round(Math.random()*5);
var theImage = bg_Image[ranNum];

document.writeln("<style>")
document.writeln(".elementName{ background-image: url(" + theImage + ");}")
document.writeln("</style>")

</script>

I haven't tested this script but this is what you can do.

 

[thereds]

Originally posted by: notfred
CSS is not a programming language, so it doesn't have things like a random number generator or counters, or any other way to select one image from a list of images. You will need to use javascript or a server-side language to do this. It would be pretty easy to do with iether Javascript or PHP.

Can you explain how...

This is the code in my stylesheet:
.header {
margin: 1px 0px;
padding: 0px;
display: block;
width: 778px;
height:98px;
background: url('header.png') no-repeat bottom center;
background-color: #9DA7AF;
border: 1px solid #D6D3CE;
cursor: pointer;
}

header.png is what I will need to change, as you would have probably guessed.

This .header is called from my header.php file by <div class="header">

Now...?

 

[Chosonman]

Originally posted by: thereds

Originally posted by: notfred
CSS is not a programming language, so it doesn't have things like a random number generator or counters, or any other way to select one image from a list of images. You will need to use javascript or a server-side language to do this. It would be pretty easy to do with iether Javascript or PHP.

Can you explain how...

This is the code in my stylesheet:
.header {
margin: 1px 0px;
padding: 0px;
display: block;
width: 778px;
height:98px;
background: url('header.png') no-repeat bottom center;
background-color: #9DA7AF;
border: 1px solid #D6D3CE;
cursor: pointer;
}

header.png is what I will need to change, as you would have probably guessed.

This .header is called from my header.php file by <div class="header">

Now...?

I spend my time writing this code for you, not even a thanks, or any acknoledgement? That's the last time I help you...

You need to use javascript... THE END

 

[thereds]

Originally posted by: Chosonman

Originally posted by: thereds

Originally posted by: notfred
CSS is not a programming language, so it doesn't have things like a random number generator or counters, or any other way to select one image from a list of images. You will need to use javascript or a server-side language to do this. It would be pretty easy to do with iether Javascript or PHP.

Can you explain how...

This is the code in my stylesheet:
.header {
margin: 1px 0px;
padding: 0px;
display: block;
width: 778px;
height:98px;
background: url('header.png') no-repeat bottom center;
background-color: #9DA7AF;
border: 1px solid #D6D3CE;
cursor: pointer;
}

header.png is what I will need to change, as you would have probably guessed.

This .header is called from my header.php file by <div class="header">

Now...?

I spend my time writing this code for you, not even a thanks, or any acknoledgement? That's the last time I help you...

You need to use javascript... THE END

Dude, like I said...I've tried the javascript route. It won't work.

Thanks though.

 

[statik213]

Originally posted by: thereds

Originally posted by: notfred
CSS is not a programming language, so it doesn't have things like a random number generator or counters, or any other way to select one image from a list of images. You will need to use javascript or a server-side language to do this. It would be pretty easy to do with iether Javascript or PHP.

Can you explain how...

This is the code in my stylesheet:
.header {
margin: 1px 0px;
padding: 0px;
display: block;
width: 778px;
height:98px;
background: url('header.png') no-repeat bottom center;
background-color: #9DA7AF;
border: 1px solid #D6D3CE;
cursor: pointer;
}

header.png is what I will need to change, as you would have probably guessed.

This .header is called from my header.php file by <div class="header">

Now...?

you don't actually 'call' header, header isn't a function.....

from the article the other guy linked, make sure to ....

1. Rename your style.css file to style.php, then add the following to the top of the file:

<?php header("Content-type: text/css"); ?>

This line tells the browser that the file is CSS instead of HTML.
2. In your HTML files, change the stylesheet references from style.css to style.php. For example:

<link rel="stylesheet" type="text/css"
media="screen" href="style.php">

write a function that randomly returns an image based on whatever u want, place it at the top of ur php/css file..
<?php
function someFunkyRandomImageFunction(){
// magic!
return "foo.jpg";
}
?>

and change your CSS:

.header {
margin: 1px 0px;
padding: 0px;
display: block;
width: 778px;
height:98px;
background: url('<? echo someFunkyRandomImageFunction();?>') no-repeat bottom center;
background-color: #9DA7AF;
border: 1px solid #D6D3CE;
cursor: pointer;
}

Remember that this isn't using CSS to change the image, it's using PHP to change ur CSS stylesheet which has the effect of changing the image.
not the best way of doing things if ur site has very high volume

 

[MrChad]

Here you go. Cycles between four images, depending on the day. Let me know if you specific questions about modifying it.