...

View Full Version : Need help with Java Pic Changer (slideshow)



radamsiii
05-17-2009, 05:33 PM
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???



<!--- 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.

venegal
05-17-2009, 05:42 PM
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.

radamsiii
05-17-2009, 05:46 PM
Thank you for such a fast reply. I forgot to mention I have

<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

venegal
05-17-2009, 05:53 PM
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.

radamsiii
05-17-2009, 06:01 PM
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.


<!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

venegal
05-17-2009, 06:17 PM
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.

radamsiii
05-17-2009, 06:41 PM
Attempted this many times. This is what I have now, but it still does not work.



<<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 :(

venegal
05-17-2009, 06:51 PM
No, the id property has to be "pic". Like so: <img id="pic" />

radamsiii
05-17-2009, 06:56 PM
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.

venegal
05-17-2009, 07:15 PM
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];



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum