PDA

View Full Version : Next / Previous image in Javascript


Ricky55
02-08-2008, 04:00 PM
Hi

I am trying to get this working:-

http://www.qwerty-design.co.uk/test.html

This is my code can anyone tell me where I'm going wrong?

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/JavaScript">
MyImages=new Array();
MyImages[0]='imageA.jpg';
MyImages[1]='imageB.jpg';
MyImages[2]='imageC.jpg';
MyImages[3]='imageD.jpg';

Messages=new Array()
Messages[0]='We learn about our world through the 5 senses';
Messages[1]='We use our eyes to see things';
Messages[2]='Our ears to hear things';
Messages[3]='And our sense of touch to feel things.';
imagesPreloaded = new Array(4)
for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloaded[i] = new Image(120,120)
imagesPreloaded[i].src=MyImages[0]
}
function Next(){
if
(currentIndx0){
currentIndx=currentIndx-1;
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text.value=Messages[currentIndx];
}
else {
currentIndx=3
document.theImage.src=imagesPreloaded[currentIndx].src
document.holder.text1.value=Messages[currentIndx];
}}

/*Doing it automatically */
/*This code changes the images and text after a certain interval. */
/*Notice how the code to decide which is the next image to load is similar to that for Nexter(), */
/*but this time we put all the document.theImage ... at the end, after determining what the next number will be. */


function auto() {
if (document.holder.automatic.checked) {
if (currentIndx<body onLoad="auto()">
</script>

<!-- ####################### start of form for image slide show ####################### -->
<form NAME="holder" id="holder" align="center">
<table BORDER="3">
<tr>
<td><img SRC="file:///Macintosh HD/Users/Ricky/Desktop/untitled folder/imageA.jpg" NAME="theImage" HEIGHT="120" WIDTH="120"></td>

<td><textarea rows="4" name="text" cols="20" wrap="virtual" id="text">We learn about our world through our 5 senses.</textarea></td>
</tr>
<tr>

<td><input type="button" value="&lt;&lt; Previous" name="previous" onClick="Back()"></td>
<td><input type="button" value="Next &gt;&gt;" name="next" onClick="Next()"></td>
</tr>
<tr>
<td><div align="right"><p>Automatic:</td>

<td><input type="checkbox" name="automatic" value="ON" onClick="auto()"> </td>
</tr>
</table>

</form>

<!-- ####################### end of form for image slide show ####################### -->
</head>

domedia
02-08-2008, 04:03 PM
You put everything in your HEAD section. A validator would have told you that I think ;)

Move the content (not the javascript) to after the </head> tag.
(and use forum code tags while posting)

Ricky55
02-08-2008, 08:58 PM
I still can't get this working, what am I doing wrong?

My code now looks like this:


<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/JavaScript">
MyImages=new Array();
MyImages[0]='imageA.jpg';
MyImages[1]='imageB.jpg';
MyImages[2]='imageC.jpg';
MyImages[3]='imageD.jpg';

Messages=new Array()
Messages[0]='We learn about our world through the 5 senses';
Messages[1]='We use our eyes to see things';
Messages[2]='Our ears to hear things';
Messages[3]='And our sense of touch to feel things.';
imagesPreloaded = new Array(4)
for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloaded[i] = new Image(120,120)
imagesPreloaded[i].src=MyImages[i]
}
function Nexter(){
if
(currentIndx0){
currentIndx=currentIndx-1;
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}
else {
currentIndx=3
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}}

/*Doing it automatically */
/*This code changes the images and text after a certain interval. */
/*Notice how the code to decide which is the next image to load is similar to that for Nexter(), */
/*but this time we put all the document.theImage ... at the end, after determining what the next number will be. */


function automaticly() {
if (document.form1.automatic.checked) {
if (currentIndx<body onLoad="automaticly()">
</script>
</head>
<body>


<!-- ####################### start of form for image slide show ####################### -->
<form NAME="form1" align="center">
<table BORDER="3">
<tr>
<td><img SRC="imageA.jpg" NAME="theImage" HEIGHT="120" WIDTH="120"></td>

<td><textarea rows="4" name="text1" cols="20" wrap="virtual">We learn about our world through our 5 senses.</textarea></td>
</tr>
<tr>

<td><input type="button" value="&lt;&lt; Previous" name="previous" onClick="Backer()"></td>
<td><input type="button" value="Next &gt;&gt;" name="next" onClick="Nexter()"></td>
</tr>
<tr>
<td><div align="right"><p>Automatic:</td>

<td><input type="checkbox" name="automatic" value="ON" onClick="automaticly()"> </td>
</tr>
</table>
</form>

<!-- ####################### end of form for image slide show ####################### -->
</body>
</html>

Ricky55
02-08-2008, 09:07 PM
Got it working now sorry, it was a friend who asked me to look at this, it wasn't working as half the script was missing.

Out of interest the correct script looks like this:-


<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="JavaScript1.1">
currentIndx=0;
MyImages=new Array();
MyImages[0]='imageA.jpg';
MyImages[1]='imageB.jpg';
MyImages[2]='imageC.jpg';
MyImages[3]='imageD.jpg';

Messages=new Array()
Messages[0]='We learn about our world through the 5 senses';
Messages[1]='We use our eyes to see things';
Messages[2]='Our ears to hear things';
Messages[3]='And our sense of touch to feel things.';

/* ####################### now we preload the images ####################### */
imagesPreloaded = new Array(4)
for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloaded[i] = new Image(120,120)
imagesPreloaded[i].src=MyImages[i]
}
/* ####################### we create the functions to go forward and go back ####################### */
function Nexter(){
if (currentIndx<imagesPreloaded.length-1){
currentIndx=currentIndx+1;
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}
else {
currentIndx=0
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}
}
function Backer(){
if (currentIndx>0){
currentIndx=currentIndx-1;
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}
else {
currentIndx=3
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}}
function automaticly() {
if (document.form1.automatic.checked) {
if (currentIndx<imagesPreloaded.length){
currentIndx=currentIndx
}
else {
currentIndx=0
}
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
currentIndx=currentIndx+1;
var delay = setTimeout("automaticly()",3500)
}
}
</script>

</head>
<body>


<!-- ####################### start of form for image slide show ####################### -->
<form NAME="form1" align="center">
<table BORDER="3">
<tr>
<td><img SRC="imageA.jpg" NAME="theImage" HEIGHT="120" WIDTH="120"></td>

<td><textarea rows="4" name="text1" cols="20" wrap="virtual">We learn about our world through our 5 senses.</textarea></td>
</tr>
<tr>

<td><input type="button" value="&lt;&lt; Previous" name="previous" onClick="Backer()"></td>
<td><input type="button" value="Next &gt;&gt;" name="next" onClick="Nexter()"></td>
</tr>
<tr>
<td><div align="right"><p>Automatic:</td>

<td><input type="checkbox" name="automatic" value="ON" onClick="automaticly()"> </td>
</tr>
</table>
</form>

<!-- ####################### end of form for image slide show ####################### -->
</body>
</html>

davidj
02-08-2008, 09:12 PM
it wasn't working as half the script was missing.



aye

that'll do it