JavaScript - Random Image Script With Default Image Shown First?

Hello everyone,
well i have asked for alot of issues earlier but none completely got resolved i hope that i get answer for this one.
I want something a script or anything that shows loading as we have seen .gif images, before the game loads. I went through google and tried alot of scripts but failed maybe i don't know the exact method how to implement it as i am weak in jquery or scripting.
I would like some one to help me out as i don't know what to do
thank you in advance.

How do I show the default icon for pdf, doc, etc... else show the image?
Code:

 
Show the default icon for pdf, doc, etc... else show image. 
Default icon:
'<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' +
The image:
'<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0"></a>' +

Attempted javascript onError but only certain browsers support that or it's my code.
Code:

'<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0" onerror="this.src=images/icons/' + sIcon + '.gif"></a>' +

Any ideas?

Let me start of by saying that I'm a designer, not a programmer so I'll apologize in advance for having very little knowledge of javascript.

I found a free script for a auto-advancing slideshow that allows you to give each image in the slideshow a unique link. My problem is that when you click on one of the pictures the link opens in a new window instead of loading in the default browser window. I have tried to search google for an answer but my lack of javascript knowledge has left me scratching my chin.

Here's the code in the head of my page:

Code:

<script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow
*/

var slideimages=new Array()
var slidelinks=new Array()

function slideshowimages(){
  for (i=0;i<slideshowimages.arguments.length;i++){
  slideimages[i]=new Image()
  slideimages[i].src=slideshowimages.arguments[i]
  }
}

function slideshowlinks(){
  for (i=0;i<slideshowlinks.arguments.length;i++)
  slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
  if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
  else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
}
//-->
</script>

and here's the Body code:

Code:

<script>
		<!--
		//configure the paths of the images, plus corresponding target links
		slideshowimages("images/services/3d_meter.jpg", "images/services/3d_prototype.jpg", "images/services/3d_stage_renderings.jpg", "images/services/atsite.jpg", "images/services/netstar.jpg", "images/services/photo_manipulation.jpg", "images/services/powerpoint.jpg")
		slideshowlinks("/", "/", "/", "/", "/", "/", "/")

		//configure the speed of the slideshow, in miliseconds
		var slideshowspeed=8000
		var whichlink=0
		var whichimage=0

		function slideit(){
  		if (!document.images)
    		return
    		document.images.slide.src=slideimages[whichimage].src
    		whichlink=whichimage

  		if (whichimage<slideimages.length-1)
    		whichimage++
  		else
    		whichimage=0
    		setTimeout("slideit()",slideshowspeed)
		}
		slideit()
		//-->
		</script>

fooling around with it, I think I have determined that my problem is the window.open in the function gotoshow, but again, I'm a designer who has little knowledge of how this actually works.

If it helps, here is a link to my site where I have the slideshow, http://gravescreativedesign.com/services.html All of the images link to the index page for my site at the moment for testing purposes, but these images will eventually link to different urls within my portfolio section of my website.

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

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

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.

I placed this code in an external js file. Nothing happens. What do I need to change?
Code:

var	randomPic = new Array();
	randomPic[0] = "images/home/binoculars.jpg";
	randomPic[1] = "images/home/conductor.jpg";
	randomPic[2] = "images/home/dandelion.jpg";
	randomPic[3] = "images/home/dog.jpg";

var whichPic = Math.floor((Math.random() * randomPic.length));

document.getElementById('tag').style.backgroundImage = randomPic[whichPic];

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!

I have a form that used php to load a random image but now i would like to use javascript instead and am sure I nearly have it. I need to have a random number between 0 -5.
Here is my code
Code:

<script type='text/javascript'>
var random = Math.floor( Math.rand() * 6);
document.write("<img src='images/'"+random+"'.jpg' alt='random image' /><input name='image' type='hidden' value='"+random+"' />")
</script>

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

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.

So I found this script and i give all props to the author but can anyone help me to add text to the random images. Also i need a button that will generate the random images/text not when you refresh the page but when your press the button and to not display any image/text till the button is pressed?

Thanks in advance.

[CODE]
<script language="Javascript">

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] = 'images'
image[1] = 'images'
image[2] = 'images'
image[3] = 'images'
image[4] = 'images'
image[5] = 'images'
image[6] = 'images'
image[7] = 'images'
image[8] = 'images'
image[9] = 'images'

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>
<form>
<p><input type="button" name="B1" value="Switch It Up" onclick="ranimage()"></p> </form>

[CODE]