Learn VBA & Macros in 1 Week!

JavaScript - Javascript Rotating Menu.

Full Excel VBA Course - Beginner to Expert

Javascript Rotating Menu.	View Content

I'm pretty new to Javascript and found this menu, which I want for my website.

I came up with the idea of making the links in the back of the circle (i've got a total of 10 links), invisible and put a globe in the middle (as background) - making it look like the links in the back go behind the globe and comes back from behind it again.

I've tried to do this myself with .this.style.invisibility="hidden"; but... i lack skill to do it the right way i guess :P

Does anyone know the solution?

Here's the code of the menu:

Code:

eye={
p:0,x:0,y:0,w:0,h:0,r:0,v:0,s:0,
isVertical:0,a1:0,a2:0,a3:0,
color:'#FFFFFF',
colorover:'#FFFFFF',
backgroundcolor:'#000000',
backgroundcolorover:'#000000',
bordercolor:'#000000',
fontsize:12,
fontfamily:'Arial',
pas:0,
spinmenu:function(){this.p=this.r/this.s;

this.a1=this.a2=this.isVertical?0:Math.PI/2},

spinmenuitem:function(a7,a6,a5){a4=" onclick='window.open(\""+a6+"\""+(a5?(",\""+a5+"\""):",\"_self\"")+")'";

document.write("<div id='spinmenu"+this.a3+"' style='cursor:pointer;cursor:expression(\"hand\");position:absolute;width:"+this.w+"px;left:"+this.h+"px;"+"background-color:"+this.backgroundcolor+";color:"+this.color+";border:1px solid "+this.bordercolor+";font:normal "+this.fontsize+"px "+this.fontfamily+";text-align:center;cursor:default;z-Index:1000;' onmouseover='this.style.color=\""+this.colorover+"\";this.style.backgroundColor=\""+this.backgroundcolorover+"\"'"+ "onmouseout='this.style.color=\""+this.color+"\";this.style.backgroundColor=\""+this.backgroundcolor+"\"'"+a4+">"+a7+"</div>");this.a3++},

muta:function(){a8=document.getElementById("controale");


for(i=0;i<this.a3;i++){a9=document.getElementById("spinmenu"+i+"");

a9s=a9.style;if(this.isVertical){xi=parseInt(this.r*Math.cos(this.a1+i*this.pas))/this.s;

yi=parseInt(this.r*Math.sin(this.a1+i*this.pas));

a10=(this.p+xi)/(2*this.p);

a11=this.fontsize*(this.p+xi)/(2*this.p)+2;

a12=parseInt(100*(this.p+xi)/(2*this.p))}else{xi=parseInt(this.r*Math.cos(this.a1+i*this.pas));

yi=parseInt(this.r*Math.sin(this.a1+i*this.pas))/this.s;

a10=(this.p+yi)/(2*this.p);

a11=this.fontsize*(this.p+yi)/(2*this.p)+2;

a12=parseInt(100*(this.p+yi)/(2*this.p))};

a13=(this.w-20)*a10+20;a14=(this.h-20)*a10+10;

a9s.top=(yi+this.y-a14/2)+"px";

a9s.left=(xi+this.x-a13/2)+"px";

a9s.width=a13+"px";a9s.fontSize=a11+"px";

a9s.zIndex=a12};

a8.style.top=this.y+(this.isVertical?this.r:this.p)+this.h/2+6;

a8.style.left=this.x-a8.offsetWidth/2;

if(this.a1!=this.a2){this.a1=(this.a1>this.a2)?(this.a1-this.pas/this.v):(this.a1+this.pas/this.v);

if(Math.abs(this.a1-this.a2)<this.pas/this.v)

this.a1=this.a2;

setTimeout("eye.muta()",10)}},spinmenuclose:function(){this.pas=2*Math.PI/this.a3;

document.write('<div id="controale" style="position:absolute"><button type="" onclick="eye.a2-=eye.pas;eye.muta()" onfocus="this.blur()">&lt;&lt;</button> <button type="" onclick="eye.a2+=eye.pas;eye.muta()" onfocus="this.blur()">&gt;&gt;</button></div>');eye.muta()}};

function getposOffset(what, offsettype){var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;var parentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}

return totaloffset;
}

Full Excel VBA Course - Beginner to Expert

Displaying A Rotating Image With Rotating Text.

Similar Tutorials

View Content

Ok so i have wrote some code which can be seen he http://www.runningprofiles.com/members/include/test.php

This works great but when i add the code to the page i want it on (include "include/test.php" for some reason the code does not work... the text is delayed and then lags behind the images.. this can been seen here http://www.runningprofiles.com/members/

I have no idea why its happening!

Code for the code is
Code:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26659912.html</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript"> 

function advance()
{
  $("#slideshow").cycle("next");
  cycleCaption();
}

var displayedIndex = 0
function cycleCaption()
{
  $("#caption").children().each( function(index) {
    $(this).css("font-weight", (index==displayedIndex)? "bold" : "normal" );
  });
  displayedIndex = (++displayedIndex==$("#caption").children().length)? 0 : displayedIndex;
}

$(function() {

  $("#slideshow").cycle({ timeout: 0 });

  $("img").each( function() {
    $("<div />").html($(this).attr("title")).appendTo($("#caption"));
  });

  cycleCaption();

  setInterval( "advance()", 2000 );

});

</script>
</head>
<body>

<div id="slideshow" style="float: left;">
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14882_jruqg6x4uu6frw2g872b.jpg" title="Aisling Cuffe Before Foot Locker" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14879_mzcgn05auhs24fnsygc1.jpg" title="Foot Locker Ballerness" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14880_u1npsmglw7b9t6hmoqhu.jpg" title="Foot Locker  The Rocket" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14887_9bblfhhvc0x66vebgjua.jpg" title="NCAA D2 Cro" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14884_mud4ewe6uh6ihrrpux6g.jpg" title="NXN Recap and Results" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14865_y1kt8vzejkvz25k075x2.jpg" title="Give Your " />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14877_1mlnygbenofquj5h3mcz.jpg" title="NCAA D2 XC Champ" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14855_9g971maove1jyos0h9zk.jpg" title="Defending" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14850_6u22ylfzym7sxq1zw8p8.jpg" title="NXN 121" />
</div>
<div id="caption" style="float: left;">
</div>

</body>
</html>

Help Rotating Javascript Scripts

Similar Tutorials

View Content

Hi guys,

I am new to javascript and I could really do with some help rotating 2 javascript scripts.

Here are examples of what they look like

A:
Code:

<script type="text/javascript"
    src="http://site.com/script.js?92924">
</script>

and

B:
Code:

<script type="text/javascript"
    src="http://site.com/script2.js?99220">
</script>

I need code to rotate these two so that only one of them is active at any one time. Ideally it would be great if I could set the percentage of time each is active. e.g use script A 80% of the time and B 20% of the time.

Is this even possible?

Thanks for any help at all.

Two Javascript: Rotating Banners, Both Work, But Not Together

Similar Tutorials

View Content

I have two rotating banners on the same page. Both work independently on other pages but won't work together.

Is there a reason in JS for this and is there a common solution?

Javascript Menu Tree Issue With Sub-menu

Similar Tutorials

View Content

I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code:

var NoOffFirstLineMenus=7; // Number of first level items
var LowBgColor='white'; // Background color when mouse is not over
var LowSubBgColor='white'; // Background color when mouse is not over on subs
var HighBgColor='black'; // Background color when mouse is over
var HighSubBgColor='black'; // Background color when mouse is over on subs
var FontLowColor='black'; // Font color when mouse is not over
var FontSubLowColor='black'; // Font color subs when mouse is not over
var FontHighColor='white'; // Font color when mouse is over
var FontSubHighColor='white'; // Font color subs when mouse is over
var BorderColor='black'; // Border color
var BorderSubColor='black'; // Border color for subs
var BorderWidth=1; // Border width
var BorderBtwnElmnts=1; // Border between elements 1 or 0
var FontFamily="arial,comic sans ms,technical" // Font family menu items
var FontSize=9; // Font size menu items
var FontBold=1; // Bold menu items 1 or 0
var FontItalic=0; // Italic menu items 1 or 0
var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right'
var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right'
var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
var ChildOverlap=.2; // horizontal overlap child/ parent
var ChildVerticalOverlap=.2; // vertical overlap child/ parent
var StartTop=05; // Menu offset x coordinate
var StartLeft=05; // Menu offset y coordinate
var VerCorrect=0; // Multiple frames y correction
var HorCorrect=0; // Multiple frames x correction
var LeftPaddng=3; // Left padding
var TopPaddng=2; // Top padding
var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
var MenuFramesVertical=1; // Frames in cols or rows 1 or 0
var DissapearDelay=1000; // delay before menu folds in
var TakeOverBgColor=1; // Menu frame takes over background color subitem frame
var FirstLineFrame='navig'; // Frame where first level appears
var SecLineFrame='space'; // Frame where sub levels appear
var DocTargetFrame='space'; // Frame where target documents appear
var TargetLoc=''; // span id for relative positioning
var HideTop=0; // Hide first level when loading new document 1 or 0
var MenuWrap=1; // enables/ disables menu wrap 1 or 0
var RightToLeft=0; // enables/ disables right to left unfold 1 or 0
var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover
var WebMasterCheck=0; // menu tree checking on or off 1 or 0
var ShowArrow=1; // Uses arrow gifs when 1
var KeepHilite=1; // Keep selected path highligthed
var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height

function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}

// Menu tree
// MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);
// For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg"

Menu1=new Array("Home","","",3);
Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150);
Menu1_2=new Array("Acknow","Acknowledgement.htm","",0);
Menu1_3=new Array("Prayer","Prayer.htm","",0);

Menu2=new Array("About Us","","",4);
Menu2_1=new Array("Debra","bio.htm","",0,20,150);
Menu2_2=new Array("Seamus","Seamus.htm","",0);
Menu2_3=new Array("Locations","location.htm","",0);
Menu2_4=new Array("Contact Us","contact.htm","",0);

Menu3=new Array("Services","","",7);
Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150);
Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0);
Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0);
Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0);
Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0);
Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0);
Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0);

Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0);

Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0);

Menu6=new Array("Articles","","",3);
Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150);
Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0);
Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0);

Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0);

Rotating Images

Similar Tutorials

View Content

I use a rotating image script on my website currently, but I'm taking a JavaScript class and started playing around my script to see if I can get it to display two random images at once, but never the same. Here's my script:

Code:

<!--
var images = new Array("<a href='index.php'><img src='images/image.gif' alt=''></a>","<a href='home.php'><img src='images/image.gif' alt=''/></a>);

index = Math.floor(Math.random() * images.length);

document.write(images[index]);
// -->

Where does the index come from? And how do I interpret images[index] if I were to read it out loud?

I thought I could add ++ to the end of images.length to get it to display at least two images, but nada. I'm still new at this and would really appreciate if someone could talk me through this? Thanks!

Rotating Banner

Similar Tutorials

View Content

Hello,

I'm looking for an option for a rotating banner on a website.

I'd like to have a banner that rotates per visit. I don't mean every time a person returns to a website. I mean person A comes to the site and banner A is displayed. Then person B comes to a site and another banner is displayed.

Is this possible?

Help: Rotating Display

Similar Tutorials

View Content

Hi,

I am trying to have an array of pictures rotating among them every 300 milliseconds.

I am having a hard time to walk through the arrays to set new x and y values and rotate them to the new place.

I think I have problems with my display code, where I should display the new position every time I call settimeout, exchanging the positions x and y from the array indexes position.

There is my code:

Code:

<?xml version="1.0" encoding="utf-8" ?>

<!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>hexagonal array</title>
<script type="text/javascript">
	<!--
	var pixArray = Array(6);

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

		// left: x coordinate, top: y coordinate
		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++) {			
			setTimeout("shiftPix(" + x + ", " + y + ")", 300);
			counter++;
			shiftPix(pixArray[j], counter, j);
		}
				
		
	}
	// -->
</script>
</head>

<body>

  <h3>Hexagonal Array </h3>


  <div id="John" style="position:absolute;left:300px;top:450px">
	  <img src="picture1.jpg" alt="John Santore" width="90" height="120" />
  </div>
  <div id="Seikyung" style="position:absolute;left:430px;top:375px">
	  <img src="picture2.jpg" alt="Seikyung Jung" width="90" height="120" />
  </div>
  <div id="Glenn" style="position:absolute;left:430px;top:225px">
	  <img src="picture3.jpg" alt="Glenn Pevlicek" width="90" height="120" />
  </div>
  <div id="Lee" style="position:absolute;left:300px;top:150px">
	  <img src="picture4.jpg" alt="Lee Mondshein" width="90" height="120" />
  </div>
  <div id="Abdul" style="position:absolute;left:170px;top:225px">
	  <img src="picture5.jpg" alt="Abdul Sattar" width="90" height="120" />
  </div>
  <div id="Toby" style="position:absolute;left:170px;top:375px">
	  <img src="picture6.jpg" alt="Toby Lorenzen" width="90" height="120" />
  </div>

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

	  pixArray[0] = document.getElementById("John");
	  pixArray[1] = document.getElementById("Seikyung");
	  pixArray[2] = document.getElementById("Glenn");
	  pixArray[3] = document.getElementById("Lee");
	  pixArray[4] = document.getElementById("Abdul");
	  pixArray[5] = document.getElementById("Toby");

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

Rotating Banner Help

Similar Tutorials

View Content

Hi
I am using the following code to create rotating banners. This all works when I fill in links to swf files on all 5 of my fields and then set a limit in the limit field. What I want to be able to do is have the ability to only have one banner field filled in with the rest blank but this breaks the page when the is nothing in the other 4 fields or have 2 filled in etc etc

Code:

<script>
var maxFlashAdNo=100;
adFlashNo= Math.round(Math.random() * maxFlashAdNo);
var logolimit2="<%=requestItem.getFieldValue("iLogo2")%>";
var logolimit3="<%=requestItem.getFieldValue("iLogo3")%>";
var logolimit4="<%=requestItem.getFieldValue("iLogo4")%>";
var logolimit5="<%=requestItem.getFieldValue("iLogo5")%>";


var secflash=logolimit2;
var thirdflash=logolimit3;
var fourthflash=logolimit4;
var fifthflash=logolimit5;


//alert("2=" + secflash);
//alert("3=" + thirdflash);
//alert("4=" + fourthflash);
//alert("5=" + fifthflash);
//alert(adFlashNo);
if(fifthflash>0&&adFlashNo>fifthflash){
document.write("<%=requestItem.getFieldValue("sLogo5").replaceAll("\"","'")%>");
}else if(fourthflash>0&&adFlashNo>fourthflash){
document.write("<%=requestItem.getFieldValue("sLogo4").replaceAll("\"","'")%>");
}else if(thirdflash>3&&adFlashNo>thirdflash){
document.write("<%=requestItem.getFieldValue("sLogo3").replaceAll("\"","'")%>");
}else if(secflash>2&&adFlashNo>secflash){
document.write("<%=requestItem.getFieldValue("sLogo2").replaceAll("\"","'")%>");
}else{
document.write("<%=requestItem.getFieldValue("sLogo").replaceAll("\"","'")%>");
}

</script>

Rotating Banner/photos

Similar Tutorials

View Content

Hi All!

I'm somewhat new to CSS/Javascript but need assistance finding code that will help me accomplish the tool on the following page:

http://www.constantcontact.com/index.jsp

If you look at the rotating information on the left-side of the Constant Contact website, I would like to be able to have that same functionality on my website. If anyone knows how this is accomplished, any assistance would be greatly appreciated. I am looking for the following functionality:

1) Have the ability to hover over each number to change the main photo

2) Have the script advance the main photo on its own

3) Be able to click the main photo when it is selected

Any questions, let me know!

Thanks,

Eric

Rotating Feature Box Seo Friendly?

Similar Tutorials

View Content

Hey all - trying to find a good rotating box with SEO content. Like this one, do you know what they are using or how I can accomplish this with something similar?

http://www.studioscentral.com/

Thanks in advance

Positioning A Rotating Header - Help!

Similar Tutorials

View Content

A full description of the problem, all the code and the test is also posted on:

http://happinesshabitS.com/testroto4.htm

I am trying to install a rotating banner on http://HappinessHabit.com

How do I position the banner so it is NOT at the upper left hand corner of the page? I have tried wrapping it in <div> tags but that hasn't worked.

I can get it rotating fine on the test page, but cannot place the rotating banner where I need it - see: http://happinesshabitS.com

The code I placed on the test page is:

Code:

<script type="text/javascript" src="jshdrotate-1.js" ></script>
</head>

and

Code:

</head>
<body onLoad="preloadImgs();randomImages();">
<img src="rotoimage1/ri-image-01.jpg" name="rotator" width="800" height="135" border="0" id="rotator"></a>

Can I place this right above the </body> tag?

The code I placed in a separate (jshdrotate-1.js) file is on http://happinesshabits.com/javahelp.pdf and below:

Code:

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// Comma separated list of images to rotate
var imgs = new Array('rotoimage1/ri-image-01.jpg','rotoimage1/ri-image-02.jpg','rotoimage1/ri-image-03.jpg','rotoimage1/ri-image-04.jpg','rotoimage1/ri-image-05.jpg', 'rotoimage1/ri-image-06.jpg', 'rotoimage1/ri-image-07.jpg', 'rotoimage1/ri-image-08.jpg','rotoimage1/ri-image-09.jpg', 'rotoimage1/ri-image-10.jpg','rotoimage1/ri-image-11.jpg', 'rotoimage1/ri-image-12.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 6000;
var counter = 0;

function preloadImgs(){
  for(var i=0;i<imgs.length;i++){
    MM_preloadImages(imgs[i]);
  }
}

function randomImages(){
  if(counter == (imgs.length)){
    counter = 0;
  }
  MM_swapImage('rotator', '', imgs[counter++]);
  setTimeout('randomImages()', delay);
}

Many thanks for your help ! I am really in the dark about this. I'd asked this question before but didn't get any replies.

Did I post and describe what I am trying to do and the problem correctly?

Many thanks!

Rotating Image Trouble

Similar Tutorials

View Content

Trying To Link Rotating Images

Similar Tutorials

View Content

Hello Everyone!

There are several other pages over a span of sites that deal with this matter, but none that seem to work for me. So I'm hoping you guys can help.

I'm trying to get a set of rotating images to house a set of links that visitors can click on.

Here's code I slapped together:

Code:

<script language="javascript" type="text/javascript">

var imgArray = new Array();
  // Enter the names of the images below
  imgArray[0]="http://www.555.com/file.JPG";
  imgArray[1]="http://www.555.com/file.JPG";
  imgArray[2]="http://www.555.com/file.JPG";
  
  
// Set up URL array
var URL = new Array();
	URL[0] = "http://www.555.com"; 
	URL[1] = "http://www.555.com"; 
	URL[2] = "http://www.555.com"; 

   
   
var newImage = 0 ;
var totalImg = imgArray.length ;
var currentURL = (URL.length - 1);

function cycleImg() {
  if (newImage == totalImg) {
    newImage = 0 ;
  } else {
			document.image.src = imgArray[newImage];
			document.image.URL = URL[a] ;
			// set the time below for length of image display
			// i.e., "4*1000" is 4 seconds
			setTimeout("cycleImg()", 3*1000);
			
			newImage++;
			} 

}

</script>

<body onload="cycleImg();">
<div id="rotator_div">
<p style="text-align:center;"> <strong>Current Sponsors:</strong></p>
<img id="rotating_img" src="http://www.555.com/file.JPG" name="image"/>
</div>
</body>

Now it only loads the first image, and disappears; plus the image that does load, doesn't have the corresponding URL attached to it in as a link.

Could anyone please help with the adjustments that I need to make to pull this off? Thanks very much in advance.

Rotating Background Image Help

Similar Tutorials

View Content

Hey, everyone! I found this script that works great for what it's for. However, I would like to use it for background images. Can someone tell me how to adjust this script so it can be used for backgrounds? Thanks in advance!

Web Page Code Code:

<html>

<head>

<title>slayeroffice | code | image cross fade redux</title>

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

<script type="text/javascript" src="xfade2.js"></script>

</head>

</div>
<body background="id=imageContainer">

<div id="imageContainer">

<img src="http://slayeroffice.com/code/imageCrossFade/img1.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img2.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img3.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img4.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img5.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img6.jpg">

</div>

</body>
</html>

Style Sheet 1 Code:

#imageContainer {
	height:309px;
}

#imageContainer img {
	display:none;
	position:absolute;
	top:0; left:0;
}

Style Sheet 2 Code:

#imageContainer {
	position:relative;
	margin:auto;
	width:500px;
	border:1px solid #000;
}

JavaScript Code:

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
	if(!d.getElementById || !d.createElement)return;

	css = d.createElement("link");
	css.setAttribute("href","xfade2.css");
	css.setAttribute("rel","stylesheet");
	css.setAttribute("type","text/css");
	d.getElementsByTagName("head")[0].appendChild(css);

	imgs = d.getElementById("imageContainer").getElementsByTagName("img");
	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = "block";
	imgs[0].xOpacity = .99;
	
	setTimeout(so_xfade,1000);
}

function so_xfade() {
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;

	nOpacity = imgs[nIndex].xOpacity;
	
	cOpacity-=.05; 
	nOpacity+=.05;
	
	imgs[nIndex].style.display = "block";
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;
	
	setOpacity(imgs[current]); 
	setOpacity(imgs[nIndex]);
	
	if(cOpacity<=0) {
		imgs[current].style.display = "none";
		current = nIndex;
		setTimeout(so_xfade,1000);
	} else {
		setTimeout(so_xfade,50);
	}
	
	function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}
	
}

Table Of Rotating Pictures Help!

Similar Tutorials

View Content

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

How To Make A Rotating Cipher???

Similar Tutorials

View Content

My program currently is just a sort of substitution cipher, but I need to write another function named RotateLeft that takes a string as input (the string called 'key') and rotates the characters in that string one position to the left, and then insert that into the Encode and Decode functions, turning the whole thing into a rotating cipher. I'm not really sure how to start? Can anyone help me?

Here's what I have so far:

Code:

<html>

<head>
  <title> Substitution Cipher</title>

  <script type="text/javascript">

    function Encode(message, key)
    // Assumes: message is the string to be encoded, and
    //          key is a string of the 26 letters in arbitrary order
    // Returns: the coded version of message using the substitution key 
    {
        var alphabet, coded, i, ch, index;

        alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

        coded = "";  
        i = 0;                                    
        while (i < message.length) {                // for as many letters as there are
            ch = message.charAt(i);                 //   access each letter in message
            index = alphabet.indexOf(ch);           //   find its position in alphabet
            if (index == -1) {                      //   if it's not a capital letter,
                coded = coded + ch;                 //     then leave it as is & add
            }                                       //   otherwise,
            else {                                  //     find the corresponding
                coded = coded + key.charAt(index);  //     letter in the key & add
            }
            i = i + 1;

        }
        return coded;
    }



    function Decode(encoded, key)
    // Assumes: message is the string to be encoded, and
    //          key is a string of the 26 letters in arbitrary order
    // Returns: the coded version of message using the substitution key 
    {
        var alphabet, coded, i, ch, index;

        alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

        coded = "";  
        i = 0;                                    
        while (i < encoded.length) {                     // for as many letters as there are
            ch = encoded.charAt(i);                      //   access each letter in the encoded message
            index = key.indexOf(ch);                     //   find its position in key
            if (index == -1) {                           //   if it's not a capital letter,
                coded = coded + ch;                      //     then leave it as is & add
            }                                            //   otherwise,
            else {                                       //     find the corresponding
                coded = coded + alphabet.charAt(index);  //     letter in the alphabet & add
            }
            i = i + 1;
        }
        return coded;
    }



  </script>
</head>

<body>
  <table>
    <tr><td>According to the substitution cipher, each letter: <BR><BR> </td>
        <td> <tt>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br /></tt>
              <tt>| | | | | | | | | | | | | <br /></tt>
              <tt>v v v v v v v v v v v v v </tt> </td>
    </tr>
    <tr><td>is encoded using the corresponding letter in the key: </td>
        <td><input type="text" id="key" size="26" style="font-family:Courier,Monospace" 

value="XYZABCDEFGHIJKLMNOPQRSTUVW"
		onChange="document.getElementById('key').value = document.getElementById('key').value.toUpperCase();"/> 

</td>
    </tr>
    </table>

    <hr />

ENCODE MESSAGE
    <table>
    <tr><td><textarea id="message" rows="8" cols="30" onChange="mid = document.getElementById('message').value;
                                                                mid = mid.toUpperCase();
                                                                document.getElementById('message').value = 

mid;"></textarea> </td>

        <td><input type="button" value="Encode ==>"
                   onclick="document.getElementById('encoded').value=
                              Encode(document.getElementById('message').value,
                                     document.getElementById('key').value);" />

<p><input type="button" value="Decode <=="
                     onclick="document.getElementById('message').value=
                                Decode(document.getElementById('encoded').value,
                                       document.getElementById('key').value);" /> </p> </td>


        <td><textarea id="encoded" rows="8" cols="30"></textarea> </td>
    </tr>
  </table>



</body>
</html>

Rotating Slideshow With Video

Similar Tutorials

View Content

Hello - I've got an issue that I have mostly figured out except for one final step. I managed to build a rotating banner that goes through 4 slides with a YouTube video embedded on one side and text on the other. The entire slide (a large table) rotates automatically every 2.5 seconds - and when the user watches the video the slide stops onClick on the div.

The problem I am having is getting the slides to start rotating again once the movie ends. Is there any way to do this? Basically I want the slides to stop rotating (not just the video - the entire slideshow) when the YouTube video is playing, and then when the video stops the slides start moving again after a few seconds. Is this even possible? What's the best way to do this? My code is below for two of the slides and the javascript code:

(The conditional ie statements are temporary for now until I find a better solution for IE6)

Code:

<!--[if IE 6]>
<table cellpadding="0" cellspacing="0" width="1000"><tr><td valign="top" width="500">
<![endif]-->
                    
                    <div class="ievideo" onclick="badrotate=true;" style="width: 450px; height: 294px; float: left; padding: 15px;"><!-- TemplateBeginEditable name="HomeVideo1" -->
                      <script type="text/javascript">
AC_AX_RunContent( 'width','400','height','250','onclick','badrotate=true;','src','http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US' ); //end AC code
</script><noscript><object width="400" height="250" onclick="badrotate=true;">
                        <param name="movie" id="movie2" value="http://www.youtube.com/v/6Cka8KoMhPw?fs=1&amp;hl=en_US" />
                        <param name="allowFullScreen" value="true" />
                        <param name="allowscriptaccess" value="always" />
                        <embed src="http://www.youtube.com/v/6Cka8KoMhPw?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>
                      </object></noscript>
                    <!-- TemplateEndEditable --></div> 
                    
                    <!--[if IE 6]>
</td><td width="500" valign="top">
<![endif]-->
                    
                    <div class="ievideo2" style="width: 500px; height: 294px; float: left;"><!-- TemplateBeginEditable name="HomeVideo1Text" --><img src="../images/layout/integrated_health_systems.gif" style="margin-top: 40px;" />
                        <p>Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis,consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed. Duis quis nunc. Sed enim. Elementum sed, bibendum quis,consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, con sectetuer.</p>
                      <a href="#"><img src="../images/layout/learn_more_now.gif" style="margin-left: 150px;" /></a><!-- TemplateEndEditable --></div>
                    
                    <!--[if IE 6]>                  
</td></tr></table>
<![endif]-->
                    
                    </div> 
                    
                    </div> 
                    <!-- videobox 1 -->
                    
                    <!--[if IE 6]>
</div>
<![endif]--> 
                    
                    
                    <!--[if IE 6]>
<div>
<![endif]-->
                    
                    <!-- videobox2 -->
                    <div class="dyncontent" style="filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;">
                    
                    <div class="videobox" style="width: 1000px; height: 294px;">
                    
                    <div class="ievideo" onclick="badrotate=true;" style="width: 450px; height: 294px; float: left; padding: 15px;"><!-- TemplateBeginEditable name="HomeVideo2" -->
                      <script type="text/javascript">
AC_AX_RunContent( 'width','400','height','250','onclick','badrotate=true;','src','http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US' ); //end AC code
</script><noscript><object width="400" height="250" onclick="badrotate=true;">
                        <param name="movie" id="movie3" value="http://www.youtube.com/v/9fwNwiBU2GA?fs=1&amp;hl=en_US" />
                        <param name="allowFullScreen" value="true" />
                        <param name="allowscriptaccess" value="always" />
                        <embed src="http://www.youtube.com/v/9fwNwiBU2GA?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>
                      </object></noscript>
                    <!-- TemplateEndEditable --></div> 
                    
                  <div class="ievideo2" style="width: 500px; height: 294px; float: left;"><!-- TemplateBeginEditable name="HomeVideo2Text" --><img src="../images/layout/integrated_health_systems.gif" style="margin-top: 40px;" />
                      <p>This is the 2nd video</p>
                      <a href="#"><img src="../images/layout/learn_more_now.gif" style="margin-left: 150px;" /></a><!-- TemplateEndEditable --></div>
                    
                    </div> 
                    
                    </div> 
                    <!-- videobox 2 -->
                    
                    <!--[if IE 6]>
</div>
<![endif]-->

Here is the script:

Code:

<script type="text/javascript">
    var badrotate = false;
    if (document.all || document.getElementById){ //if IE4 or NS6+
    document.write('<style type="text/css">\n')
    document.write('.dyncontent{position:absolute;left:0px;top:0px; width: 1000px; height: 294px;}\n')
    document.write('</style>')
    }

    var speed=5000;
    var curcontentindex=0
    var messages=new Array()

    function getElementByClass(classname){
    var inc=0
    var alltags=document.all? document.all : document.getElementsByTagName("*")
    for (i=0; i<alltags.length; i++){
     if (alltags[i].className==classname)
      messages[inc++]=new zxcAnimate('opacity',alltags[i],0);
     }
    }

    function rotatecontent(){
	if(badrotate==true) return;
    //get current message index (to show it):
    curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
    //get previous message index (to hide it):
    prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
    messages[prevcontentindex].obj.style.zIndex="0" //hide previous message
    messages[prevcontentindex].animate(100,0,speed/4);
    messages[curcontentindex].obj.style.zIndex="1" //show current message
    messages[curcontentindex].animate(0,100,speed/4);
    }


    window.onload=function(){
    if (document.all || document.getElementById){
    getElementByClass("dyncontent");
    setInterval("rotatecontent()", speed);
    }
    }

    </script>

Thank you for any help/advice!

Rotating Banner Links

Similar Tutorials

View Content

Hi,

I'm trying to figure out how to put up links on a rotating homepage banner. I've tried everything I could find through Googling, etc. and nothing seems to work. Is this because the coordinates for the banner links need to be set in Flash? I tried to set them in Flash but didn't have enough experience with the program. Is there a way I can put some custom code in for the links?

Any help would be much appreciated. Thanks!

Links To Rotating Images In New Window?

Similar Tutorials

View Content

Hello,

I need the links to the rotating images to open in a new window. Is there an easy way to do this?

Here is my code:

[CODE]
<script type="text/javascript">
var preload_ctrl_images=true;

//And configure the image buttons' images he
var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["/pics/nav/home2/music-club_manatella.jpg", "", "/progs/main/manatella.pdf"];
slides[1] = ["/pics/nav/home2/teen-read-week2011.jpg", "", "/teens/teen-read-week2011.pdf"];
slides[2] = ["/pics/nav/home2/oceanway-express.jpg", "", "/lib/branches/OWY.html"];
slides[3] = ["/pics/nav/home2/jea-green.jpg", "", "/progs/jpl/home-energy-evaluation.html"];
slides[4] = ["/pics/nav/home2/childrens-summer-reading.jpg", "", "/kids/kids-summer-reading2011.pdf"];
slides[5] = ["/pics/nav/home2/teen-summer-reading.jpg", "", "/teens/teens-summer-reading2011.pdf"];
slides[6] = ["/pics/nav/home2/internet-safety.jpg", "", "/Training/Internet-Safety/internet-safety.html"];
slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed
//above slide show uses only the defaults
</script>

<script src="http://jpl.coj.net/common/javascripts/swissarmy.js" type="text/javascript">
</script>
[CODE]

[URL]http://jpl.coj.net

Thank you so much for your help, Elbee

Rotating 2 Sets Of Pictures On The Same Page

Similar Tutorials

View Content

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

<head><meta name="google-site-verification" content="Ygobmtk4ksdYJZlIYpBAGC8rxkufPW--Lzmia27qUsc" />

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

</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>     <a href="location.html" class="style8">LOCATION</a>       <a href="menu.html" class="style8">MENU </a>     <a href="reviews.html" class="style8">REVIEWS</a>      <a href="specialevents.html" class="style8">SPECIAL EVENTS</a>      <a href="roomrate.html" class="style8">ROOM RATES</a>      <a href="kiteboarding.html" class="style8">KITEBORDING</a>    <strong> <strong><a href="toursandrentals.html" class="style8">TOURS AND RENTALS</a></strong> </strong> <a href="contacts.html" class="style8">     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> </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"> <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 – 25 knots then the Thermal wind kicks in March onward generating afternoon sea breeze winds between 12 – 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 – 2 knots yet the thermal will be generating 18 knots in the afternoon. </span></p>
<p align="center"><br />
</p></td>
</tr>
</table>
<br />
 <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"> </td>
<td width="161"> </td>
<td width="701"><div align="center"></div></td>
<td> </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