Javascript text help

JavaScript
1

Hi everyone, i’m not used to using Javascript and i want it to tell the page to do something that might be very simple.
I want to add different text under each image in the slide, for example

and heres the javascript that display the images, but not the text.


<SCRIPT LANGUAGE="JavaScript">

NewImg = new Array (
"1.png",
"2.png",
"3.png"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 3000;

var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
   }
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
   }
}

 <a href="javascript:chgImg(-1)"><img src="http://icons.iconarchive.com/icons/deleket/button/48/Button-Previous-icon.png"alt="back"/></a>
    <a href="javascript:auto()"><img src="http://icons.iconarchive.com/icons/deleket/button/48/Button-Refresh-icon.png"alt="start"/></a>
    <a href="javascript:chgImg(1)"><img src="http://icons.iconarchive.com/icons/deleket/button/48/Button-Next-icon.png" alt="next" /></a>
2 
<!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>
  <title></title>
<script  type="text/javascript">
NewImg = new Array (
["http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg",'image 1'],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg",'image 2'],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg",'image 3']
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 1000;

var lock = false;
var run;

function chgImg(direction) {
 ImgNum = ImgNum + direction;
 if (ImgNum > ImgLength) {
  ImgNum = 0;
 }
 if (ImgNum < 0) {
  ImgNum = ImgLength;
 }
 document.getElementById('slideshow').src = NewImg[ImgNum][0];
 document.getElementById('tst').innerHTML=NewImg[ImgNum][1]||'';
}

function auto() {
 if (lock == true) {
  lock = false;
  window.clearInterval(run);
 }
 else if (lock == false) {
  lock = true;
  run = setInterval("chgImg(1)", delay);
 }
}
</script>
</head>

<body>
<input type="button" value="Back" value="" onmouseup="chgImg(-1);"/>
<input type="button" value="Auto" value="" onmouseup="auto();"/>
<input type="button" value="Next" value="" onmouseup="chgImg(1);"/>
<br />
<img id="slideshow" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" /> <br />
<span id="tst" ></span>
</body>

</html>
3

exactly what I was looking for, thanks!

p.s. do you know any good video’s or books for learning JavaScript

4

Yes, we even have it as an important link at the top of the forum threads. JavaScript Books Help