Random image and table color on the welcome screen?

Ask about general coding issues or problems here.

Moderators: macek, egami, gesf

Dante Alighieri
New php-forum User
New php-forum User
Posts: 2
Joined: Fri Nov 28, 2003 5:44 am
Contact:

Random image and table color on the welcome screen?

Postby Dante Alighieri » Fri Nov 28, 2003 5:56 am

Hi!

While I was surfing the web I ran into quite an interesting website, namely of Compagnie Financière Richemont S.A. (http://www.richemont.com/). The pictures on the welcome page change with each viewing. So does the color of the center table. I know there is some php involved. But I am not sure how it's done exactly. Check this script:

<script type="text/javascript">
var myimages=new Array()

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}

preloadimages("../images/home/copyright_2002_richemont_home<? echo $iRandom ?>_thebrands_on.gif","../images/home/copyright_2002_richemont_home<?echo $iRandom?>_investorinfo_on.gif","../images/home/copyright_2002_richemont_home<?echo $iRandom?>_companyprofile_on.gif","../images/home/copyright_2002_richemont_home<?echo $iRandom?>_careers_on.gif","../images/home/copyright_2002_richemont_home<?echo $iRandom?>_contact_on.gif","../images/copyright_2002_richemont_arrow_on.gif")

function goUrl(Selected) {
var newURL = Selected.options[Selected.selectedIndex].value ;
if (newURL!=" ") {
document.location.href = newURL;
}
}
</script>

These codes should do it. But I don't know how to come to the side server scripting, which randomly picks certain images and which changes the tablecolor accordingly. Check the http://www.richemont.com site to see what I mean.

I would greatly appreciate all help :) I want to use to such a script for a non-commercial website.

:twisted: Dante :twisted:

User avatar
FliesLikeABrick
New php-forum User
New php-forum User
Posts: 7
Joined: Thu Nov 27, 2003 9:54 pm
Location: NY
Contact:

Postby FliesLikeABrick » Sat Nov 29, 2003 6:20 am

im thinking the concept of it could be as simple as choosing a random number and basing it on that....restrict the output of your random number to say, 10, because thats how many images you have, and do the same with color. then you can say
if ($random=10)
etc etc

and put a conditional for each color and image

at least thats what i would think to try

Dante Alighieri
New php-forum User
New php-forum User
Posts: 2
Joined: Fri Nov 28, 2003 5:44 am
Contact:

Postby Dante Alighieri » Sat Nov 29, 2003 9:51 am

Hi! Thanks a lot of your reply. Would you be so kind to implement your solution in my code? I am quite new to php so I am still learning :roll: But it seems you go it :) Thanks again.

Dante

User avatar
pio
New php-forum User
New php-forum User
Posts: 12
Joined: Sat Nov 29, 2003 9:58 am
Location: Oslo, Norway
Contact:

This should be a perfect solution

Postby pio » Sat Nov 29, 2003 10:50 am

I would do something like this:

If you want to randomize two pictures and the table background-color, make three arrays:

$pic1 = array('image1.gif','image2.jpg','image2.png');
$pic2 = array('image4.gif','image5.jgp','image6.png');
$color = array('#FF0000','#00FF00','#0000FF',);

of course you will use your own filenames and colors. Just make sure there is an equal amount of entries in all of the arrays. The pictures should have the same position in the arrays as the background-color you want has in the $color-array. Above, image2 and image5 will get bg-color #00FF00...

Then, on page load (put the code in the HEAD-section of the document) you can get random, but corresponding, images and colors using PHP's rand()-function:

$number = rand(0,2);

This will return a random integer between and including 0 and 2, which is good since our arrays has three entries each and starts counting at zero. We can now fetch the filenames and color-value using the $number-variable:

$bgcolor = $color[$number];
$img1 = $pic1[$number];
$img2 = $pic2[$number];

In the BODY of the document, you can now output the data like this:

<table bgcolor="<?php echo $bgcolor; ?>">
<tr><td>
<img src="your.web.site/yourfolder/<?php echo $img1; ?>">
<img src="your.web.site/yourfolder/<?php echo $img2: ?>">
</td></tr>
</table>

If you want to preload your pictures with javascript, you can do this like you would with an ordinary HTML-page, without any relation to the PHP code..

Hope this is any help :)
Last edited by pio on Sat Nov 29, 2003 10:55 am, edited 1 time in total.

User avatar
pio
New php-forum User
New php-forum User
Posts: 12
Joined: Sat Nov 29, 2003 9:58 am
Location: Oslo, Norway
Contact:

just the code

Postby pio » Sat Nov 29, 2003 10:54 am

put this in the HEAD-section:

<?php

$pic1 = array('image1.gif','image2.jpg','image2.png');
$pic2 = array('image4.gif','image5.jgp','image6.png');
$color = array('#FF0000','#00FF00','#0000FF',);

$number = rand(0,2);

$bgcolor = $color[$number];
$img1 = $pic1[$number];
$img2 = $pic2[$number];

?>

put this in the BODY-section:

<table bgcolor="<?php echo $bgcolor; ?>">
<tr><td>
<img src="your.web.site/yourfolder/<?php echo $img1; ?>">
<img src="your.web.site/yourfolder/<?php echo $img2: ?>">
</td></tr>
</table>


Return to “PHP coding => General”

Who is online

Users browsing this forum: Yahoo [Bot] and 2 guests