JavaScript - Random Background Image Not Working

Brand new to the forum, so first off... Hello all!!

I have been working on a project which randomly changes the text font of a word submitted (Color and Size). At present the code works fine, using the below Javascript.

Code:

<SCRIPT LANGUAGE="JavaScript">

function randomise(){
var words=document.myform.wordlist.value;
var spacer="";
words=words.split(document.myform.randomiseby.value)
document.myform.code.value=" ";
var colourscheme=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
for(var time=0;time<=(words.length-1);time++){
{var c1=Math.round(Math.random()*(colourscheme.length-1));
var c2=Math.round(Math.random()*(colourscheme.length-1));
var c3=Math.round(Math.random()*(colourscheme.length-1));
var c4=Math.round(Math.random()*(colourscheme.length-1));
var c5=Math.round(Math.random()*(colourscheme.length-1));
var c6=Math.round(Math.random()*(colourscheme.length-1));
var size=1+Math.round(Math.random()*6);
document.myform.code.value+="<font color=\"#"+colourscheme[c1]+colourscheme[c2]+colourscheme[c3]+colourscheme[c4]+colourscheme[c5]+colourscheme[c6]+"\" size=\""+size+"\">"+words[time]+"</font>"+spacer+" ";
}
}
looks_like.innerHTML=document.myform.code.value;
}
</script>

To really highlight the text i would like to keep the font white and change the background colour but i don't have a clue how to do it...

Please note: i am a complete noob to Javascript and the above code has been bodged together from a number of tutorials.

Can anyone help?

Here's what I usually use and have been using for years and it works great, just not for this particular purpose. I don't have a clue when it comes to javascript.

Code:

<noscript><img src="no_script_quote.gif" width="406" height="94"/></noscript><script language="javascript">

var delay=6000
var curindex=0

var images=new Array()

	images[0]="quote1.gif"
	images[1]="quote2.gif"
	images[2]="quote3.gif"
	images[3]="quote4.gif"
	images[4]="quote5.gif"

var preload=new Array()

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

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

function rotateimage()
{

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

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

setInterval("rotateimage()",delay)
</script>

But, now I want to be able to set a default picture to be shown first and have the random pics appear next. I also don't want the default pic to show up again in the random array. So basically, every time the page was first visited, or refreshed it would show the default picture then move into the random pics.

Is there anyway to modify the code that I'm using to accomplish this? Or... Any help would be appreciated.

Thanks,
Dell

Hi there,

I recently used a random link generator found at http://javascriptkit.com in my webpage: http://random-casino.com

The code works in both Firefox and Google Chrome, but not in IE.

Any ideas?

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 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.

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!

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>

Does anyone have a script, that can display a random image of the images I select?I'm going to use it for a type of captcha. I think this would be easier in javascript, so yes I am in the right section.

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, im wondering if anyone can help me, i have a random image script and it works fine, apart from when you click on the images they link to the right place but ALL go to _self

I want [2],[3]and[6] to link to the places they are already linking to but _blank NOT _self, does anyone know how to do this, it would be a massive help :)

Below is the code for the script i am using:

Code:

	<script language="JavaScript">
function random_imglink(){
  var myimages=new Array()
  //specify random images below. You can have as many as you wish
  myimages[1]="images/layout/bottom gallery.png"
  myimages[2]="images/layout/bottom facebook.png"
  myimages[3]="images/layout/bottom twitter.png"
  myimages[4]="images/layout/bottom team.png"
  myimages[5]="images/layout/bottom whats on.png"
  myimages[6]="images/layout/bottom forum.png"

  //specify corresponding links below
  var imagelinks=new Array()
  imagelinks[1]="gallery.html"
  imagelinks[2]="http://www.facebook.com/tos.php?api_key=fcddbaae811ef62bf3c4fb2ac7b1fd07&next=http%3A//dailyphoto-1402445175.us-east-1.elb.amazonaws.com/dailyphoto/applications/buffer/id%3A1/pid%3A2828044108236222753/from%3Apublisher.attachment.own.image?ref=nf&v=1.0&canvas#/group.php?gid=87957825200&ref=ts"
  imagelinks[3]="https://twitter.com/groundzereo"
  imagelinks[4]="team.html"
  imagelinks[5]="whatson.html"
  imagelinks[6]="http://groundzero.forumotion.co.uk/"

  var ry=Math.floor(Math.random()*myimages.length)

  if (ry==0)
     ry=1
     document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}

  random_imglink()
//-->
</script>

Thanks in advance =)

Random Image Slideshow (I want two!?)

Hi
I have use the code from he
http://www.javascriptkit.com/script/...domslide.shtml
(which works well for me)

Can anyone tell me how I can get a second other random image to display on the page beside the first? I cant work it out.

It seems I cant run the script twice?

Here's my page:
http://www.bookmarkpeople.com/chillax2.htm

Any help much appreciated?

A bear of simple brain.

Jules.

Hi

I am a complete novice with Javascript.

I posted a question on another site as I want to show a series of 9 images in a random order - ie all 9 images but changing their order every time the page loaded.

Someone responded with the following script:

onload= function(){
var n, pic,
A= [1, 2, 3, 4, 5, 6, 7, 8, 9];// replace integers with urls
var pa= document.getElementById('image_set'); // reference the container element
pa=mr('evalBlock')
while(A.length){
pic=document.createElement('img');
n= Math.floor(Math.random()*A.length);
pic.src= A.splice(n, 1);
pa.appendChild(pic);
}
}

However - I don't know how to put it into my pages to get it to work and they have not replied to my further query.

I think I have to put something in the () after function, also, do the URLs have to be absolute and do they need enclosing in ' or ".
Also what code do I then have to put on the page to call the image?

Would anyone here be able to help?

Many thanks
Carol

Hi

I implemented some coding tor create a random image on the page with a corresponding 'alt' tag and all was fine for a while...

Then I got ambitions and modified the script to generate code that would generate two seperate sets of random image and associated 'alt' tag pairs.... and all seemed fine for a while....

... however after having used the code on my page for a while I notice that occasionally I get a broken file link to the image which then fails to show... and shows the 'alt' text of "undefined".

All the code links to images are correct and all images DO show from time to time with the tags.... only occasionally this extra blank/undefined pair is generated. Anyone have any ideas?

Here's the code...

Code:

		<SCRIPT LANGUAGE="JavaScript">
			<!-- Begin
			// Set up the image files to be used.
			var theImages = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theImages[0] = 'images/240 Images/belmarsh-peat-240.jpg'
			theImages[1] = 'images/240 Images/98-florence-rd-maidstone240.jpg'
			theImages[2] = 'images/240 Images/boxgrove-biface-240.jpg'
			theImages[3] = 'images/240 Images/Fieldwalking2-240.jpg'
			theImages[4] = 'images/240 Images/Hawkinge-Pot-240.jpg'
			theImages[5] = 'images/240 Images/Justin_Barton-240.jpg'
			theImages[6] = 'images/240 Images/StaffPages/Hadrians-Wall.jpg'
			theImages[7] = 'images/240 Images/Chilley_Farm_Pevensey240.jpg'
			// do not edit anything below this line
			
			var theImages2 = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theImages2[0] = 'images/LeafletImages/Fronts/Building/Building4.jpg'
			theImages2[1] = 'images/LeafletImages/Fronts/Fieldwork/Fieldwork4.jpg'
			theImages2[2] = 'images/LeafletImages/Fronts/Finds/Finds4.jpg'
			theImages2[3] = 'images/LeafletImages/Fronts/Forensic/Forensic4.jpg'
			theImages2[4] = 'images/LeafletImages/Fronts/GeoArch/GeoArch4.jpg'
			theImages2[5] = 'images/LeafletImages/Fronts/Heritage/Heritage4.jpg'
			theImages2[6] = 'images/LeafletImages/Fronts/Landscape/Landscape4.jpg'
			// do not edit anything below this line

			var theAlts = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theAlts[0] = 'Peat bog excavations at Belmarsh Prison.'
			theAlts[1] = 'An archaeological watching brief underway in Maidstone, Kent.'
			theAlts[2] = 'A flint biface hand-axe the from Boxgrove excavations, West Sussex.'
			theAlts[3] = 'Fieldwalking.'
			theAlts[4] = 'Excavation of a cremation urn at Hawkinge, Kent.'
			theAlts[5] = 'An MA Student from University College London a records ceramic vessel.'
			theAlts[6] = 'The Hadrian’s Wall Management plan was prepared in consultation with Archaeology South-East (Copyright - Image by Simon Warner).'
			theAlts[7] = 'Historic Building Recording at Chilley Farm, Pevensey.'


			var theAlts2 = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theAlts2[0] = 'Building Recording Services.'
			theAlts2[1] = 'Fieldwork Services.'
			theAlts2[2] = 'Finds and Environmental Specialist Services.'
			theAlts2[3] = 'Forensic Archaeology.'
			theAlts2[4] = 'Geoarchaeological Services.'
			theAlts2[5] = 'Heritage Management Services.'
			theAlts2[6] = 'Landscape Research Services.'
			
			var j = 0
			var p = theImages.length;
			var preBuffer = new Array()
			for (i = 0; i < p; i++){
			   preBuffer[i] = new Image()
			   preBuffer[i].src = theImages[i]
			}
			var whichImage = Math.round(Math.random()*(p-1));
			
			
			
			function showImage(){
			document.write('<img src="'+theImages[whichImage]+'" border="1" alt="'+theAlts[whichImage]+'">');
			}
			
			function showImage2(){
			document.write('<img src="'+theImages2[whichImage]+'" border="0" alt="'+theAlts2[whichImage]+'">');
			}

			//  End -->
		</script>

and its called by the code...

Code:

              <SCRIPT LANGUAGE="JavaScript">
	 		 <!-- Begin
	  			showImage(); 
	 		 //  End -->
	 	    </script>

and..

Code:

              <SCRIPT LANGUAGE="JavaScript">
	 		 <!-- Begin
	  			showImage2(); 
	 		 //  End -->
	 	    </script>

Many thanks in advance.

Hey guys,

Right now I have a random rotating slideshow with delay script implemented on a website. However I want to make ONE of the slides/images clickable to open up a PDF doc.

Can you please let me know what I need to add/change in this to make it do what I need? I am not big on java so need some help.

Thanks in advance!


Code:

<script language="javascript">

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

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

var randomimages=new Array()

	randomimages[0]="images/simple_img_11.jpg"
	randomimages[1]="images/simple_img_2.jpg"
	randomimages[2]="images/simple_img_3.jpg"
	randomimages[3]="images/simple_img_4.jpg"
	randomimages[4]="images/simple_img_5.jpg"
	randomimages[5]="images/simple_img_6.jpg"
	randomimages[5]="images/simple_img_7.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>

Hi guys,

As a relative newcomer to Javascript this is killing me! Maybe someone can help...

I am trying to put an image on the front page of my website that changes to one of two random images on mouseover. This part was easy, and has been done (I got the code from http://www.joemaller.com/javascript/randomroll.shtml).

But what I am finding difficult is to make each image link to a different page.

For example, if the user mouseovers the main image and sees the 'thumbs up' image, then clicks on it, they should be taken to the 'thumbs up' page. And if the user mouseovers the main image and sees the 'thumbs down' image, then clicks on it, they should be taken to the 'thumbs down' page.

The site is he www.uninvitedcritic.com

I think using 2 arrays is the way to go, but am not sure. Any help would be appreciated!