JavaScript - Adding Links To Random Pictures?

All,
I have a PHP script that will get images out of the database and display them in a grid. I have two verisons. I save a thumbnail which I display and then a larger image in a different folder. These images are placed in a scroll bar but what I would like to happen is that when I click on a thumbnail it basically displays the bigger image until I click on that image and it goes away. I would love for the middle of the image to be displayed in the middle of the users screen but beggers probably can't be choosers in this case.

An example of a similar desired result is a link he
http://qrayg.com/experiment/hig/

Instead of the hover, I'd like to utilize the onclick to display and remove the image. If it's easy to put the center in the center of the screen that that would be absolutely incredible as well.

Thanks for any guidance you could provide me on this.

Thanks in advance!

All,
I have the following code:

Code:

              
<div class="col-1">
    <div id="swap">
        <img src="images/gallery-img3-big.jpg" alt="" />
    </div>
</div>
<div class="col-2">
    <div class="list3">
       <ul>
          <li><a href="#"><img src="images/gallery-img1.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/gallery-img2.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/gallery-img3.jpg" alt="" /></a></li>
        </ul>
    </div>
</div>

When you click on any of the links with the <li> I'd like to put the image that was clicked in the <div id="swap"></div>. So I'm thinking this would have to be done with innerHTML and maybe pass a function the img src of the link that I would click on. Just not sure how to do that though. Any help would be greatly appreciated.

Thanks in advance.

I am using a jquery gallery slideshow on my homepage and I am having an issue where the images loaded before the dom is loaded causing the images to display in an ugly stack.

I combated this a bit by setting a height on the div and setting the overflow to hidden. however you can still see the unstyled stack of images within the small div for a couple of seconds before the page is loaded.

the code to start the javascript is:

Code:

<script type="text/javascript">
	$(document).ready(function(){		
	$('#photos45').galleryView({
		panel_width: 980,
		panel_height: 300,
		gallery_width: 980,
		gallery_height: 900,
		frame_width: 120,
		frame_height: 50,
		pause_on_hover: true,
		nav_theme: 'light'
	});
	});
</script>

and the html is:

Code:

 <div style="height:360px; overflow:hidden; " >
 <ul id="photos45">
 <li><img src="../site_files/banners/cush.jpg" alt="Baffin Cush"/></a></li>

  <li><img src="../site_files/banners/coveralls.jpg" alt="Big Al Coveralls"/></li>

 <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li>
 
 <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li>
 </ul>
  

</div>

I have a feeling that this has something to do with the .ready function maybe it should be something else? You can see this in action he

http://bit.ly/8QRXWU

Im trying to edit a homepage for a friend of mine. He wants the page to have a table of 12 total pictures that randomly rotate on refresh.

i found this code that refreshes the pictures:
Code:

<script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);


img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script>

and to come up with the tables i made this code:

Code:

<table style="background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" width="500" bordercolor="#FFCC00">
<tbody>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
</tbody>
</table>

but if you see the home page he

http://celulardepot.squarespace.com

you can see that something is DEFINITLY wrong lol
please help me! =D

i look everywhere for html and Java snip its and all seem to be different, can somebody please tell me how to code something like this,

also can the code be easy ish for example.

if show is 5pm till 6pm an image appears

if show is 6pm till 7pm an image appears

i know this is possible but there are so many codes out there,

thank you for your help

Hello

I have header made from 3 parts (becouse its not rectengular)
So 3 pictures build one header and 3 headers are changing every 10s.
I have some code but works only on 1 part, i dont know how to add other 2 is this posible?

Code:

<head>
<script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow:
By Website Abstraction (www.wsabstract.com)
and Java-scripts.net (www.java-scripts.net)
*/

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>
</head>

<body>
<a href="javascript:gotoshow()"><img src="images/header_main.gif" name="slide" border=0></a>
	  <script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("images/header_main.gif", "images/header_main_cv.gif", "images/header_main.gif")
slideshowlinks("http://wsabstract.com", "http://dynamicdrive.com", "http://java-scripts.net")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2
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>
</body>

HI so sorry to bother you with what seems to be a simple problem i am just getting back into my coding and i can not see what i am doing wrong. i have my folder with index page in named "tester_fixed.html" and then a folder for images where i have place header1 header 2 and header 3 . i downloaded a script from http://www.javascriptkit.com/script/...bleslide.shtml
and edited my images in and i think i mucked up as they are not showing. please could you tell me what i am doing wrong and point me in the right direction.
Many thanks
Bec
the code:
Code:

<script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['images/header1.jpeg', '', '']
ultimateshow[1]=['images/header2.jpeg', 'http://www.dynamicdrive.com', '_new']
ultimateshow[2]=['images/header3.jpeg', 'http://www.codingforums.com', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth="240px" //set to width of LARGEST image in your slideshow
var slideheight="940px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>

<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>

thanks

I want to type urls in a text field, submit such urls and extract pictures of these web pages. Does anyone know how I can do this using javascript?

Thanks,

Marcelo
Brazil

Hi there,

I saw this on the website for the new blackberry playbook and want to do something similar to that. http://us.blackberry.com/playbook-tablet/ Does anyone know of a script that will let me have 5 pictures or so and it will automatically go through them all but you can fastforward to the picture you like by clicking on a dot at the bottom like on the blackberry website? Hope I explained that well enough

Hello,
I have 4 pictures (Picture_1, Picture_2, Picture_3, Picture_4) and 2 buttons. I am trying to make it so that when you click the 'next picture' button it increments a variables andchanges the current picture to the next one ("Picture_" + CurrentPicture) I am aware that I would need to delete the current picture before creating the next one but I am unsure how to do this I use document.write("<img src = 'Picture_Example'>") to display my picture but if there is a better way please say
Here's all my code:
Code:

<html>
<head>
<script language = "javascript" type = "text/javascript">
CurrentPicture = 1
document.write("<img src = 'Picture_' + CurrentPicture + '.jpg'/>")
function ChangeImage(Rotation){
Current_Picture ++
	if(Rotation == 1){
		if(CurrentPicture != 1){
			document.write("<img src = 'Picture_' + CurrentPicture + '.jpg'/>")
		}
	}else if (Rotation == 2){
		if(CurrentPicture != 4){
			document.write("<img src = 'Picture_' + CurrentPicture + '.jpg'/>")
		}
	}
}
</script>
</head>
<form>
<input type = "button" value = "Next Picture" onClick = "ChangeImage(1)">
<input type = "button" value = "Previous Picture" onClick = "ChangeImage(2)">
</form>
</body>
</html>

Thanks.

Need some help understanding why and how to fix this.... btw this site is something I've been working on for some time..... and learning bit by bit !!!

this is the site :
http://www.teiafirme.com/hargrave.html

this is the problem :
The specific problem is that when you mouse over pictures i have a script to enlarge those pics, but my menu stays on top of those pictures !!!!!!!!!!!!! what do i need to do to fix this? If needed I will post the page html code...

I also have another problem which is with the flash movie on the home page which is only loading after i navigate way from the home page and then comeback to it...... Movie does not start on initial page load !!!!!

Hi. Stuck on an assignment, inserting 3 files that i am working with, unable to get the unhide or move functions working. Thanks for all your help.

***Index.htm
Code:

01.<html>
02.<head>
03.<!-- 
04.   New Perspectives on JavaScript
05.   Tutorial 4
06.   Review Assignment
07. 
08.   Avalon Books
09.   Author: Rexdreamer
10.   Date:   08/12/09
11. 
12.   Filename:       index.htm
13.   Supporting files: ab.gif, ablogo.gif, avalon2.htm
14.-->
15.<title>Avalon Books</title>
16.<script type="text/javascript" >								   //insert embedded script that uses an if statement to test for W3C DOM
17.  if (document.getElementById) location.href="avalon2.htm"	   //if supported browser load avalon2.htm using the href prop of the location obj
18.</script>												    
19. 
20.</head>
21. 
22.<body style="background-color: black">
23.<p style="text-align: center">
24.<img src="ablogo.jpg" alt="Avalon Books" /><br />
25.<img src="ab.gif" alt="" />
26.</p>
27.</body>
28.</html>

***Avalon.htm

Code:

<html>
<head>
<!-- 
   New Perspectives on JavaScript
   Tutorial 4
   Review Assignment

   Avalon Books
   Author: Chris Veal
   Date:   08/12/09

   Filename:         avalon2.htm
   Supporting files: kids.jpg, fiction.jpg, nfiction.jpg, scripts2.js, styles2.css
-->
<title>Avalon Books</title>
<link href="styles2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script2.js"></script> 	
<script type="text/javascript">
function placeObjects() {	   								//insert function named placeObj
var w = winWidth/2;		 	   								//declare variable named w that is =1/2 of the value returned by the winWidth function
placeit("avalon2", W-75, 0);
placeit("kids", W-75, 100);									//place kids coordiantes at w75,100
placeit("fiction", W-75, 100);
placeit("nfiction", W-75, 100);
setZ("kids",z3)			  	   								//use setZ functionto set zindex for kids object to 3
setZ("fiction",z2)											//use setZ functionto set zindex for fiction object to 2
setZ("nfiction",z1)											//use setZ functionto set zindex for nfiction object to 1
moveAvalon();												//call the moveAvalon function
}
function moveAvalon() {
var x = xc
if (x <= w-125);
shiftIt("avalon",10);
setTimeout("moveAvalon",50);
}
if (x > w-125) {
  												
}
}
function swapImages() {										//insert swapimages function, purpose to change the stacking order of the 3image obj
setTimeout("showIt('kids')");
setTimeout("showIt('fiction')");
setTimeout("showIt('nfiction')");
setTimeout("swapIt()", 2000);
}
</script>
</head>

<body onload="placeObjects()">

<div id="kids">
   <img src="kids.jpg" alt="" /><br />
   Sale this month on children's books
</div>

<div id="fiction">
   <img src="fiction.jpg" alt="" /><br />
   Fiction selection of the month
</div>

<div id="nfiction">
   <img src="nfiction.jpg" alt="" /><br />
   Non-fiction selection of the month
</div>

<div id="avalon">
   Avalon <span id="books">Books</span>
</div>

</body>
</html>

***script.js
Code:

/* 
   New Perspectives on JavaScript
   Tutorial 4
   Review Assignment

   Avalon Books
   Name: Chris Veal
   Date: 08/12/09

   Function List:
   xCoord(id)
      Returns the x-coordinate of the object with id with the value id

   placeIt(id, x, y)
      Places the id object at the coordinates (x,y)

   shiftIt(id, dx, dy)
      Moves the id object dx pixels to the right and dy pixels down

   showIt(id)
      Hides the id object by setting its visibility style to "visible"

   winWidth()
      Returns the width of the interior browser window in pixels

   winHeight()
      Returns the height of the interior browser window in pixels 

   setZ(id, z)
      Sets the z-index value of the id object

   swapIt(id1, id2, id3)
      Swaps the z-index values of id1, id2, id3

*/
function setZ(id, z) {					    // create new function called setZ with 2 parameters
object=document.getElementById(id);         // use the value of the id parameter to select the obj in the document with that id value
object.style.zIndex=z;						// set the z index of the object to the z parameter
}
function swapIt(id1, id2, id3) {			// create new function called swapIt with 3 parameters
var object1=document.getElementById(id1);	//getObj function to create the 3 variables named obj 1-3
var object2=document.getElementById(id2);	
var object3=document.getElementById(id3);

var z1=object1.style.zIndex;				//create 2 variables named z1-z3 set variables=to zIndex values of obj1-3
var z2=object2.style.zIndex;
var z3=object3.style.zIndex;

object1.style.zIndex=z3;					//change the zIndex value of obj1 to z3thus moving it to the bottom of the stack
object2.style.zIndex=z1;					//change the zIndex value of obj2 to z1thus moving it to the top of the stack
object3.style.zIndex=z2;					//change the zIndex value of obj3 to z2thus moving it to the middle of the stack
}

function placeIt(id, x, y) {
   var object=document.getElementById(id);
   object.style.left=x+"px";
   object.style.top=y+"px";
}

function shiftIt(id, dx, dy) {
   var object=document.getElementById(id);
   object.style.left=parseInt(object.style.left)+dx+"px";
   object.style.top=parseInt(object.style.top)+dy+"px";
}

function xCoord(id) {
   object=document.getElementById(id);
   xc=parseInt(object.style.left);
   return xc;
}

function showIt(id) {
   var object=document.getElementById(id);
   object.style.visibility="visible";
}

function winWidth() {
   if (window.innerWidth) return window.innerWidth;
   else if (document.documentElement) return document.documentElement.offsetWidth;
   else if (document.body.clientWidth) return document.body.clientWidth;
}

function winHeight() {
   if (window.innerHeight) return window.innerHeight;
   else if (document.documentElement) return document.documentElement.offsetHeight;
   else if (document.body.clientHeight) return document.body.clientHeight;
}

Hello everyone! I'm a complete newb to Javascript. I'm currently working on something that I am quite stuck with. Basically, I have a hexagon of pictures displayed on an HTML page. I need these pictures to rotate counter clockwise every 3000 ms. I have the code below and have made some adjustments, but how would I modify the functions to get the pictures to move?
Code:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Javascript Fun!</title>
<script type="text/javascript">
	<!--
	var pixArray = Array(6);

	function shiftPix(element, count, index) {
		var pi = 3.1415926535;  

		y = 300 + 150 * Math.cos(2 * pi * (count + index)/6);
	  	x = 300 + 150 * Math.sin(2 * pi * (count + index)/6);


	  	element.style.left = x + "px";
	  	element.style.top = y + "px";

	}
	function display() {

	  	for (j = 0; j < 6 ; j++) {
			shiftPix(pixArray[j], counter, j);
		}
		setTimeout("display()",3000);
	}
	// -->
</script>
</head>

<body onload="display();">

  <div id="Picture1" style="position:absolute;left:300px;top:450px">
	  <img src="picture1.jpg"  width="90" height="120" />
  </div>
  <div id="Picture2" style="position:absolute;left:430px;top:375px">
	  <img src="picture2.jpg"  width="90" height="120" />
  </div>
  <div id="Picture3" style="position:absolute;left:430px;top:225px">
	  <img src="picture3.jpg"  width="90" height="120" />
  </div>
  <div id="Picture4" style="position:absolute;left:300px;top:150px">
	  <img src="picture4.jpg"  width="90" height="120" />
  </div>
  <div id="Picture5" style="position:absolute;left:170px;top:225px">
	  <img src="picture5.jpg" width="90" height="120" />
  </div>
  <div id="Picture6" style="position:absolute;left:170px;top:375px">
	  <img src="picture6.jpg"  width="90" height="120" />
  </div>

  <script type="text/javascript">
	<!--
	  var counter = 0;

	  pixArray[0] = document.getElementById("Picture1");
	  pixArray[1] = document.getElementById("Picture2");
	  pixArray[2] = document.getElementById("Picture3");
	  pixArray[3] = document.getElementById("Picture4");
	  pixArray[4] = document.getElementById("Picture5");
	  pixArray[5] = document.getElementById("Picture6");

	  display();
	// -->
  </script>
</body>
</html>

Thanks in advance!!

Good afternoon!

I am very new to javascript and I am having trouble getting Javascript to work right. What I am trying to do is when a user clicks one of the boxes, the box will switch to a random picture (3 different ones). It is supposed to work like memory but with three of the same for a match, not just two. I am unsure if I am telling Java the right code. I am not sure if I am linking Java correctly to html. Here is my code, please help me!!!

Code:

<html>
<head>
  <title></title>
 
<script language="JavaScript">
Var score= 0;
var multiplier =1;
var counter = 0; // overall counter (1..3)
var counter1 = 0; // number of times picture 1 was picked
var counter2= 0; // number of times picture 2 was picked
var counter3 = 0; // number of times picture 3 was picked
var picture1 = 1.gif
var picture2 = 2.gif
var picture3 = 3.gif
function uncover (ref)
{
if (ref.alt != "0") 
	return;
if (counter == 3)

if (click() )
	choosePicture();
	

}
function choosePicture()
{
Math.random() = number;
if(number <= .33)
	return picture1;
else if(number > .33) && (number <= .66)
	return picture2;
else
	return picture3;
}
function click()
{

}

</script>
</head>
 
  <style type="text/css">
    input { text-align: center; background: #004080; color: white }
  </style>
  </script>
<form>
</head>
<body>
<center>
<table border="1" cellspacing="0" cellpadding="5">
<tr>  
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>

 </td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
   <td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td> 
</tr>
<tr>
    <td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
 </td>
   <td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
   <td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
 </td>
</tr>
<tr>
    <td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
 </td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
   <td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
 </td>
</tr>
</table>
</center>
 
</body>
</html>

please help, it's driving me crazy.
I have been trying to get the rotating pictures to work. I am using dreamweaver 8. If I put one rotator on the page it works fine but when I add the second they both don't work. here is my page code

[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head><meta name="google-site-verification" content="Ygobmtk4ksdYJZlIYpBAGC8rxkufPW--Lzmia27qUsc" />
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>The Beach House Hotel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_2.css" type="text/css" />
<style type="text/css">
<!--
.style8 {color: #FFFFFF}
.style9 {font-size: 24px}
.style10 { font-size: 24px;
font-weight: bold;
}
.style11 {color: #000000}
.style12 {font-size: 14px}
.style13 {font-size: 12px}
-->
</style>
<meta http-equiv="" content="the beach house hotel,pak nam pran,paknampran,pranburi,hua hin" />
</head>
<body bgcolor="#0066cc" onload="imgOne();">
<table width="73%" height="514" border="0" align="center" cellpadding="0" cellspacing="0">
<tr bgcolor="#99ccff">
<td height="60" colspan="4" nowrap="nowrap"><div align="center"><img src="images/hotelheader.jpg" alt="header" width="900" height="125" /></div></td>
</tr>

<tr bgcolor="#003399">
<td height="36" colspan="4" bgcolor="#0066CC"><div align="center"><a href="javascript:;"></a><span class="style13"><a href="index.html" class="style8">HOME </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="location.html" class="style8">LOCATION</a>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;<a href="menu.html" class="style8">MENU&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="reviews.html" class="style8">REVIEWS</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="specialevents.html" class="style8">SPECIAL EVENTS</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="roomrate.html" class="style8">ROOM RATES</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="kiteboarding.html" class="style8">KITEBORDING</a>&nbsp;&nbsp;&nbsp; <strong>&nbsp;<strong><a href="toursandrentals.html" class="style8">TOURS AND RENTALS</a></strong> </strong> <a href="contacts.html" class="style8"> &nbsp;&nbsp;&nbsp; CONTACT US</a></span></div></td>
</tr>

<tr bgcolor="#ffffff">
<td colspan="2" valign="top">

<body onload="imgOne();">
<table width="200" height="166">
<tr>
<td><span class="style9"><img src="http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_11.jpg" name="myimg" width="168" height="187" align="left" /></span></td>
</tr>
</table>
<h1>&nbsp;</h1>
</td>
<td width="701" valign="top"><div align="center"><br />
<table border="0" cellspacing="0" cellpadding="2" width="440">
<tr>
<td class="pageName"><p align="center" class="style10"><em>Welcome to</em></p>
<p align="center" class="style10"> The Beach House Hotel</p>
<p align="center" class="style10">KITEBOARDING PARADISE </p></td>
</tr>

<tr>
<td class="bodyText">
<p align="center"><span class="style10">The Beach House</span><span class="style12">&nbsp;<span class="style11">is located 25 Klms south of Hua Hin on the beach at Pak nam pran, on the beautiful West Coast of the Gulf of Siam. The hotel has a bamboo beach bar on the beach. The bars name is the Downwind Bar, many kiteboardes down wind to have a relaxing drink after a good days kiting. There</span></span> <span class="style12">are constant thermal winds</span>, <span class="style12">the strong wind begins November and carries on through to May, we get 2 types of wind here in Pranburi, the winds run from January to around end of February blowing between 12 &ndash; 25 knots then the Thermal wind kicks in March onward generating afternoon sea breeze winds between 12 &ndash; 20 knots. Most common wind sites such as windfinder and windguru do not forecast or show thermal winds. The forecast for the area would show 1 &ndash; 2 knots yet the thermal will be generating 18 knots in the afternoon. </span></p>
<p align="center"><br />
</p></td>
</tr>
</table>
<br />
&nbsp;<br />
</div></td>
<td width="156" valign="top"><span class="style9">
<meta http-equiv="Content-Type" content="text/html; charset=" />
</span>
<table width="200" height="186">
<tr>
<td height="180"></script><script language="javascript" type="text/javascript">img2 = new Image()


seconds = "2";

function imgOne()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_1.jpg'; //needed to be added
setTimeout("imgTwo()", seconds * 2000);
}
function imgTwo()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_2.jpg';
setTimeout("imgThree()", seconds * 2000);
}
function imgThree()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_3.jpg';
setTimeout("imgFour()", seconds * 2000);
}
function imgFour()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_4.jpg';
setTimeout("imgFive()", seconds * 2000);
}
function imgFive()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_5.jpg';
setTimeout("imgSix()", seconds * 2000);
}
function imgSix()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_6.jpg';
setTimeout("imgSeven()", seconds * 2000);
}
function imgSeven()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_7.jpg';
setTimeout("imgEight()", seconds * 2000);
}
function imgEight()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_9.jpg';
setTimeout("imgNine()", seconds * 2000);
}
function imgNine()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_10.jpg';
setTimeout("imgTen()", seconds * 2000);
}
function imgTen()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_11.jpg';
setTimeout("imgOne()", seconds * 2000);
}
</script>
<img src="http://thebeachhouse-hotel.com/images/sea_view_room.jpg" name="myimg" width="171" height="193" align="right" /></td>
</tr>
</table>
</script>
<script language="javascript" type="text/javascript">img2 = new Image()


seconds = "2";

function imgOne()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/beach_left.jpg'; //needed to be added
setTimeout("imgTwo()", seconds * 2000);
}
function imgTwo()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/beach_right.jpg';
setTimeout("imgThree()", seconds * 2000);
}
function imgThree()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/bed.jpg';
setTimeout("imgFour()", seconds * 2000);
}
function imgFour()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/fountians.jpg';
setTimeout("imgFive()", seconds * 2000);
}
function imgFive()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/full_beach_left.jpg';
setTimeout("imgSix()", seconds * 2000);
}
function imgSix()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/garden_view_rooms.jpg';
setTimeout("imgSeven()", seconds * 2000);
}
function imgSeven()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/hotel-at-night.jpg';
setTimeout("imgEight()", seconds * 2000);
}
function imgEight()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/main_bedroom8.jpg';
setTimeout("imgNine()", seconds * 2000);
}
function imgNine()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/pool_elephants.jpg';
setTimeout("imgTen()", seconds * 2000);
}
function imgTen()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/sea_view_room.jpg';
setTimeout("imgOne()", seconds * 2000);
}
</script></td>
</tr>

<tr>
<td width="20" height="22">&nbsp;</td>
<td width="161">&nbsp;</td>
<td width="701"><div align="center"></div></td>
<td>&nbsp;</td>
</tr>
</table>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6798030-3");
pageTracker._trackPageview();
} catch(err) {}</script></body>
</html>]

Thanks for any help.
regards Martin