Flip images

[jkkenzie]

 

Am using this code to select images randomly for diplay on web home page. Is there a way i could make them display switching from one image to the other when someone opens the home page INSTEAD of ONLY one image displaying once.

 

I want images to flip or change by themselfs while the home page is opened.

 

<table width="356" height="69" border="0" align="center" cellpadding="0" cellspacing="0">
                                  <tr bgcolor="#ededed">
                                    <td height="50" colspan="2" valign="top"><?php
		  		  $n=rand(1,12);
					  ?>
                                        <div align="center"><img src="images/<?php $n;?>.jpg"> </div></td>
                                  </tr>
                                  <tr>
                                    <td width="4" height="19" bgcolor="#ededed"><span class="style4"> </span></td>
                                    <td width="359" bgcolor="#ededed">
								<?php
								switch($n)
								{
									case 1:
									$text = "dfgsdgfdgfdgdshfg";
									break;

									case 2:
									$text = "sfghsfgjfhjdghjgjgdfgdsf";
									break;

									case 3:
									$text = "dsfgsdfgdghfdfg";
									break;

									case 4:
									$text = "sdfghfghdjghkjljk;lplj';k'jh";
									break;

									case 5:
									$text = "sdfghfhnbfmnnv,nml;.j;.klh;.lhjkfg";
									break;

									case 6:
									$text = "dfgdhgfjhfgjhdfhgfg";
									break;

									case 7:
									$text = "fdghfgjhfghgfsdfgsdfdgsdfvdfgdfhdgh!";
									break;

									case 8:
									$text = "sdfghghfsdfgdsfdsgdfghdfgshdfhsdf";
									break;

									case 9:
									$text = "dafgdfsgdfgsdfgdsfgdsfgd!";
									break;

									case 10:
									$text = "dfgdfsgdsagdfgdsgdsgfsdgfdahdf";
									break;

									case 11:
									$text = "dfgdfhgfhgfh";
									break;

									case 12:
									$text = "ghgfhfshgsdfgdsfghgfhfsdghdfdrfg";
									break;

									default:
										$text = "sdfgdfhggfhfghfhgf";
								}

								echo "<P class='smallText'>$text</P>"; 
								?>

								</td>
                                  </tr>
                                </table>                                </td>
                            </tr>
                          </tbody>
                        </table>

 

 

Thanks in advance..

 

Regards,

Joe

[Barand]

As you need to do this on the client after the page has loaded (and PHP runs on the server) you have to use client-side scripting (javascript).

 

Moving to javascript forum

[beboo002]

check this javascript code

 

<script language="javascript">Images = new Array(9);

Images[0] = "<img src='Images/code_img1.jpg' >";

Images[1] = "<img src='Images/code_img2.jpg' >";

Images[2] = "<img src='Images/code_img3.jpg' >";

Images[3] = "<img src='Images/code_img4.jpg' >";
Images[4] = "<img src='Images/code_img5.jpg' >";
Images[5] = "<img src='Images/code_img6.jpg' >";
Images[6] = "<img src='Images/code_img7.jpg' >";
Images[7] = "<img src='Images/code_img8.jpg' >";
Images[8] = "<img src='Images/code_img9.jpg' >";


index = Math.floor(Math.random() * Images.length);

document.write(Images[index]);
</script>

 

may this code help youeach time when page refresh then images are change

[sanguinious]

This is how I have done it.

 

On the page I have a div container with two more divs to hold the images:

 

<div id="image_container">
<div id="image_one"></div>
<div id="image_two"></div>
</div>

 

By default they are set using the following css:

 

#image_one {
background-image:url('../img/image_one.png');
}
#image_two {
background-image:url('../img/image_two.png');
}

 

Then I call a js function at the bottom of the page, I call it twice as I have two images:

 

setTimeout('imageRotate(\'image_one\', 1, 1, 20000)', 10000);
setTimeout('imageRotate(\'image_two\', 1, 2, 20000)', 20000);

 

The function takes the name of the image div, ie. image_one, image_two, the next image to show, which array to use, and the time to wait.

 

This is the function:

 

function imageRotate(divId, no, arr, time) {

             // set up the two arrays	
var imgArrayOne = new Array('array1_img1.png', 'array1_img2.png', 'array1_img3.png');
var imgArrayTwo = new Array('array2_img1.png', 'array2_img2.png', 'array2_img3.png');	

             // select the chosen array and assign to imgArray variable
if ( arr == 1 ) {
	imgArray = imgArrayOne;
} else {
	imgArray = imgArrayTwo;	
}

             // select the image div object
layerObject = document.getElementById(divId).style;

             // set the background image to the new image
layerObject.backgroundImage = 'url(img/' + imgArray[no] + ')';	

             // set which image is next, if at end of array set to 0 to start from beginning
if ( no < imgArray.length-1) {	
	no++;	
} else {
	no = 0;	
}

             // set tmp var to function call with passed in values, and new image value
var tmp = "imageRotate('" + divId + "'," + no + "," + arr + "," + time +")";

setTimeout(tmp, time);
}

[jkkenzie]

 

This is the code and its not working...

 

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

div.image_one {
background-image:url('./logo.jpg');
}
div.image_two {
background-image:url('./main.jpg');
}

</style>

</head>

<body>
<div id="image_container">
<div id="image_one"></div>
<div id="image_two"></div>
</div>

<script language="JavaScript">
function imageRotate(divId, no, arr, time) {

             // set up the two arrays	
var imgArrayOne = new Array('logo.jpg', 'main.jpg', 'arrow.bmp');
var imgArrayTwo = new Array('logo.jpg', 'main.jpg', 'arrow.bmp');	

             // select the chosen array and assign to imgArray variable
if ( arr == 1 ) {
	imgArray = imgArrayOne;
} else {
	imgArray = imgArrayTwo;	
}

             // select the image div object
layerObject = document.getElementById(divId).style;

             // set the background image to the new image
layerObject.backgroundImage = 'url(./' + imgArray[no] + ')';	

             // set which image is next, if at end of array set to 0 to start from beginning
if ( no < imgArray.length-1) {	
	no++;	
} else {
	no = 0;	
}

             // set tmp var to function call with passed in values, and new image value
var tmp = "imageRotate('" + divId + "'," + no + "," + arr + "," + time +")";

setTimeout(tmp, time);


}
</script>

<script language="JavaScript">
setTimeout('imageRotate(\'image_one\', 1, 1, 20000)', 10000);
setTimeout('imageRotate(\'image_two\', 1, 2, 20000)', 20000);

</script>
</body>
</html>

[sanguinious]

Take a look at your css, you are specifying a div with the class of either image_one or image_two whereas in the code you are using ids for the divs.

 

You need to use a # (hash) instead of 'div.' eg.

#image_one {
...
}
#image_two {
...
}