Javascript load problem?

**Petergotchi** · Mar 4th, 2005, 11:53 AM

I want to make an imagebrowser with a previous and next button, and with the imagenumber shown... But it doesn't seem to be working out as well as planned... This is my code! I really don't have a clue what's wrong...

Code:

<HTML>
<HEAD>
<script language="javascript">

  var imgCount = 8;
  img1 = new Image();
  img1.src="01.jpg";
  img2 = new Image();
  img2.src="02.jpg";
  img3 = new Image();
  img3.src="03.jpg";
  img4 = new Image();
  img4.src="04.jpg";
  img5 = new Image();
  img5.src="05.jpg";
  img6 = new Image();
  img6.src="06.jpg";
  img7 = new Image();
  img7.src="07.jpg";
  img8 = new Image();
  img8.src="08.jpg";
  
  var images = new Array;
  images[1] = img1;
  images[2] = img2;
  images[3] = img3;
  images[4] = img4;
  images[5] = img5;
  images[6] = img6;
  images[7] = img7;
  images[8] = img8;
  
  var x = 1;
  
  function nextImage(){
     if (x<imgCount){
     	++x;
     	document.afbeelding.src = images[x].src;
		Init();
     }		
  }
  
  function previousImage(){
    if (x>1){
    	x--;
    	document.afbeelding.src=images[x].src;
		Init();
    }
  }
 
  function Init(){
	document.write('<TABLE>');
	document.write('<TR><TD align="center">');
	document.write('<FONT face="Tahoma" color="white"><B>');
	document.write('<IMG src="Vorige.gif" onclick="previousImage();" onmouseover="this.style.cursor='pointer'">');
	document.write('Pagina '+x);
	document.write('<IMG src="Volgende.gif" onclick="nextImage();" onmouseover="this.style.cursor='pointer'">');
	document.write('</B></FONT></TD></TR>');
	document.write('<TR><TD><IMG src="01.jpg" name="afbeelding" width="1000"></TD></TR>');
	document.write('</TABLE>');
  }
</script>
</HEAD>

<BODY onload="Init();" bgcolor="#59307E" color="white">
</BODY>
</HTML>

Nothing appears on my screen... Why?

**Psyrus** · Mar 4th, 2005, 12:36 PM

You could try something like this. Alter it to fit it back into your project. I took what you posted and edited it just a bit.

HTML Code:

<html>
<head>
<title>Image Browser</title>
<script language="javascript">

  var imgCount = 3;

  img1 = new Image();
  img1.src="apple_1.jpeg";
  img2 = new Image();
  img2.src="apple_2.jpeg";
  img3 = new Image();
  img3.src="apple_3.jpeg";

  
  var images = new Array;
  images[1] = img1;
  images[2] = img2;
  images[3] = img3;
  
  var x = 1;

function loadImage(int){

x += (int);
if(x > imgCount){x = 1;}
if(x < 1){x = imgCount;}
imgPicture.src = images[x].src;
frmMain.txtImageName.value = images[x].src;
}  

</script>
</head>

<body bgcolor="#59307E" color="white">
<div>
<img id = "imgPicture" src = "apple.jpeg" />
</div>
<div>
<form id = "frmMain">
<input type = "button" value = "Next" onclick = "loadImage(1);" />
<input type = "button" value = "Previous" onclick = "loadImage(-1);" />
<br />
<input type = "text" size = "100" id = "txtImageName" value = "" />
</form>
</div>

</body>
</html>

Thread: Javascript load problem?

Thread Tools

Display

Javascript load problem?

Re: Javascript load problem?

Posting Permissions