JavaScript - Random Image Script Help

Hi guys,

Could do with a bit of help! I've found this code elsewhere and am currently using it to load 5 random pages that automatically refresh to another in the array after 10 seconds. This works great. But is there a way of altering this code so it doesn't repeat any of the pages - atleast until it's displayed each page once?

At the moment it can display 'page5' 3 or 4 times before I even see 'page2' for example - which is annoying!

Code:

<script type="text/javascript">
<!--
Array.prototype.random = function () {return this[Math.floor(Math.random() * this.length)]}

Date.ONE_SECOND = 1000;

url = 
['page1.html', 'page2.html', 'page3.html', 'page4.html', 'page5.html',]

setTimeout('location = url.random()', 10 * Date.ONE_SECOND)
// -->
</script>

I'm very new to all this, so I aplogise if this is all very obvious!

Hey folks..

Hope you can help, I'm completely new to this and have no knowledge at all when it comes to javascript. Have been using this script on my site for a while. Is there anyway I can add a URL link to the images that are in my selector? When clicked would go to that page on my website.

Thanks in advance of any help

Nat


<script language="JavaScript">

/*
Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
For this script and more, visit http://www.javascriptkit.com
*/

var delay=10000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

randomimages[0]="http://www.anywebsite.com/images/splash1.jpg"
randomimages[1]="http://www.anywebsite.com/images/splash2.jpg"
randomimages[2]="http://www.anywebsite.com/images/splash3.jpg"
randomimages[3]="http://www.anywebsite.com/images/splash4.jpg"
randomimages[4]="http://www.anywebsite.com/images/splash5.jpg"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

I am stuck on some javascript homework I realize it is probably really easy but my stupid textbook is not clear on one point. I have to access code in an external javascript page (random.js) which I have done. But then i have to create a second script element to create the function showlmg() and within that I require statements to declare a variable named imgNumber equal to the value returned by the randomInteger() (which is from the external sheet found in data files from the textbook therefore I know they are right). I am supposed to use 9 as the value of the size parameter in the randomInteger() function. The second statement should be command that writes the following text to the document: <img src='imgNumber.jog' alt= ' '/>. So basically the coding I have done is :

Code:

<script type= "text/javascript" src= random.js"> </script>
<script type="text/javascript">
        function showlmg() {
		
		var imgNumber= randomInteger(9);// Return a random number from 0 to 9.
		document.write("<img src='imgNumber.jpg' alt=''/>");
		}
     </script>

all in the head of the document and then
Code:

function randomInteger(size) {
   return Math.floor((size+1)*Math.random());} from the external file.

and

Code:

<tr>
   <td colspan="2" class="center">
   <script type= "text/javascript">
   showlmg();
   showlmg();
   showlmg();
   showlmg();
   showlmg();
   </script>
   </td>
</tr>

to post in a table on the page... I believe the issue is in the declaring a variable the is equal to the result of the function random integer which the text book or anywhere that I can find online fails to explain how to do. Thank you.

Hello, I need help again :3
Heres what I need: I need some javascript to random a script. Simply like this:
The script randoms a number
Based on the number it runs some lines of PHP script.

Random 1-10
If 1
Then run this PHP script
*PHP script*
*PHP script*
*PHP script*
*PHP script*
If 2
Then run this PHP script
*Different PHP script*
*Different PHP script*
*Different PHP script*
*Different PHP script*
If 3
Then run this PHP Script
*some more different PHP Script*
*some more different PHP Script*
*some more different PHP Script*
*some more different PHP Script*
If 4 etc etc etc

Each bit of PHP Will be similar, but be different in some ways. There may be more compressed ways of doing this. But if it at all possible, I would like it in the way I wrote it above. For instance I dont want:

Random 1-3
If 1 Run function 1
If 2 Run function 2
If 3 Run function 3
Function 3
*PHP Script*
*PHP Script*
*PHP Script*
Function 1
*PHP Script*
*PHP Script*
*PHP Script*
Function 2
*PHP Script*
*PHP Script*
*PHP Script*

I will thank the best answer! This website is awesome and has answered so many of my questions! Thanks in advance!

Random non-repeating images script.

Hope this helps someone... you can see an example at http://www.empireelite.org/. Refresh and you'll see the PS3 boxarts on the top left will show randomly, with no repeats.

In your html page
in head tag
Code:

<style>
img.boxart{
margin:0;
border: none;
display:block;
float:left}</style>
<script type="text/javascript" src="ps3boxart.js"></script>

in body tag (place whereever in the body you want the pictures to show)
Code:

<script type="text/javascript"> 
randomorder(ps3ba, '') 
</script>

In a seperate .js file in the same folder (this one I have as ps3boxart.js)
Code:

var ps3ba=new Array()
ps3ba[0]='<a href="http://www.amazon.com/God-War-III-Playstation-3/dp/B000ZK9QCS/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261056951&sr=8-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/gow3.jpg" class="boxart" title="God of War III"></a>'
ps3ba[1]='<a href="http://www.amazon.com/Heavy-Rain-Playstation-3/dp/B002CZ38KA/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059415&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/hr.jpg" class="boxart" title="Heavy Rain"></a>'
ps3ba[2]='<a href="http://www.amazon.com/Killzone-2-Playstation-3/dp/B000FQBF1M/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059510&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/kz2.jpg" class="boxart" title="Killzone 2"></a>'
ps3ba[3]='<a href="http://www.amazon.com/LittleBigPlanet-Game-Year-Playstation-3/dp/B002ELCUUG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059556&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/lbp.jpg" class="boxart" title="LittleBigPlanet"></a>'
ps3ba[4]='<a href="http://www.amazon.com/Metal-Gear-Solid-Patriots-Playstation-3/dp/B000FQ2D5E/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059605&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/mgs4.jpg" class="boxart" title="Metal Gear Solid 4"></a>'
ps3ba[5]='<a href="http://www.amazon.com/Ratchet-Clank-Future-Crack-Playstation-3/dp/B00275A7LI/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059662&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rcfacit.jpg" class="boxart" title="Ratchet & Clank Futu  A Crack In Time"></a>'
ps3ba[6]='<a href="http://www.amazon.com/Resistance-Fall-Man-playstation-3/dp/B000JLIXIG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059703&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rfom.jpg" class="boxart" title="Resistance: Fall of Man"></a>'
ps3ba[7]='<a href="http://www.amazon.com/Uncharted-Drakes-Fortune-Playstation-3/dp/B000UW21A0/ref=sr_1_2?ie=UTF8&s=videogames&qid=1261059750&sr=1-2"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc.jpg" class="boxart" title="Uncharted: Drakes Fortune"></a>'
ps3ba[8]='<a href="http://www.amazon.com/Uncharted-2-Among-Thieves-Playstation-3/dp/B001JKTC9A/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059750&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc2.jpg" class="boxart" title="Uncharted 2: Among Thieves"></a>'

function randomorder(targetarray) {
  var randomorder=new Array()
  var the_one
  var z=0
  for (i=0;i<targetarray.length;i++)
  randomorder[i]=i

  while (z<targetarray.length) {
    the_one=Math.floor(Math.random()*targetarray.length)
    if (targetarray[the_one]!="_selected!"){
      document.write(targetarray[the_one])
      targetarray[the_one]="_selected!"
      z++
    }
  }
}

Then obviously, you would use this as a baseline and change your .js file name to whatever your pictures are for, like ads.js or whichever. Change the links in ahref to whereever you want each page to link. Change the image locations in img src to whereever your images are saved. Remember, where it says var z=0... this is where you hide extra random images. For example, my 200px cell only fits 9 22px wide images (they equal 198px). I only have 9 in my ps3 boxart image folder. If I want 50 in there... I would upload the pics to the folder with the other ones, add them to the list in the .js file. Such as ps3ba[9]=, ps3ba[10]=, etc. up to [49] (49 + 1 for [0] = 50). Then since I can only fit 9 in my cell, I would have to change the variable to var z=41 (to hide 41 of them and only show 9).

Hope this helps somebody. Good luck.

Hi,
I am pretty much a noob when it comes to javascript. I am looking for a script that redirects random.html to 1 of 86 predefined pages, randomly. If someone could help me out, that would be great.

Thanks for your help

hi I'm just new to java and I'm trying to write a script that will shuffle the information in a array with no gaps and no repeats. below is that code that i have so far. thanks ben
[CODE]
//constants
SWAPS_TO_BE_MADE = 30;
//variables
var myArray = new Array('Ace',2,3,4,5,6,7,8,9,10,'Jack','Queen','King'); // the array that entities will be shuffled from
var temp = 0;
var outPutArray = new Array (12);
var arrayLength = myArray.length;
var index = 0;
var swapIndex = 0;
var self_swaps = 0;
var counter = 0;

temp=myArray[swapIndex]

document.write('<h1>Array shuffling</h1>');
document.write('<p>Before shuffle: '+myArray+'</p>');

//loop
while(counter < SWAPS_TO_BE_MADE) {
index =Math.floor(Math.random()*arrayLength);
swapIndex =Math.floor(Math.random()*arrayLength);
var index_value = index;
var range = 1;
myArray.splice(index_value,range,'spilced');
outPutArray[swapIndex] = index;


if(index == swapIndex) {
self_swaps++;
}
counter++;
index = (index + 1 % arrayLength);
swapIndex= (swapIndex + 1 % arrayLength);
}

document.write('<p>After shuffle: '+outPutArray+'</p>');
document.write('<p>After shuffle: '+myArray+'</p>');
[ICODE]

This script isnt working. Im not sure what im doing wrong. forgive me i havent programmed in javascript before.


titles.js
Code:

<script type="text/javascript" language="javascript">   
    <!--//  
 function random_Title(){
 if (parseInt(navigator.appVersion) >= 4) {  
        var num = 3;  
        var rantitle = new Array(num+1);  
        rantitle[1] = "Random Title1";  
        rantitle[2] = "Random Title1";  
        rantitle[3] = "Random Title1";  
        ranNumber = parseInt(num * Math.random() + 1);  
        document.title = rantitle[ranNumber];  
    }  
    //-->   
 }
</script>

html page
Code:

<html>
<head>

<script type='text/javascript' src='http://www.flashmajic.com/Google/titles.js'></script>
<script>
  document.title =   random_Title() ;  
</script>
</head

I have to create a website as a project for my university course. Said course has nothing at all to do with computers really so it's really throwing us into the deep end as the majority of us have/had no interest in this particular field.

Regardless, I am creating a website that uses the Random Quote Generator Javascript that I copied from the Hotscripts website. The code details are below and my question is: is there any way I could change the formatting for each quote? For example, change quote 1 to be, say, yellow or bold and change quote 3 to be aligned right and blue? I mainly want to change the colour for each quote but having any other info on how to format it would be really helpful.

Code:

var quotes=new Array();
quotes[0] = "This is quote 1.";
quotes[1] = "This is quote 2.";
quotes[2] = "This is quote 3.";

var q = quotes.length;
var whichquote=Math.round(Math.random()*(q-1));
function showquote(){document.write(quotes[whichquote]);}
showquote();

Also if you could put it into total idiot-speak for me I'd be oh so grateful.

Hi, I have a Javascript which I'm using to display one of four Flash SWF files randomly. These need to be actually displayed twice, so I'm basically calling the script twice.

This works great aside from one thing- occasionally the same movie appears in both scripts, for example the first instance picks movie 3 of 4 and th second instance does the same.

What I need is to somehow make sure that if the first instance of the script picks movie x then the second script will pick any movie EXCEPT movie x.

This is the script as it stands:

Code:

<script language="JavaScript">

// Generate a Random Number
var randomnumber = Math.round(Math.random()*3);

// Select a swf and execute the corresponding function
if (randomnumber == 1)

{movie1();}

else if (randomnumber == 2)

{movie2();}

else if (randomnumber == 3)

{movie3();}

else {movie4();}

//Functions to write out the correct flash movie resource.

function movie1(){
document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/1.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/1.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>")
}

function movie2(){
document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/2.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/2.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>")
}

function movie3(){
document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/3.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/3.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>")
}

function movie4(){
document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/4.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/4.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>")
}
</script>

Hi, my assignment is to create an online quiz with a random image generator. I have created my online quiz using 5 linking files and everything works great. My only problem is getting the images to show up on my quiz. All I get is the filename with a red X. Which the files do show up at random when I refresh, so I know that part is working. I just don't know what I am missing to get the actual picture to show up. Please take a look at my code below and see if I am missing anything. Please keep in mind this isn't the whole code as I have different linking files for this assignment. Thank you in advance.

Code:

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Assignment CH10 Solution -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Online Quiz</title>
<script type = "text/JavaScript">

<!--
var rimg = 0;
var pictures = [ "logo", "logo2", "logo3", "logo1", "cover" ];

function randpics(){
var myQuiz = document.getElementById( "myQuiz" );
rimg = Math.floor( Math.random() * 5 ); 
myQuiz.logo.src = pictures[rimg]+'.gif';
myQuiz.logo.alt = rimg + ' : ' +pictures[rimg];
}

function checkAnswers() {
var myQuiz = document.getElementById( "myQuiz" );

if ( myQuiz.elements [ 0 ].checked )
alert ( "Congratulations, your answer is correct" );
else // if the answer is incorrect
alert ( "Your answer is incorrect. Please try again" );
} // end function checkAnswers 

-->

</script>
</head>
<body onload="randpics()">
<form id = "myQuiz" onsubmit = "return checkAnswers()" action = "">
<img name="logo" src="logo.gif" alt="javascript logo"/>
<br /> 
<p>Which company first implemented the JavaScipt language?<br />


<input type = "radio" name = "radiobutton" value = "logo" />
<label>Netscape Communications Corp.</label>

<input type = "radio" name = "radiobutton" value = "logo2" />
<label>Microsoft Corp.</label>

<input type = "radio" name = "radiobutton" value = "logo3" />
<label>Sun Microsystems Corp.</label>

<input type = "radio" name = "radiobutton" value = "logo1" />
<label>Consortium of all the companies</label><br />

<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</p>
</form>

<p>
Click here to continue <a href = "page1.html" target="_self">Next Question</a>
</p>
</body>
</html>

I have a tutorial I have to complete for my web class out of the "New Perspectives HTML, XHTML, and Dynamic HTML 4th edition book" (the tutorial I'm doing is number 10) and I can't figure out how to get the numbers to show up. Here is the code that is given to start out with.

Code:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
   New Perspectives on HTML and XHTML 5th Edition
   Tutorial 10
   Review Assignment

   Monroe Public Library
   Author: 
   Date:   

   Filename:         mpl2.htm
   Supporting files: mpl2.jpg, mplstyles.css, random.js, 0.jpg - 9.jpg
-->

   <title>Monroe Public Library</title>
   <link href="mplstyles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="pageContent">
   <div id="head">
      <img src="mpl.jpg" alt="Monroe Public Library" />
   </div>

   <div id="links">
      <span>Quick Links</span>
      <a href="#">Home Page</a>
      <a href="#">Online Catalog</a>
      <a href="#">Friends of MPL</a>
      <a href="#">New Books and Other Good Reading</a>
      <a href="#">Ohio Virtual Library</a>
      <a href="#">Internet Public Library</a>
      <a href="#">Services and Collection</a>
      <a href="#">Adult Programs</a>
      <a href="#">Teen Central</a>
      <a href="#">Children's Room</a>
      <a href="#">Computers at MPL</a>
      <a href="#">Computer Rules and Procedures</a>
      <a href="#">Staff Directory</a>
      <a href="#">Library Records</a>
   </div>

   <div id="main">
      <h2>Library Records</h2>
      <p>To view the library records, enter your username and password.</p>

      <table border="1" cellpadding="5" cellspacing="0">
         <tr>
            <th>Username</th>
            <td><input size="20" /></td>
         </tr>
         <tr>	
            <th>Password</th>
            <td><input type="password" size="20" /></td>
         </tr>
         <tr>
            <td>As a final security check, enter the 5 numbers 
                you see displayed below.</td>
            <td><input size="6" /></td>
         </tr>
         <tr>
            <td colspan="2" class="center">
            <input type="button" value="View Library Records" />
            </td>
         </tr>
         <tr>
            <td colspan="2" class="center">
            </td>
         </tr>
      </table>
   </div>

   <address>
      <b>Monroe Public Library</b>
      580 Main Street, Monroe, OH &nbsp;&nbsp;45050
      <b>Phone</b>(513) 555-0211  
      <b>Fax</b>(513) 555-0241
   </address>
   
</div>       

</body>
</html>

Then these are the directions given in the book.
1. In the head section, just above the closing </head> tag, insert a script element that accesses the code in the random.js file.

2. add a second script element for the cod e that you'll add to the mpl2.htm file

3. Within the second script element, create a function named showImg(). The purpose of this function is to write an inline image tag into the current document. The function has no parameters. Add the following statements to the function:
a. Add the following multiline comment to the start of the function, just below the opening showImg() function statement.
The showImg() function displays a random image from the 0.jpg through 9.jpg files. The random image is designed to thwart hackers attempting to enter the library records database by requiring visual confirmation.
b. Declare a variable named imgNumber equal to the value returned by the randomInteger() function. Use 9 as a value of the size parameter in the randomInteger() function.
c. append the statement that creates the imgNumber variable with the following single-line comment:
Return a random number from 0 to 9
d. inster a command that writes the text
<img src='imgNumber.jpg' alt='' />
to the document, where imgNumber is the value of the imgNumber variable.

4. scroll down to the bottom of the file and locate the last table cell in the document. Within this empty table cell, insert a script element.

5. within the script element, call the showImg() function five times. YOu do not need to specify a parameter value.
___________________________

It's a lot of info but I just can't figure out how to get the images to show up, any help will be appreciated, I think I gave all the info needed.

Forgive me if this is in the wrong forum as I am unsure as to whether this should be PHP or Java, or a WP plugin. Basically I need to have a slideshow that picks images from a folder without the need to use arrays as there will be a large amount of images and I need to literally be able to drop images in a folder and they appear in a random order within the slideshow. As you can appreciate with a large amount of images, the code needs to call them as and when needed rather than loading them in at the beginning.

I have been using Wordpress's nextgen gallery and have been hacking away at a few plugins etc, and the closest I have come is to make WP select a different post with gallery each time creating the illusion that the images are in a different order, however this isn't going to be ideal as its not truly random, and breeds duplicates. If I have to stay away from WP that's fine, uploading to an ftp would be ok.

Hope someone can point me in the right direction!

Thank You

A

Hi,

please look at: http://bit.ly/hO5VBE
then click 'play app match'

you'll see the images are taken from the first 15 in an array, then doubled and randomized.

however, i want the the images taken to be a random selection from an array of 15+ images. so the array would be e.g. 25 images, and i want any 15 of those 25 to be chosen (then doubled and randomized) rather than the first 15 taken.

any help would be great!

James

p.s. if you load the main page while hovering over an icon, its tooltip will be "undefined".. any ideas to stop this?
Thanks!

I have 3 background images, and 1 is picked at random to be the background image of the body when loading the page.My code is below. Right now it's just white, can't get any pictures to load. I have checked the URLs and they are correct. Can someone help out?

Here is my code in the header:
Code:

<script type="text/javascript">
function getBackground(){
            
                var bgimg = new Array();
                bgimg[0] = "background1";
                bgimg[1] = "background2";
                bgimg[2] = "background3";
                
                var random = Math.floor(Math.random() * bgimg.length);
                var imgurl = bgimg[random];
                document.body.style.backgroundImage = 'url(' + imgurl + ')';
            }
        </script>

body:
Code:

<body onload="getBackground()">