Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    56
    Thanks
    9
    Thanked 1 Time in 1 Post

    Need help with Java Pic Changer (slideshow)

    I am trying to create a slide show of images within a web page. I have 90 pics that are to change every 1 second. This is what I have so far, all within the body tag, at the point of usage. Nothing is showing and the link is correct. Do I need something in the head???

    Code:
    			<!--- Right Disply; [Slide Show Player] -->
    
    
    
    <div id="displayright">
    
    <div class="javacontainer">
    <script language="JavaScript" type="text/javascript">
    //<![CDATA[
    
    
    pix = new Array();
    
    pix[0] = "link images\/3m-logo.jpg";
    pix[1] = "link images\/ac-delco-logo.jpg";
    pix[2] = "link images\/anco-logo.jpg";
    pix[3] = "link images\/armor-all-logo.jpg";
    pix[4] = "link images\/atp-logo.jpg";
    pix[5] = "link images\/autolite-logo.jpg";
    pix[6] = "link images\/bars-leaks.jpg";
    pix[7] = "link images\/blaster.jpg";
    pix[8] = "link images\/cardone-logo.jpg";
    pix[9] = "link images\/carter-logo.jpg";
    pix[10] = "link images\/champion-logo.jpg";
    pix[11] = "link images\/coinseal-logo.jpg";
    pix[12] = "link images\/dorman-logo-sm.gif";
    pix[13] = "link images\/fel-pro-logo.jpg";
    pix[14] = "link images\/four-seasons-logo.jpg";
    pix[15] = "link images\/gates-logo.jpg";
    
    var i = 0;
    
    function slideshow(){
    setInterval("change()", 1000);
    }
    
    function change(){
    document.images.pic.src = pix[i];
    i = i + 1;
    if (i > (pix.length-1)) {i = 0} 
    }
    
    
    //]]>
    </script>
    
    </div>
    </div>
    Thank you for looking.
    Dedicate some time to Educate your mind

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    1.) You have to call slideshow() somewhere.
    2.) You have to put an <img> tag with an id of "pic" somwhere.

    Other than that it should work.

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    56
    Thanks
    9
    Thanked 1 Time in 1 Post
    Thank you for such a fast reply. I forgot to mention I have
    Code:
     <body onload="slideshow()">
    but calling it somewhere is the issue. I have the script writen where I want to call it. should I have that in the head and somehow call it in the divice tag??

    thank you for you help
    Dedicate some time to Educate your mind

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    I'd put the script in the head or in an external file, but the way you did it should work too.
    Calling slideshow() on body load is good enough, so that shouldn't be a problem either.
    You didn't say if you got the <img> in there though.

    Could you please post your whole code? That would make helping you much easier.

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    56
    Thanks
    9
    Thanked 1 Time in 1 Post
    Thanks again for such a fast responce.
    Here is code to what i have, thought I had a problem with the folder name containing a space but changing it made no differance. The folder containig the image files is in the same folder as the index file so my link should work.
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="DESCRIPTION" content="" />
    <meta name="KEYWORDS" content="" />
    <meta name="KEYWORDS" content="" />
    <meta name="KEYWORDS" content="" />
    <meta name="KEYWORDS" content="" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>Russell Auto Test</title>
    </head>
    
    
    <body onload="slideshow()">
    
    
    
    			<!--- Tempory Heading -->
    
    
    
    
    <div class= "header">
    <img src= "images/auto-parts-488.jpg" width= "11%" alt="" />
    <img src= "images/header1.jpg" valign= "center" width= "78%" alt="" />
    <img src= "images/2004engine.jpg" width= "9%" alt="" />
    </div>
    
    
    			<!--- Navagation -->
    
    
    
    <br />
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="index.html" id="current">Home</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="links.html">Links</a></li>
    </ul>
    </div>
    
    
    			<!--- Main Body -->
    
    
    
    <div class="container">
    
    <h3>WELCOME to Russell Auto Parts and Service.</h3>
    <br />
    <p class= "c2">&nbsp; &nbsp; Russell Auto Parts and Service is a locally owned and operated wholesale/retail auto parts company located in Elizabeth City, North Carolina, and part of the Auto Value Parts Stores network. We specialize in everything for your car or truck including new and remanufactured replacement parts,  accessories, shop supplies, tools and equipment, and solutions to keep your vehicle in the best running condition.
    </p>
    <br />
    <p class= "c2">&nbsp; &nbsp; Russell Auto Parts and Service is committed to customer satisfaction and we happily go the extra mile to provide a valued service at a reasonable price. Serving the local community for 14 years, we have found many friends in our customers and look forward to many more. 
    </p>
    <br />
    </div>
    
    			<!--- Left Disply; [Text Scroller] -->
    
    
    
    <div id="displayleft">
    
    <applet code="text_scroller.class" width="130px" height="180px">
    <param name="info" value="Applet by Gokhan Dagli,textscroller.tripod.com" />
    <param name="textcolor" value="FF0000" />
    <param name="bgcolor" value="#000000" />
    <param name="enable_bgpicture" value="1" />
    <param name="bgpicture" value="" />
    <param name="speed" value="30" />
    <param name="textdimension" value="12" />
    <param name="fonttype" value="Arial" />
    <param name="paragraph_number" value="4" />
    <param name="parag1" value="Tire Rotation. $15.00" />
    <param name="parag2" value="New Valve Stems and Balance with purchase of 4 New Tires." />
    <param name="parag3" value="Oil Change. $29.95" />
    <param name="parag4" value="Computer Diagnostic. $52.80" />
    
    </applet>
    </div>
    
    
    			<!--- Right Disply; [Slide Show Player] -->
    
    
    
    <div id="displayright">
    
    <div class="javacontainer">
    <script language="JavaScript" type="text/javascript">
    //<![CDATA[
    
    
    pix = new Array();
    
    pix[0] = "link images\/3m-logo.jpg";
    pix[1] = "link images\/ac-delco-logo.jpg";
    pix[2] = "link images\/anco-logo.jpg";
    pix[3] = "link images\/armor-all-logo.jpg";
    pix[4] = "link images\/atp-logo.jpg";
    pix[5] = "link images\/autolite-logo.jpg";
    pix[6] = "link images\/bars-leaks.jpg";
    pix[7] = "link images\/blaster.jpg";
    pix[8] = "link images\/cardone-logo.jpg";
    pix[9] = "link images\/carter-logo.jpg";
    pix[10] = "link images\/champion-logo.jpg";
    pix[11] = "link images\/coinseal-logo.jpg";
    pix[12] = "link images\/dorman-logo-sm.gif";
    pix[13] = "link images\/fel-pro-logo.jpg";
    pix[14] = "link images\/four-seasons-logo.jpg";
    pix[15] = "link images\/gates-logo.jpg";
    
    var i = 0;
    
    function slideshow(){
    setInterval("change()", 1000);
    }
    
    function change(){
    document.images.pic.src = pix[i];
    i = i + 1;
    if (i > (pix.length-1)) {i = 0} 
    }
    
    
    //]]>
    </script>
    
    </div>
    </div>
    </body>
    </html>
    As I am sure you can see I am new to this so any suggestions would be kind.

    Rick
    Dedicate some time to Educate your mind

  • #6
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Alright, just as I suspected, document.images.pic is not defined. You have to put an <img> tag with an id of "pic" somewhere in there, or your script won't know which element you want to change the source of.

  • #7
    New Coder
    Join Date
    May 2008
    Posts
    56
    Thanks
    9
    Thanked 1 Time in 1 Post
    Attempted this many times. This is what I have now, but it still does not work.

    Code:
    <<script language="JavaScript" type="text/javascript">
    
    //<![CDATA[
    
    document.write('<img = "pix">');
    
    pix = new Array();
    
    pix[0] = "link images\/3m-logo.jpg";
    pix[1] = "link images\/ac-delco-logo.jpg";
    pix[2] = "link images\/anco-logo.jpg";
    pix[3] = "link images\/armor-all-logo.jpg";
    pix[4] = "link images\/atp-logo.jpg";
    pix[5] = "link images\/autolite-logo.jpg";
    pix[6] = "link images\/bars-leaks.jpg";
    pix[7] = "link images\/blaster.jpg";
    pix[8] = "link images\/cardone-logo.jpg";
    pix[9] = "link images\/carter-logo.jpg";
    pix[10] = "link images\/champion-logo.jpg";
    pix[11] = "link images\/coinseal-logo.jpg";
    pix[12] = "link images\/dorman-logo-sm.gif";
    pix[13] = "link images\/fel-pro-logo.jpg";
    pix[14] = "link images\/four-seasons-logo.jpg";
    pix[15] = "link images\/gates-logo.jpg";
    
    var i = 0;
    
    function slideshow(){
    setInterval("change()", 1000);
    }
    
    function change(){
    document.images.pic.src = pix[i];
    i = i + 1;
    if (i > (pix.length-1)) {i = 0} 
    }
    
    
    //]]>
    </script>


    Note to self... Buy a newer book.. This one is broken
    Dedicate some time to Educate your mind

  • #8
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    No, the id property has to be "pic". Like so: <img id="pic" />

  • Users who have thanked venegal for this post:

    radamsiii (05-17-2009)

  • #9
    New Coder
    Join Date
    May 2008
    Posts
    56
    Thanks
    9
    Thanked 1 Time in 1 Post

    Resolved Need help with Java Pic Changer (slideshow)

    Thank you so much, but I would like to know why I am assigning the pix to change but I have to call it pic. This book said nothing about that.


    Thanks that was a learning experance, wish I had come here two days ago.
    Dedicate some time to Educate your mind

  • #10
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Easy, that's because of this line here:
    document.images.pic.src = pix[i];

    document.images holds all your <img> nodes. If you choose to to id your <img> "pic", then document.images.pic holds a reference to it. If you choose to id it "pix", then it will be document.images.pix.

    This has nothing to do with the array holding the paths to the images, which you chose to call "pix".

    I would suggest to use descriptive names for your variables/ids in order to avoid such confusion. Call the "pix" array something like "imageFileNames", and id your <img> something like "slideshowImage" and you will always know what's what.

    The code will then be much more readable:
    document.images.slideshowImage.src = imageFileNames[i];
    Last edited by venegal; 05-17-2009 at 06:17 PM.


  •  

    Posting Permissions

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