PDA

View Full Version : Simple HTML question!


jaketo
26-04-2006, 09:27 PM
Yo!

If you imagine a very simple webpage just designed to display a single image, for example -

<html>
<img src=http://www.website.com/image01.jpg>
</html>

- is there a simple way to randomise the image that is displayed?

For example, if the folder contained ten images named image01.jpg to image10.jpg, to display a random one of these images every time the page reloads?

Just curious! ;)

J

Lebanese_Falcon
26-04-2006, 09:30 PM
I think u can, i am studyin C++ now, and there is a random number generator, so i think if someone is expert with C++.net (which is for the internet), they can help u..

Hope it works well..

pilot
26-04-2006, 11:03 PM
here is some javascript found by just a simple google search hope it helps. *note javascript works with html so no special extentions are needed for the server.

<script language="Javascript">
<!--
// please keep these lines on when you copy the source
// made by: Nicolas - http://www.javascript-page.com

var currentdate = 0
var core = 0

function StringArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '

}
}

image = new StringArray(10)
image[0] = '0.gif'
image[1] = '1.gif'
image[2] = '2.gif'
image[3] = '3.gif'
image[4] = '4.gif'
image[5] = '5.gif'
image[6] = '6.gif'
image[7] = '7.gif'
image[8] = '8.gif'
image[9] = '9.gif'

var ran = 60/image.length

function ranimage() {
currentdate = new Date()
core = currentdate.getSeconds()
core = Math.floor(core/ran)
return(image[core])
}

document.write("<img src='" +ranimage()+ "'>")

//-->
</script>

Lebanese_Falcon
26-04-2006, 11:18 PM
i think it might now work, not sure though..

cz as i know, arrays are declared like this []. not (), so this:
image = new StringArray(10)

will be
image = new StringArray[10]

and also it should be 9, cz the tenth array won't be used, so again:
image = new StringArray[9]

but hey, try it, if it doens work, then try editing what i said...
but dont rely on me :p i took 50/100 in my c++ exam :p

StrikerForce1
26-04-2006, 11:24 PM
try

<script language="javascript">
<!--
var random_img = new Array ("img1.ext", "img2.ext",
"img3.ext", "img4.ext", "img5.ext", "img6.ext", "img7.ext", "img8.ext", "img9.ext");
var i = Math.round(9*Math.random());

document.write('<IMG SRC="' + random_img[i] + '"
width="100" height="100">');

-->
</script>

IMG SRC would be where you have your images stored... asuming its all in photobucket for exmple, you just add the first part of the link which should be the same for every image, and random_img will complete the link and display your random image.
i beleive it should work.... you can change width and height value as well up there. and urm.. dunno, i havent really used js in a while.... if someone finds anything wrong just correct it :p

what lebfalcon says is tru, arrays start from 0 (zero indexed bahaha) ;p

code skeleton stolen from the web

jaketo
28-04-2006, 02:30 PM
Thanks all for your replies, now got it working nicely, taking bits from all your suggections and some of my own! :D

I've never used Javascript before, might have to play around some more with that;)

(I don't normally need to do much coding, my involvement usually only extends to debugging other people's code to get it working on hosting platforms that I build and manage!)

Lebanese_Falcon
28-04-2006, 06:23 PM
Great it worked :D

TapaGeuR
28-04-2006, 07:55 PM
I'd say that the best way to do this is to make PHP scripts that read a directory on the server and pick a random image in the list and you display it.

Be carefull with this method cause if you use a lot of images and the page is requested a lot, it might cause performance problem with the server.

Use this PHP function to get a random image and use the output in your HTML file.
// ===========================================================================
// | NOM : randomImage
// | ENTRÉES : $dirName - Path to the image directory.
// | SORTIES : None - (except return)
// | RETOUR : $result - Name of the random file selected.
// |
// | DESCRIPTION : Select a random image from a directory. Please note that
// | this function only works with *.jpg for the moment.
// ===========================================================================
function randomImage( $dirName )
{
// Open the directory
$cursor = opendir($dirName);

// List all the random images
$counter = 0;
while( false !== ( $file = readdir( $cursor ) ))
{
$allfile[ $counter ] = $file;
// DEBUG
// echo "<p>File ".$counter." ".$file."</p>";
$counter ++;
}

// Select the randon image
// Remove . and ..
// Verification to check if it is a valid image file
$result = "not-an-image";
while( !strstr( $result, ".jpg" ))
{
$min = 2;
$max = $counter - 1 ;
srand( (double) microtime() * 1000000 );
$posImage = rand( $min, $max );
$result = $allfile[ $posImage ];
}
// Fermeture du repertoire
closedir( $cursor );
return $result;
}
// === END - randomImage ===

<?php require_once("path-to-php-file-that-have-the-function"); ?>
<html>
<?php
$img = randomImage( "path-to-the-dir-with-images" );
echo '<IMG SRC="path-to-the-dir-with-images/'.$nomImage2.'">'; ?>
</html>

Ok, i've wrap this up really quickly and might have some small errors. I don't know if you know php and if it help but here it is.

The main advantage of this is that you only have to add/remove images from the directory and it still works, no need to edit the code!

TapaGeuR

pilot
28-04-2006, 11:45 PM
I'd say that the best way to do this is to make PHP scripts that read a directory on the server and pick a random image in the list and you display it.

TapaGeuR

that would be good except it would require him to install some server side software or if someone else is hosting it then they may not have the php extentions active

jaketo
29-04-2006, 08:50 AM
I'd say that the best way to do this is to make PHP scripts that read a directory on the server and pick a random image in the list and you display it.

Thanks TapaGeur

That does actually look like a really cool way to do it, but as Pilot says, that might require some server-side software and that's moving beyond the scope of this very small project :D

Thank you all for your input on this! :)