Random images in CSS

CitricAcid · #1 04-12-2008

I am trying to edit and change a theme applied to a Coppermine gallery. I have some basic knowledge of HTML, but that's all.

HTML Code:

.header{ 
background: url(images/headerbg.gif) no-repeat; 
width: 760px; 
height: 143px; 
float: left; 
}

I want to replace the code so that the image is random. Here is the code:

HTML Code:

<? 
$imgs = array("image1.gif", "image2.gif", "image3.gif"); 
srand ((double)microtime()*1000000); 
shuffle($imgs); 
echo '<img src="repertoireimages/' . $imgs[0] . '" BORDER = "0" alt="" />'; 
?>

The problem is that PHP, and this stylesheet has difficulty with the code. Someone have an idea to display a random image? Or even change the picture every day?

Lemog · #2 04-12-2008

Sorry mate but we can not do CSS dynamic. In your case, you can make CSS to set the format for this image against what will appear from the PHP

sergioKomic · #3 04-12-2008

Overload your style in your page header PHP directly into the tag.

HTML Code:

<? 
$imgs = array("image1.gif", "image2.gif", "image3.gif"); 
srand ((double)microtime()*1000000); 
shuffle($imgs); 
?>

... 
<div style="background: url(<?echo 'repertoireimages/' . $imgs[0]; ?>) no-repeat"> 
...

CitricAcid · #4 04-12-2008

Well, I'll consider that, for all you say is to change the header of my Coppermine gallery. The image is placed by the CSS, hence my question.

sergioKomic · #5 04-12-2008

In fact, rather than putting the image via CSS, it must be placed directly on the page via a php style always.

You want in your page .php tag that contains the words "class = header" and put in this tag

HTML Code:

class="header" style="background: url(<?echo 'repertoireimages/' . $imgs[0]; ?>) no-repeat">

knowing a little higher on the page you wrote this script that will make a shuffle images on the table

CitricAcid · #6 04-12-2008

Well, I just turned but the different DIV bother me (not to the desired image in the background) and I am back on good old tables!

Now it is impossible to eat my random image in the background of the table.

HTML Code:

<script language="JavaScript"> 
banner(); 
</SCRIPT>

In the image field background of the table ... I see it "banner ();

How?

sergioKomic · #7 04-12-2008

On your index.php add the following code:

PHP Code:

  <?php 

$imgs = array("image1.gif", "image2.gif", "image3.gif"); 

srand ((double)microtime()*1000000); 

shuffle($imgs); 

?>

then

PHP Code:

 
<script LANGUAGE="JavaScript"> 

function changeFond() { 

document.getElementById("maTableHeader").style.backgroundImage='url(<?php echo $imgs[0]?>)' 

} 

</script>

then this:

PHP Code:

  <body onload="changeFond()">

and finally in the page where your table is described must be added

PHP Code:

  <table width="860" height="143" id="maTableHeader">

CitricAcid · #8 04-12-2008

Hey perfect, thank you very much!

I just go with this code without much understanding, hope it will help me!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads for: "Random images in CSS"
Thread	Thread Starter	Forum	Replies	Last Post
Generate some quality of random number via Random Number Generation function	aMADeO!	Windows Software	4	13-01-2012 05:07 PM
How to add images to Google Images	Monty1	Tips & Tweaks	2	14-02-2011 01:15 PM
Random images appear while playing BattleField Bad Company 2	$Beyonce$	Video Games	3	23-11-2010 10:03 PM
How to use "Math.random()" to generate a random number in JavaScript?	Silent~Kid	Software Development	5	03-02-2010 05:06 AM
PHP Random image 3 images in a row	fastrod	Software Development	4	09-03-2009 01:40 PM