JavaScript - Need Help With Image Shuffling Script

I'm building a website with scrolling images at the top, I managed to find some code which seemed to work fine but then when I uploaded it to the server there were suddenly huge gaps between the images.
www.s-remy.com/B/index.html

here's the code for the scrolling

Code:

<script type="text/javascript">
<!--
// ********** User Defining Area **********

data=[
["scroll1.png","",""],
["scroll3.png","",""]
// no comma at end of last index
]

imgPlaces=40 // number of images visible
imgWidth=50 // width of the images
imgHeight=81 // height of the images
imgSpacer=4 // space between the images

dir=0 // 0 = left, 1 = right

newWindow=0 // 0 = Open a new window for links 0 = no  1 = yes

// ********** End User Defining Area **********

moz=document.getElementById&&!document.all

step=1
timer=""
speed=50
nextPic=0
initPos=new Array()
nowDivPos=new Array()

function initHIS3(){

for(var i=0;i<imgPlaces+1;i++){ // create image holders
newImg=document.createElement("IMG")
newImg.setAttribute("id","pic_"+i)
newImg.setAttribute("src","")
newImg.style.position="absolute"
newImg.style.width=imgWidth+"px"
newImg.style.height=imgHeight+"px"
newImg.style.border=0
newImg.alt=""
newImg.i=i
newImg.onclick=function(){his3Win(data[this.i][2])}
document.getElementById("display_area").appendChild(newImg)
}

containerEL=document.getElementById("his3container")
displayArea=document.getElementById("display_area")
pic0=document.getElementById("pic_0")

containerBorder=(document.compatMode=="CSS1Compat"?0:parseInt(containerEL.style.borderWidth)*2)
containerWidth=(imgPlaces*imgWidth)+((imgPlaces-1)*imgSpacer)
containerEL.style.width=containerWidth+(!moz?containerBorder:"")+"px"
containerEL.style.height=imgHeight+(!moz?containerBorder:"")+"px"

displayArea.style.width=containerWidth+"px"
displayArea.style.clip="rect(0,"+(containerWidth+"px")+","+(imgHeight+"px")+",0)"

imgPos= -pic0.width

for(var i=0;i<imgPlaces+1;i++){
currentImage=document.getElementById("pic_"+i)

if(dir==0){imgPos+=pic0.width+imgSpacer} // if left

initPos[i]=imgPos
if(dir==0){currentImage.style.left=initPos[i]+"px"} // if left

if(dir==1){ // if right
document.getElementById("pic_"+[(imgPlaces-i)]).style.left=initPos[i]+"px"
imgPos+=pic0.width+imgSpacer
}

if(nextPic==data.length){nextPic=0}

currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i=nextPic
currentImage.onclick=function(){his3Win(data[this.i][2])}
nextPic++
}

scrollHIS3()
}

timer=""
function scrollHIS3(){
clearTimeout(timer)
for(var i=0;i<imgPlaces+1;i++){
currentImage=document.getElementById("pic_"+i)

nowDivPos[i]=parseInt(currentImage.style.left)

if(dir==0){nowDivPos[i]-=step}
if(dir==1){nowDivPos[i]+=step}

if(dir==0&&nowDivPos[i]<= -(pic0.width+imgSpacer) || dir==1&&nowDivPos[i]>containerWidth){

if(dir==0){currentImage.style.left=containerWidth+imgSpacer+"px"}
if(dir==1){currentImage.style.left= -pic0.width-(imgSpacer*2)+"px"}

if(nextPic>data.length-1){nextPic=0}

currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i=nextPic
currentImage.onclick=function(){his3Win(data[this.i][2])}

nextPic++

}
else{
currentImage.style.left=nowDivPos[i]+"px"
}

}
timer=setTimeout("scrollHIS3()",speed)

}

function stopHIS3(){
clearTimeout(timer)
}

function his3Win(loc){
if(loc==""){return}
if(newWindow==0){
location=loc
}
else{
//window.open(loc)
newin=window.open(loc,'win1','left=430,top=340,width=300,height=300') // use for specific size and positioned window
newin.focus()
}
}

// add onload="initHIS3()" to the opening BODY tag

// -->

I'm not very familiar with JavaScript so I can't find any issues with it. I've tried changing the imgspace value but it doesn't seem to work?

I have a banner ad with an image rotation embedded in a DIV. It works quite fine, but doesn't have required SEO info, ie: alt text.

Here is the code that is working.

Code:

<div style="background-image: url(http://www.earthwindwater.com.au/banners/skiracersworld/banner-bg.png);height:148px;width:982px;border:0px;">
<div style="float:left;height:148px;border:0px;">
<a href="http://www.earthwindwater.com.au" target="_blank"><img border=0 align="absmiddle" alt="Earth Wind and Water Sports Action Cameras" src="http://www.earthwindwater.com.au/banners/skiracersworld/EWW-logo.png" /></a>
</div>
<div style="height:148px;border:0px;float:right;padding-right:415px; ">
<a id="imageurl" target="_blank" ><img id="Rotating1" border="0"></img></a>
<script language="JavaScript">
  
   function RotateImages(Start)
  {
      var a = new Array("http://www.earthwindwater.com.au/banners/skiracersworld/Contour+.png","http://www.earthwindwater.com.au/banners/skiracersworld/LiquidImage.png","http://www.earthwindwater.com.au/banners/skiracersworld/ContourGPS.png", "http://www.earthwindwater.com.au/banners/skiracersworld/GoPro.png");
      var c = new Array("http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contour", "http://www.earthwindwater.com.au/store/cameras/hd-cameras/impact-series-720p-mx-goggle-red", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contourgps", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/gopro-hd-motorsports-hero");
      var b = document.getElementById('Rotating1');
      var d = document.getElementById('imageurl');
      if(Start>=a.length)
          Start=0;
      b.src = a[Start];
      d.href = c[Start];
      window.setTimeout("RotateImages(" + (Start+1) + ")",5000);
  }
  
  RotateImages(0);
  
  </script>
</div>
</div>

Now, I thought I would modify the code a little and include "Image Title" and "ALT Text"

I am not much of a scripting genius, therefore my modifications don't work.

Here is my modified code

Code:

<div style="background-image: url(http://www.earthwindwater.com.au/banners/skiracersworld/banner-bg.png);height:148px;width:982px;border:0px;">
<div style="float:left;height:148px;border:0px;">
<a href="http://www.earthwindwater.com.au" target="_blank"><img border=0 align="absmiddle" alt="Earth Wind and Water Sports Action Cameras" src="http://www.earthwindwater.com.au/banners/skiracersworld/EWW-logo.png" /></a>
</div>
<div style="height:148px;border:0px;float:right;padding-right:415px; ">
<a id="imageurl" target="_blank" ><img id="Rotating1" id="imagealt" id="imagetitle" border="0"></img></a>
<script language="JavaScript">
  
   function RotateImages(Start)
  {
      var a = new Array("http://www.earthwindwater.com.au/banners/skiracersworld/Contour+.png","http://www.earthwindwater.com.au/banners/skiracersworld/LiquidImage.png","http://www.earthwindwater.com.au/banners/skiracersworld/ContourGPS.png", "http://www.earthwindwater.com.au/banners/skiracersworld/GoProHDHERO2.png");
      var c = new Array("http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contour", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/impact-series-hd-1080p-mx-video-goggle-white", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contourgps", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/gopro-hd-hero2-motorsports-edition");
      var e = new Array("Contour+", "Impact Series HD 1080p MX Video Goggle", "ContourGPS", "GoPro HD HERO2 Motorsport Edition");
      var g = new Array("Contour+", "Impact Series HD 1080p MX Video Goggle", "ContourGPS", "GoPro HD HERO2 Motorsport Edition");
      var b = document.getElementById('Rotating1');
      var d = document.getElementById('imageurl');
      var f = document.getElementById('imagealt');
      var h = document.getElementById('imagetitle');
      if(Start>=a.length)
          Start=0;
      b.src = a[Start];
      d.href = c[Start];
      f.alt = e[Start];
      h.title = g[Start];
      window.setTimeout("RotateImages(" + (Start+1) + ")",5000);
  }
  
  RotateImages(0);
  
  </script>
</div>
</div>

Any ideas how I can get this to work

Hello guys,

I am a js noobie really, and am looking for something specific. I have googled for quite some time now looking for a script to randomize a list of images on refresh.

For example, If I have 8 images in a line in this order 12345678, when I refresh, I would like them to go into a new random order - 84567321, or anything. What I have found are scripts to allow random new images to appear in place of a single image, which is as close as I have gotten.

Does anyone know of a script that can do this, or know how to make one? I have looked everywhere, and can't seem to locate one.

Any help is greatly appreciated.

Hi

I am a complete novice with Javascript.

I posted a question on another site as I want to show a series of 9 images in a random order - ie all 9 images but changing their order every time the page loaded.

Someone responded with the following script:

onload= function(){
var n, pic,
A= [1, 2, 3, 4, 5, 6, 7, 8, 9];// replace integers with urls
var pa= document.getElementById('image_set'); // reference the container element
pa=mr('evalBlock')
while(A.length){
pic=document.createElement('img');
n= Math.floor(Math.random()*A.length);
pic.src= A.splice(n, 1);
pa.appendChild(pic);
}
}

However - I don't know how to put it into my pages to get it to work and they have not replied to my further query.

I think I have to put something in the () after function, also, do the URLs have to be absolute and do they need enclosing in ' or ".
Also what code do I then have to put on the page to call the image?

Would anyone here be able to help?

Many thanks
Carol

Hi all,

Did some searching but couldn't find anything to help me.

I'm looking for a simple quiz script - basically, there would be an image on the screen (would be great if it was randomly generated out of maybe 100 different choices). The visitor would then click on one of two buttons (this is the "quiz" part) answering a question about the photo which was displayed. The script then tells the visitor if they got the answer right or wrong and then loads a new image for them to try again. It would be great if the script could keep a "streak counter" based on how many images a visitors got correct in a row.

So for example:

Question: is this a cat or a dog?
[random image of dog or cat]
[button to answer dog] [button to answer cat]


Would this be fairly easy to implement (is there something like this already around) or is it more complicated than that?

Thanks a bunch in advance for any help you can give.

I have used the script I downloaded from here. I have 3 images to run through. Its all works, BUT!

My images are 3072 x 2034 in size, and thats what comes up on the page when loaded.

I set the var slideheight and width entries in the code for 500 and 500.

It seems to not read the var statement.

I would like to leave the orogical images as is, so when clicked on they load full size.

Any ideas would be great.

Hey all,

I am trying to get a code instead of php to display a image from a questionaire results page;

Say the url returns;
http://localhost/Myoka2/myokaTestResults.php?img=7

the 7 will show score2.png... this works fine with php, here is the code

<?php
$total = $_GET['img'];
if ($total < 7)
$total = 1;
elseif ($total < 13)
$total = 2;
elseif ($total < 18)
$total = 3;
elseif ($total < 20)
$total = 4;
?>

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Form</title>
<script src="rollover.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/25307673/myoka/myokaStyle.css" type="text/css" media="screen" />
</head>

<body>
<span style="color:#6A1E67;font: normal bold 12pt/14pt Arial, Helvetica, sans-serif;margin-left:140px;">
How stressed are you?
<h3>SCORES</h3>
</span>

<img src="http://dl.dropbox.com/u/25307673/myoka/myokaStress/score<?php echo $total; ?>.png" alt="" /><br />

<a href="http://www.facebook.com/myoka.spas?sk=app_128953167177144" target="_blank">
<img src="http://dl.dropbox.com/u/25307673/myoka/myokaFanPage//lastMin.jpg" style="padding-left:0px; padding-top:5px; border:0px" alt="" />
</a>
<br/>
</body>
</html>


What i need is this in javascript so that it will work in a iframe :-)

I need a script and HTML code for an image effect like this: http://www.saksfifthavenue.com/main/...11947&ev19=1:2 Something very easy, if possible. Thanks.

I don't know if this is possible, so I figured I'd ask a few gurus. I know it is possible to have an image change at a certain time of day, and it's also possible to have an image change by day, but is there a script to do both?

What I want to do is have the first image show from 8am cst to 6pm cst mon-fri, it's our open sign for live chat. The the rest of the time have the second image.

Is this possible with any type of script? Any help you can give is greatly appreciated!

Hi, everyone. I've been scratching my head about what's wrong with my script for awhile now. What I need to do is use the swapImages(id1,id2,id3) function to simply swap three images at an interval of 2 seconds. What happens with my script is that the first image shows up, and after 2 seconds, it switches to the next one. The problem is that the images start rapidly switching infinitely after those first two seconds. Could someone point out where the problem spot in my code is? Here's the code from my external js file:

Code:

function swapIt(id1,id2,id3)
{
	var object1 = document.getElementById(id1);
	var object2 = document.getElementById(id2);
	var object3 = document.getElementById(id3);
	
	var z1 = object1.style.zIndex;
	var z2 = object2.style.zIndex;
	var z3 = object3.style.zIndex;
	
	object1.style.zIndex = z3;
	object2.style.zIndex = z1;
	object3.style.zIndex = z2;
}

Here's the code invoking this function in my html file:

Code:

function moveAvalon()
	{
		var x = xCoord("avalon");
		
		if(x <= (W - 125))
		{
			shiftIt("avalon", 10, 0);
			setInterval("moveAvalon()", 50);
		}
		else if(x > (W - 125))
		{
			swapImages();
		}
	}
	
	function swapImages()
	{
		showIt("kids");
		showIt("fiction");
		showIt("nfiction");
		
		setInterval( 'swapIt("kids", "fiction", "nfiction")' , 2000);
	}

Hi,

I wonder if someone can help me. I'm building a site which has a random image generated on the page each time it loads. It does work at the moment, but I'd like it to be xhtml compliant.

Currently the page loads the javascript from an external .js file, but it needs a line in the body of the page to make it work fully. This line is currently causing 15 errors when I try and validate it.

The line is as follows:

<script type="text/javascript">document.writeln('<td'+'><img src="'+xoxo[choice]+'"height=26 width=970 border=0 ><'+'/TD>');</script>

Does anyone have any suggestions about how to make this line compliant?

I'm a bit of a beginner, so any help would be greatly appreciated!

Hi there,

I have a menu with 4 links and 4 images associated with them. By default, the image from link 1 is displayed on the page. I would like to change the image with its corresponding one, each time i mouseover one of the other three links.

I'm trying to make the following code work unsuccesfully, i might be missing something. Any help will be appreciated.

In the <head> section i have this:

<script type="text/javascript">

img1 = new Image();
img1.src = "images/party/party.jpg";

img2 = new Image();
img2.src = "images/party/icecream.jpg";

img3 = new Image();
img3.src = "images/party/juice.jpg";


img4 = new Image();
img4.src = "images/party/videogames.jpg";

function change(num){

document.images["linkpic"].src = "img" + num
}

</script>

</head>

In the <body> i have:

That's my default image
<table>
<tr>
<td width="100">
<img src="images/party/balloon1.jpg" name="linkpic">
</td>
<td width="260" valign="top" align="left">
<table>
<tr><td><a href="Party1.html" onmouseover="change('1')">Party and Fun</a></td></tr>
<tr><td><a href="Party2.html" onmouseover="change('2')">Icecream
</a></td></tr>
<tr><td><a href="Party3.html" onmouseover="change('3')">Juice </a></td></tr>
<tr><td><a href="Party4.html" onmouseover="change('4')">Video Games
</a></td></tr>
</table>
</tr>
</table>
</body>

I would like when i point to Icecream, the picture on the left to change to the Icecream picture and so on.
Any hints and help are appreciated!

Thanks!

I would like to add a submenu that pops up when the mouse moves over the first-level menu option.
I succesfully added the submenu. However, now the image-swap script (the script that makes that the image that you see change as you move your mouse on the image) doesn't work anymore.
Does anyone have any idea what I'm doing wrong?


The relevant part of the header:
Code:

<script type="text/JavaScript">
<!--
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_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_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];}
}
//-->
</script>

	#nav, #nav ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		float : left;
		width : 20.35em;
	}
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		line-height : 0em;
		margin-bottom : -1px;
		width: 11em;
	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 18.35em;
		margin-top : -1.35em;
	}
	
	#nav li a {
		width : 10em;
		display : block;
		color : none;
		font-weight : bold;
		text-decoration : none;
		background-color : none;
		padding : 0 0.5em;
	}
	
	#nav li a:hover {
		color : none;
		background-color : none;
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}
	
	#content {
		margin-left : 12em;
	}
-->
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

The relevant part of the body code:

Code:

<table width="314" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="315"><div align="center"><a href="ob.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','afbeeldingen/menuob2.gif',1)"><img src="afbeeldingen/spacer.gif" alt="spacer" width="5" height="10" hspace="0" vspace="0" border="0" /><br />
                  <img src="afbeeldingen/menuob1.gif" alt="OB" name="Image10" width="309" height="27" border="0" id="Image10" /></a><br />

<a href="MS.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menums2.gif',1)"><img src="afbeeldingen/menums1.gif" alt="MS" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />

<a href="kt.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','afbeeldingen/menukt2.gif',1)"><img src="afbeeldingen/menukt1.gif" alt="KT" name="Image12" width="309" height="27" border="0" id="Image12" /></a>

<a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','afbeeldingen/menucontact2.gif',1)"><img src="afbeeldingen/menucontact1.gif" alt="Contact" name="Image15" width="309" height="27" vspace="3" border="0" id="Image15" /><br /></a>

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

<ul id="nav">
<li>
<a href="MS.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menums2.gif',1)"><img src="afbeeldingen/menums1.gif" alt="MS" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
<ul>
<li>
<a href="aa.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menuaa2.gif',1)"><img src="afbeeldingen/menuaa1.gif" alt="AA" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
</li>
<li>
<a href="bb.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menubb2.gif',1)"><img src="afbeeldingen/menubb1.gif" alt="BB" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
</li>
<li>
<a href="cc.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menucc2.gif',1)"><img src="afbeeldingen/menucc1.gif" alt="CC" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
</li>
</ul></li></ul>

Hello All! Brand new to Javascript here, so please forgive my basic question. I did a search but did not find exactly what I was looking for.

My web site has a splash page with a large image broken into pieces and displayed in a table. I want to preload the images so the user doesn't see the table slowly "fill in" when using a slower internet connection.

I have written a basic script, using the basic format of:

<SCRIPT LANGUAGE="JavaScript">

Image1= new Image(50,60)
Image1.src = "something.gif"

Image2 = new Image(70,80)
Image2.src = "somethingelse"

Image3 = new Image(90,100)
Image3.src = "lastsomething.gif"

</SCRIPT>

and saved it as a .js file and placed it in my sites root directory. Just to be safe, I've placed the images there too. (do I have to do that though?)

Still, it does not seem to be working. Below is the head from my splash page. Have I missed somthing here? I thought that by putting the script reference in the head, the images would be loaded before the table came up, but such does not seem to be the case. Any help would be most appreciated. Thanks!

<html>
<head>
<title>Finish Well Endurance</title>
<meta name="generator" content="Namo WebEditor">
<link type="text/css" rel="stylesheet" href="http://www.fwe1.net/css/index.css">
<script type="text/javascript"language="javascript"src="loadimages.js"></script>
</head>

<body bgcolor="#464646" text="black" link="#464646" vlink="#464646" alink="#464646">
<table border="0" align="center" cellpadding="0" cellspacing="0" width="600">