SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript text help

    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

    e.jpg

    and heres the javascript that display the images, but not the text.
    HTML Code:
    <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. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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" 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. #3
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    exactly what I was looking for, thanks!

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

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by polyhedra View Post
    exactly what I was looking for, thanks!

    p.s. do you know any good video's or books for learning JavaScript
    Yes, we even have it as an important link at the top of the forum threads. JavaScript Books Help
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •