JavaScript - Javascript Random Image Display; Uniquely

Hi guys I'm really stumped on this, and I haven't been able to find a tutorial online anywhere.

I'm trying to create an XML news feed for a company's website I am currently building. I have created the XML, and gotten the text to display perfectly in the HTML by using javascript.

Now I want to add a thumbnail image for each news story, to make updating simpler, I wanted the url for the thumbnail to be entered into the XML, from which the javascript could read and then display in the corresponding area in the HTML.

Is this even possible? Every tutorial I get when I use the terms "Image" and "Javascript" gives me a tutorial for a gallery or a slideshow which is not what I want at all.

Below is the javascript code, followed by the XML code;

Code:

<script type="text/javascript">

var xmlDoc;
<!--
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  } 
else // Internet Explorer 5/6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

var x=xmlDoc.getElementsByTagName("NEWS");
i=0;

function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}

//-->
</script>

XML code
Code:

<?xml version="1.0" encoding="ISO-8859-1"?>

<BULLETIN>
<NEWS>
<PIC>"/newssmall.jpg"</PIC>
<DATE>14/3/2010</DATE>
<TITLE>News Story 1</TITLE>
<STITLE>This is a short sentence to describe the story in brief</STITLE>
<STORY>This is the text of the news story</STORY>
</NEWS>
</BULLETIN>

Thanks to anyone that even reads this, I'm probably making a nooby mistake, I only started using JS and XML on Monday so I'm still learning lol

Hello,

First, I'm new to the Javascript (and to this forum).

I am trying to use a Javascript to display a randomly selected image located in a folder of my site. I need to fit these images (which may have quite diverse dimensions) into a frame of 280x280 px.

Here is the code of the current script which does not currently work:
Code:

// JavaScript Document
<script language="JavaScript"><!--


function random_imglink(){
  var myimages=new Array()
  var imagetitle=new Array()
urlimage="http://www.mysite.fr/Images/RandomPictures/"


var i=0
//specify here the total number of random images which should be names 1.jpg, 2.jpg etc
nbrandompic=140
for (i=0;i<= nbrandompic;i++)
   {
  myimages[i]=urlimage + i +".jpg"
  imagetitle[i]=urlimage + i +".txt"
   }

  
//Randomly select an image

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

  if (ry==0)
     ry=1
  var reduction = 1
  var maxWidth=280
  var maxHeight=280

//Calculate the reduction that should be applied


         if(myimages[ry].width > maxWidth || image.height > maxHeight)
            reduction = Math.max(myimages[ry].width/maxWidth,myimages[ry].height/maxHeight)
 
 // New dimensions     
      iw = Math.round(myimages[ry].width / reduction)
      ih = Math.round(myimages[ry].height / reduction)
	 

//Display image	 
	 
    document.write('<a><img src="'myimages[ry]'" title="" border=0 width='+iw+' height='+ih+'></a>')
	

}

  random_imglink()
 

//-->
</script>

I am sure that you guys can help me solve this problem. Many thanks in advance!!

Antonino

I need to display a set of photos in a limited space. After some online search, I haven't found a suitable Javascript code for the task. I would like to have something similar with the image slider on meetup.com. Basically, I would like to have an image index list and able to display an image in a large size.

Any recommendations?


Thanks in advance for your inputs.

I have search for about a week and still no luck.
I need to dynamically display mutliple images using javascript, no hardcoding. The images have different categories. For ex. bellTower01.jpg, bellTower02.jpg...and fountain01.jpg, fountain02.jpg....

-Use JavaScript to display several images and scroll through them
To display multiple thumbnails, arrange them into a small quantity (no more than 8 per page)
Provide pagination

I really really really need help. I have never done javascript before, so I'm still learning. I seriously checked out many threads and links but nothing works or is what I want. I hope someone can help me out and hopefully also allow me to become better at coding this kind of stuff.

I am not allowed to code in php for this project. I can only use javascript to display the images. Also, I don't really need anything fancy, like slideshows or rotations, I just the image to appear when I select that specific category. I want to get the images from my folder/directory.

Right now, I have it working as it just being hardcoded.
Below is my code for my galleries page:

<?php

//creates a session..initializes session data
session_start ();

echo("<?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" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scenes of Purdue</title>
<!-- Styling of the Webpage -->
<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/lightbox.css"/>

</head>

<body>
<div id="shadowContainer">
<div id="mainContainer">
<div id="mainHeader"></div>
<div id="topNav">
<ul>

<li><a href="index.php">Home</a></li>
<li><a href="galleries.php">Galleries</a></li>
</ul>
</div><div id="content">
<br />
<div class="clearfix"><h1>Select a Category to View</h1>
<br />

<div class="paginationBar" id="paginationBar">
<select id="catDropDown" onchange="javascript:getCategory()">
<option value="-" selected="selected">Select a Category</option>
<option value="bellTower">Bell Tower</option>
<option value="fountain">Fountain</option>
</select>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br />

<ul id="pagination">
</ul>

<div id="r1c1"></div>
<div id="r1c2"></div>
<div id="r1c3"></div>

<div id="r2c1"></div>
<div id="r2c2"></div>
<div id="r2c3"></div>


<script type="text/javascript"><!--
var bellTowerArray = new Array();

bellTowerArray[0] = "bellTower01.jpg";
bellTowerArray[1] = "bellTower02.jpg";
bellTowerArray[2] = "bellTower03.jpg";
bellTowerArray[3] = "bellTower04.jpg";
bellTowerArray[4] = "bellTower05.jpg";
bellTowerArray[5] = "bellTower06.jpg";
bellTowerArray[6] = "bellTower07.jpg";
bellTowerArray[7] = "bellTower08.jpg";
bellTowerArray[8] = "bellTower09.jpg";
bellTowerArray[9] = "bellTower10.jpg";
bellTowerArray[10] = "bellTower11.jpg";
bellTowerArray[11] = "bellTower12.jpg";
bellTowerArray[12] = "bellTower13.jpg";
bellTowerArray[13] = "bellTower14.jpg";
bellTowerArray[14] = "bellTower15.jpg";
bellTowerArray[15] = "bellTower16.jpg";

var fountainArray = new Array();

fountainArray[0] = "fountain01.jpg";
fountainArray[1] = "fountain02.jpg";
fountainArray[2] = "fountain03.jpg";
fountainArray[3] = "fountain04.jpg";
fountainArray[4] = "fountain05.jpg";
fountainArray[5] = "fountain06.jpg";
fountainArray[6] = "fountain07.jpg";
fountainArray[7] = "fountain08.jpg";
fountainArray[8] = "fountain09.jpg";
fountainArray[9] = "fountain10.jpg";
fountainArray[10] = "fountain11.jpg";
fountainArray[11] = "fountain12.jpg";
fountainArray[12] = "fountain13.jpg";
fountainArray[13] = "fountain14.jpg";
fountainArray[14] = "fountain15.jpg";
fountainArray[15] = "fountain16.jpg";
fountainArray[16] = "fountain17.jpg";
fountainArray[17] = "fountain18.jpg";

var currentArray = new Array();

function getCategory()
{
if(document.getElementById("catDropDown").selectedIndex == 1)
{
currentArray = bellTowerArray;
}
else if(document.getElementById("catDropDown").selectedIndex == 2)
{
currentArray = fountainArray;
}//if/else
if(document.getElementById("catDropDown").selectedIndex > 0)
{
displayImages(0);
doPagination();
}
}

function displayImages(start)
{
//r1c1
if(!(start > currentArray.length-1))
document.getElementById("r1c1").innerHTML = "<a id=\"r1c1_a\" href=\"images/regular/" + currentArray[start] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start] + "\" id=\"r1c1_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
else
document.getElementById("r1c1").innerHTML = "";

//r1c2
if(!(start+1 > currentArray.length-1))
document.getElementById("r1c2").innerHTML = "<a id=\"r1c2_a\" href=\"images/regular/" + currentArray[start+1] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+1] + "\" id=\"r1c2_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
else
document.getElementById("r1c2").innerHTML = "";

//r1c3
if(!(start+2 > currentArray.length-1))
document.getElementById("r1c3").innerHTML = "<a id=\"r1c3_a\" href=\"images/regular/" + currentArray[start+2] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+2] + "\" id=\"r1c3_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
else
document.getElementById("r1c3").innerHTML = "";

//r2c1
if(!(start+3 > currentArray.length-1))
document.getElementById("r2c1").innerHTML = "<a id=\"r2c1_a\" href=\"images/regular/" + currentArray[start+3] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+3] + "\" id=\"r2c1_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
else
document.getElementById("r2c1").innerHTML = "";

//r2c2
if(!(start+4 > currentArray.length-1))
document.getElementById("r2c2").innerHTML = "<a id=\"r2c2_a\" href=\"images/regular/" + currentArray[start+4] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+4] + "\" id=\"r2c2_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
else
document.getElementById("r2c2").innerHTML = "";

//r2c3
if(!(start+5 > currentArray.length-1))
document.getElementById("r2c3").innerHTML = "<a id=\"r2c3_a\" href=\"images/regular/" + currentArray[start+5] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+5] + "\" id=\"r2c3_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
else
document.getElementById("r2c3").innerHTML = "";
}

function doPagination()
{
var numpages = (currentArray.length / 6) +1;
var numleft = currentArray.length % 6;

document.getElementById("pagination").innerHTML = "";

for(i=0; i<numpages-1; i++)
{
document.getElementById("pagination").innerHTML += "<span onclick='displayImages("+ i*6 +")'>"+ (i+1) + "<"+"/span> ";
}

if(numpages <=1)
{
document.getElementById("pagination").innerHTML = "";
}
}

document.getElementById("catDropDown").selectedIndex = 0;

-->
</script>

</div>
</div>
</div>
<div id="footer"><a href="readme.php">Readme</a><br />
<div class="clearfix">
<div style="float: left"><a href="adminLogin.php" title="Admin Login" class="adminLoginAjax">Admin login</a></div>

</div>
</div>
</div>

</div>

</body>
</html>

Hi! I'm trying display ready made flashcards by using the example below. Now this works just fine. But I want the cards to be randomly chosen and displayed one at a time. Any ideas? I've been sitting up all night trying to figure this out on my own, but come to the conclusion that I need help, and sleep..


Code:

 

    <head>
        <script type="text/javascript">    
            window.onload= function() {
                var divs= document.getElementsByTagName('div');
                for (var i= divs.length; i-->0;)
                    if (divs[i].className==='question')
                        Toggler(divs[i]);
            };
            
            function Toggler(div) {
                var state= false;
                var toggled= div.nextSibling;
                while (toggled.nodeType!==1)
                    toggled= toggled.nextSibling;
            
                div.onclick= function() {
                    state= !state;
                    toggled.style.display= state? 'block' : 'none';
                };
            };

        </script>
        <style>
            div.flashcard {
                margin: 0 10px 10px 0;
            }
            div.flashcard div.question {
                background-color:#ddd;
                width: 400px;        
                padding: 5px;    
                cursor: hand;    
                cursor: pointer;
            }
            div.flashcard div.answer {
                background-color:#eee;
                width: 400px;
                padding: 5px;    
                display: none;        
            }                
        </style>
    </head>
<body>

    <div id="1" class="flashcard">
    <div class="question">Question goes here</div>
    <div class="answer">Answer goes here</div>
    </div>
    
  
</body>
</html>

tag!


I've tried the solution below, which successfully generates random cards, BUT the toggling just works on the first flashcard in the code


Code:

 <div id="randomdiv1" style="display:none;">
 /*inserted this as content*/ 
<div id="1" class="flashcard">
    <div class="question">Question goes here</div>
    <div class="answer">Answer goes here</div>
    </div>

</div>

<div id="randomdiv2" style="display:none;">
[content for div 2]
</div>

<div id="randomdiv3" style="display:none;">
[content for div 3]
</div>


<script type="text/javascript" language="JavaScript"><!--

NumberOfDivsToRandomDisplay = 3;

var CookieName = 'DivRamdomValueCookie';
function DisplayRandomDiv() {
var r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay);
if(NumberOfDivsToRandomDisplay > 1) {
   var ck = 0;
   var cookiebegin = document.cookie.indexOf(CookieName + "=");
   if(cookiebegin > -1) {
      cookiebegin += 1 + CookieName.length;
      cookieend = document.cookie.indexOf(";",cookiebegin);
      if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
      ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
      }
   while(r == ck) { r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); }
   document.cookie = CookieName + "=" + r;
   }
for( var i=1; i<=NumberOfDivsToRandomDisplay; i++) {
   document.getElementById("randomdiv"+i).style.display="none";
   }
document.getElementById("randomdiv"+r).style.display="block";
}
DisplayRandomDiv();
//--></script>

I'm in an experimenting phase doing a lot of copy/paste so if this is very far out I wiill very much appreciate alternatives.
Thanks!!

Hello,
i got a problem with my following js-script. Sorry I'm a noob.
I want to display several divs with math.random.
12 divs are in an array, after this I place 6 of them randomly in another array and want to display them. But it doesnt happen and I dont know why
.
Here is my script:
Code:

<html>
    <head>
    <style type="text/css">
        .hidden{display:none;}
</style>
    <script type="text/javascript">  
      window.onload = function () {  
     
    var domelem =  document.getElementById("wrap").getElementsByTagName("div");
   
     var studis = [];   
        for(var i =0; i < domelem.length; i++)
            {
                studis[i] = domelem[i];
               
            }    
           
            

                 var a = [];   

        while(a.length <= 5)
            {
                   var spliced = studis.splice(Math.floor(Math.random()*studis.length), 1);
                   a.push(spliced); 
                               
            }      
       
                       for (var i = 0; i < a.length; i++){
                              a[i].style.display = 'block';
                          
                       }
                 
                   


          }  
             </script>  

    </head>
    <body>
    <div id="wrap">
<div class="hidden">content</div>
<div class="hidden">content</div>
<div class="hidden">content</div>
<div class="hidden">content</div>
<div class="hidden">content</div>
........
</div>

The Problem is, that the divs are not displayed.
I thought it was correct to do it like this.

Please can anybody help, I dont know what to do.
I would be very grateful.

Hello,

I have an array containing 100 different values.

How would I randomly pick 25 of them for display?

For now I do:
PHP Code:
for (var i=0; i<markers.length && i<25; i++) {

html += markers[i].name + '<br />';

} 


Which of course returns 25 values but always in the same order which is not what I want.

Thanks in advance!

PS. My array could also contain only 20 values, in which case I would like the function to display the 20 values randomly sorted.

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

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>

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 =)

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()">

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.

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>

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.