JavaScript - Auto Changing Pictures (3 Gallery)

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

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

I have added an image rotator to my website using Java Script. The box for the rotator shows up on the published site but not the pictures. When I click on the box it links to the pictures I have added, and I know they are rotating because it changes every time I click on it. Also, the code does not seem to be showing up when I view the source of the page. This is a link to my site: http://www.jenniferbrenn.com/Fashion/Home.html the problem is in the box beneath the name "Jenny" near the bottom of the page.

This is the code I am using:
[CODE]
<script language="JavaScript">
// Copyright 1996, Infohiway, Inc. (http://www.infohiway.com)
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
<!--
function adArray() {
for (i=0; i*2<adArray.arguments.length; i++) {
this[i] = new Object();
this[i].src = adArray.arguments[i*2];
this[i].href = adArray.arguments[i*2+1];
}
this.length = i;
}
function getAdNum() {
dat = new Date();
dat = (dat.getTime()+"").charAt(8);
if (dat.length == 1)
ad_num = dat%ads.length;
else
ad_num = 0;
return ad_num;
}
var ads = new adArray(
"images/banner_1.gif","http://web.me.com/jim.stevenson/Fashion/Media/bee_vogue.jpg",
"images/banner_2.gif","http://www.superficialdiva.com/wp-content/uploads/2009/01/hana-soukupova-vogue-belleza-february-2009-magazine-cover.jpg",
"images/banner_3.gif","http://bp3.blogger.com/_maRo3z-KVqA/R9IKSDQPIwI/AAAAAAAAB4g/ghZysBSq-9M/s400/Victoria-Beckham-Vogue.jpg");
var ad_num = getAdNum();
document.write('<CENTER><TABLE CELLPADDING=0 CELLSPACING=1 BORDER=0><TR><TD '
+'ALIGN=CENTER><FONT SIZE=2 FACE=Arial><B>Jenny '
+'</FONT></TD><TR></TR><TD><A HREF="'+ads[ad_num].href+'"><IMG SRC="'+ads[ad_num].src+'" '
+'WIDTH="240" HEIGHT="320" BORDER=0 name=js_ad></A></TD></TR></TABLE></CENTER>');
link_num = document.links.length-1;
function rotateSponsor() {
if (document.images) {
ad_num = (ad_num+1)%ads.length;
document.js_ad.src = ads[ad_num].src;
document.links[link_num].href = ads[ad_num].href;
setTimeout("rotateSponsor()",5000);
}
}
setTimeout("rotateSponsor()",5000);
// -->
</script>
[CODE]

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;
}

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>

On my website, I have random logos appear on the home page as products that I recommend. I would like to make these logos into links to the website they are from, so that when one clicks on the picture, it directs you to the site, but I can't quite get it to work, and I know very little about Javascript (as you may know from my previous question about Javascript). If someone could help me crack the code, that would be great

Here's my current JS code:

Code:

<!--

// 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. Rememeber
// to increment the theImages[x] index!

theImages[0] = 'http://i200.photobucket.com/albums/aa216/Jilldear/classicequinelogo-1.jpg'
theImages[1] = 'images/logo2.jpg'
theImages[2] = 'http://i200.photobucket.com/albums/aa216/Jilldear/pyranha-1.jpg'

// ======================================
// do not change anything below this line
// ======================================

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]+'">');
}

//-->

And my current HTML code:

Code:

<script language="JavaScript">
<!--
showImage();
//-->
</script>

Sorry for being so green with JS

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

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

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

Hi guys.

I have been scowering high and low for code to create a Java drop down menu bar for my site.

I want it to be something like this: http://javascript-array.com/scripts/...rop_down_menu/

but want to insert pictures into it, for each heading, to create a new looking bar if thats possible.

Can you do a mouseover with them also, as i currently have one set up, to change text colour (2 different images per button) but am unsure of the code.

Thanks in advance.

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

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

Hopefully this is a noob and simple question to answer, but I used this random ads script and modified it to show random boxarts for PS3 games..
http://javascript.internet.com/misce...andom-ads.html


You can see what I'm trying to do he
http://empireelite.org/index2.htm - (temporary page just for testing the code, refresh and see that the PS3 boxarts become randomized)


Everything looks perfect in Internet Explorer, but in Firefox it looks to have about 15px in spacing on both top and bottom. I know the table itself is fine, because everything fits fine on the real main page http://www.empireelite.org/


The pictures are also not overlapping the cell. It's 9 pics x 22 width, (198px in a 200px wide cell) and it has the same spacing even if I just have 1 pic there using the script.


Is there a code I can add or remove to get rid of the spacing in Firefox?


I already removed , spacing from this line:
function randomorder(targetarray, spacing) {

and removed +spacing from this line:
document.write(targetarray[the_one]+spacing)


Neither did anything and the script works the same way without those small pieces of code (I'm not sure what either of them did to begin with).



Here is the javascript page I'm using:
http://empireelite.org/randomAds.js

And also View Source in this test page:
http://empireelite.org/index2.htm