Help with javascript image arrays

@Event_ModeOct 02.2006

Alright. Would someone please help me with this.

I have been tinkering with it for 7 hours straight with absolutely zero headway being made.

My goal: to create a javascript image array that will allow the user to navigate various images without changing the url: also, without preloading the images.

What I have which doesn’t work:

[code=php] var comics=new Array() comics[0]=new Image(638, 825) comics[0].src=”/comics/comic1.jpg” comics[1]=new Image(638, 825) comics[1].src=”/comics/comic2.jpg” comics[2]=new Image(638, 825) comics[2].src=”/comics/comic3.jpg” comics[3]=new Image(638, 825) comics[3].src=”/comics/comic4.jpg” comics[4]=new Image(638, 825) comics[4].src=”/comics/comic5.jpg” comics[5]=new Image(638, 825) comics[5].src=”/comics/comic6.jpg” comics[6]=new Image(638, 825) comics[6].src=”/comics/comic7.jpg” comics[7]=new Image(638, 825) comics[7].src=”/comics/comic8.jpg” comics[8]=new Image(638, 825) comics[8].src=”/comics/comic9.jpg” comics[9]=new Image(638, 825) comics[9].src=”/comics/comic10.jpg” comics[10]=new Image(638, 825) comics[10].src=”/comics/comic11.jpg” comics[11]=new Image(638, 825) comics[11].src=”/comics/comic12.jpg”

document.write(comics[11])[/code]

yes, I realize document.write is not the proper function, but it is the only one that when I put in works at all, and all it does is output [object]. I tried document.images(comics[11]).src, something that I was led to believe was the solution, and got no output whatsoever.

Somebody please help because I have scoured the internet trying to answer my question and there has been nothing that advanced me.

to post a comment

JavaScript

31 Comments(s) _↴

@QuentinOct 02.2006 — #Using document.write should return [object] because that is what you are writing the object. You need to append it to another element such as:

[CODE]document.body.appendChild(comics[11]);[/CODE]

@Event_ModeauthorOct 02.2006 — #alright. Well, that element you have there. Are you saying that I need to create another function specifically, then append the two together? or are you merely stating to use that code specifically? I'm a little confused.

@QuentinOct 02.2006 — #Think of it this way when you use the Image() method all you are doing is creating an IMG element within your javascript. So once you have this element to view it on your page you have to append this element to another element. In my example I was showing you how to append it to the Body element. However you can append it to any element you want using the appendChild() method.

@Event_ModeauthorOct 02.2006 — #okay... so I would need to do something like...

<i>
 </i>image(comics[11])
 document.body.appendChild(comics[11])

?

that somehow doesn't seem right.

@QuentinOct 02.2006 — #Lets say you had a DIV element on your page with an ID of "comicbook" and you wanted to append one of your comics into this element you would do so by using this code:

[CODE]document.getElementById("comicbook").appendChild(comic[11]);[/CODE]

@Event_ModeauthorOct 02.2006 — #Ooooo.

Okay, so I need another element on my page that defines basically the blank space in which to put the image?

@QuentinOct 02.2006 — #Well yes and no you can always append the images directly to the Body element anything is possible thats the beauty of it. Try playing around with it some more and if you run into problems feel free to PM me or just ask away here on the boards.

@Event_ModeauthorOct 02.2006 — #document.body.appendChild(comics[11])

that will append to the body, right?

So, if that's the case my images won't show for a different reason apparently.

<i>
 </i>document.write(comics[11]);
 //I left that in so I wouldn't lose the [object] statement
 document.body.appendChild(comics[11])
 //Should permit image to show?

Wait... something's wrong. Now my site won't load at all. Pops up a runtime error.

@QuentinOct 02.2006 — #When exactly are you executing the document.body.appendChild() method? If you are using it in the head and not within a function it will throw an error because the browser hasn't loaded the Body element yet. Try the following code out:

[CODE]
 <html>
 
 <head>
 <title>Image Arrays</title>
 <script type="text/javascript">
 var comics = new Array();
 comics[0] = new Image(638, 825);
 comics[0].src = "/comics/comic1.jpg";
 comics[1] = new Image(638, 825);
 comics[1].src = "/comics/comic2.jpg";
 comics[2] = new Image(638, 825);
 comics[2].src = "/comics/comic3.jpg";
 comics[3] = new Image(638, 825);
 comics[3].src = "/comics/comic4.jpg";
 comics[4] = new Image(638, 825);
 comics[4].src = "/comics/comic5.jpg";
 comics[5] = new Image(638, 825);
 comics[5].src = "/comics/comic6.jpg";
 comics[6] = new Image(638, 825);
 comics[6].src = "/comics/comic7.jpg";
 comics[7] = new Image(638, 825);
 comics[7].src = "/comics/comic8.jpg";
 comics[8] = new Image(638, 825);
 comics[8].src = "/comics/comic9.jpg";
 comics[9] = new Image(638, 825);
 comics[9].src = "/comics/comic10.jpg";
 comics[10] = new Image(638, 825);
 comics[10].src = "/comics/comic11.jpg";
 comics[11] = new Image(638, 825);
 comics[11].src = "/comics/comic12.jpg";
 
  window.onload = function() {
   for (var i = 0; i < comics.length; i++) {
   document.body.appendChild(comics[i]);
   }
  }
 </script>
 </head>
 
 <body></body>
 
 </html>[/CODE]

@Event_ModeauthorOct 02.2006 — #Okay... so what you just did would display the whole comic array, right?

@QuentinOct 02.2006 — #That is correct.

@Event_ModeauthorOct 02.2006 — #Alright.

So now my html has the script and it's working but it's not putting the images in the proper location. Here's my html script in regards to where the JS is located.

<i>
 </i>&lt;table border=0 width="100%"&gt;
 &lt;td align="center"&gt;
 &lt;a href="archive.html"&gt;&lt;b&gt;Strip Archives&lt;/b&gt;&lt;/a&gt; 
 &lt;a href="index_a.php?Strip=1"&gt;First Strip&lt;/a&gt;
 &lt;a href="index_a.php?Strip=11"&gt;Previous Strip&lt;/a&gt;
 &lt;hr&gt;
 &lt;script src="/comicarray.js"&gt;&lt;/script&gt;
 &lt;hr&gt;
 &lt;br&gt;
 &lt;/td&gt;
 &lt;/table&gt;

it's in the body, and while it will display the images it displays them in a completely different location from where the script is called. It displays them at the bottom of the screen.

So... do I need to state it in the heading? But wouldn't that cause things to be displayed right away at the beginning?

Or would putting it in the heading allow the program to wait for the function to be called using the <script> command?

@QuentinOct 02.2006 — #Correct it will display them at the bottom because the window.onload method waits until the entire page has loaded before it runs. So in this case you will want to put in a place holder. So try adding a div in the place where you want the images to be viewed at and then reference its ID using document.getElementById() and then append your images into it.

@Event_ModeauthorOct 02.2006 — #so like...

<i>
 </i>&lt;p id="comicbook"&gt;&lt;/p&gt;

In the html code where I want it then

<i>
 </i>document.getElementByID("comicbook").appendChild(comics[i]);

in the js?

@QuentinOct 02.2006 — #Yeah try something like <div id="comic"></div> and then in your window.onload say document.getElementById("comic").appendChild(comics[11]);.

@Event_ModeauthorOct 02.2006 — #...didn't work.

here's what I've got:

the script is in the head, with the function you gave.

 var comics = new Array();
 comics[0] = new Image(638, 825);
 comics[0].src = "/comics/comic1.jpg";
 comics[1] = new Image(638, 825);
 comics[1].src = "/comics/comic2.jpg";
 comics[2] = new Image(638, 825);
 comics[2].src = "/comics/comic3.jpg";
 comics[3] = new Image(638, 825);
 comics[3].src = "/comics/comic4.jpg";
 comics[4] = new Image(638, 825);
 comics[4].src = "/comics/comic5.jpg";
 comics[5] = new Image(638, 825);
 comics[5].src = "/comics/comic6.jpg";
 comics[6] = new Image(638, 825);
 comics[6].src = "/comics/comic7.jpg";
 comics[7] = new Image(638, 825);
 comics[7].src = "/comics/comic8.jpg";
 comics[8] = new Image(638, 825);
 comics[8].src = "/comics/comic9.jpg";
 comics[9] = new Image(638, 825);
 comics[9].src = "/comics/comic10.jpg";
 comics[10] = new Image(638, 825);
 comics[10].src = "/comics/comic11.jpg";
 comics[11] = new Image(638, 825);
 comics[11].src = "/comics/comic12.jpg";
 
 <i>    </i>window.onload = function() {
 <i>    </i>  for (var i = 0; i &lt; comics.length; i++) {
 <i>    </i>    document.getElementByID("comicbook").appendChild(comics[i]);
 <i>    </i>  }
 <i>    </i>}

and then

&lt;hr&gt;
 &lt;div id="comicbook"&gt;&lt;/div&gt;&lt;hr&gt;

in the HTML body

@QuentinOct 02.2006 — #Use getElementById and not getElementByID

@Event_ModeauthorOct 02.2006 — #Alright! Hooray case sensitivity! :p

alright. Just one more thing. How do I set it up so it displays just one comic, then has navigation links?

@QuentinOct 02.2006 — #Simple enough just a few quick questions do you want this done with JavaScript or with server sided postbacks?

@Event_ModeauthorOct 03.2006 — #I'd like it done in javascript: I don't know anything about server-side scripting.

@QuentinOct 03.2006 — #Then try this out I didn't test it so if it errors out let me know.

[CODE]<html>
 
 <head>
 <title>Image Arrays</title>
 <script type="text/javascript">
 var currImage = 0;
 
  var comics = new Array();
  comics[0] = new Image(638, 825);
  comics[0].src = "/comics/comic1.jpg";
  comics[1] = new Image(638, 825);
  comics[1].src = "/comics/comic2.jpg";
  comics[2] = new Image(638, 825);
  comics[2].src = "/comics/comic3.jpg";
  comics[3] = new Image(638, 825);
  comics[3].src = "/comics/comic4.jpg";
  comics[4] = new Image(638, 825);
  comics[4].src = "/comics/comic5.jpg";
  comics[5] = new Image(638, 825);
  comics[5].src = "/comics/comic6.jpg";
  comics[6] = new Image(638, 825);
  comics[6].src = "/comics/comic7.jpg";
  comics[7] = new Image(638, 825);
  comics[7].src = "/comics/comic8.jpg";
  comics[8] = new Image(638, 825);
  comics[8].src = "/comics/comic9.jpg";
  comics[9] = new Image(638, 825);
  comics[9].src = "/comics/comic10.jpg";
  comics[10] = new Image(638, 825);
  comics[10].src = "/comics/comic11.jpg";
  comics[11] = new Image(638, 825);
  comics[11].src = "/comics/comic12.jpg";
 
  window.onload = function() {
   document.getElementById("comicbook").appendChild(comics[currImage]);
  }
 
  function NextImage() {
   if (currImage < comics.length - 1) {
   currImage++;
   document.getElementById("comicbook").innerHTML = "";
   document.getElementById("comicbook").appendChild(comics[currImage]);
   }
  }
 
  function PrevImage() {
   if (currImage > 0) {
   currImage--;
   document.getElementById("comicbook").innerHTML = "";
   document.getElementById("comicbook").appendChild(comics[currImage]);
   }
  }
 </script>
 </head>
 
 <body>
 <div id="comicbook"></div>
 <div>
 <input type="button" value="Prev Image" onclick="PrevImage();" />
 <input type="button" value="Next Image" onclick="NextImage();" />
 </div>
 </body>
 
 </html>[/CODE]

@Event_ModeauthorOct 03.2006 — #It's good, but I have two adjustments I need to make:

1.) How would I start with the highest comic on the list (comics[11])

2.) How could I turn the buttons into images?

*EDIT* just answer the second one, I figured out the first one.

@QuentinOct 03.2006 — #1.) Set the currImage var to 11 instead of 0.

2.) Use

[CODE]<img src="<!- Insert Your Prev Image Here ->" alt="Prev" onclick="PrevImage();" />
 <img src="<!- Insert Your Next Image Here ->" alt="Next" onclick="NextImage();" />[/CODE]

Instead of the

[CODE]<input type="button" value="Prev Image" onclick="PrevImage();" />
 <input type="button" value="Next Image" onclick="NextImage();" />[/CODE]

@Event_ModeauthorOct 03.2006 — #hehe...

Thanks for your help...

*looks at site*

hmm... now I'm sitting here wondering if I shouldn't have done it this way. Lots of problems arise out of this... Such as the title being static, and all the comics having to load...

Well, is there a javascript way to do something where it changes url in this incrementing way?

like could I do a url array in a similar respect to this?

or should I fetch over to php for something like that?

@QuentinOct 03.2006 — #Yes you can use an array of urls then you would just need to put an <img> tag in for a place holder and assign it an Id and then change its src property to change the image. However each image will load as they are come across the first time if you don't use a preloading method. So you could either use PHP postbacks to change the picture or just preload all the images so that they will already be cached by the browser by the time the user clicks Prev or Next Image.

@Event_ModeauthorOct 03.2006 — #alright... time for me to ask your opinion.

Which would you personally consider less of a hassle?

Setting this up using javascript or using php postbacks? Cuz if php is easier, I will learn it, try it, and come back with questions.

@QuentinOct 03.2006 — #Well my opinion will biased but often its better to do it both ways because some people navigate the web with JavaScript disabled so you should never really depend on JavaScript unless you don't really care about the userbase that refuse to allow JavaScript. However I have no experience with PHP I use ASP.Net but hey I'm willing to learn anything.

@Event_ModeauthorOct 03.2006 — #Would ASP be able to handle something like this?

@QuentinOct 03.2006 — #Sure both PHP and ASP/ASP.Net could handle this easy.

@Event_ModeauthorOct 03.2006 — #alright. Well, thanks for your help. I'll probably be back either in the ASP forum or PHP forum with more questions, possibly how to do this exact same thing again in server-side. But I doubt I won't be able to figure that out now that I've seen it.

Thanks again for your help.

@QuentinOct 03.2006 — #I'm sure you will figure it out like I said before if you need help feel free to PM me here and I will do my best to help you out.

Also in #JavaScript _↴

Hiding/Showing Problem in Firefox Javascript functions not working locally ?Using Javascript in form

Success!

Help @Event_Mode spread the word by sharing this article on Twitter...

Tweet This

Help with javascript image arrays

31 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Help with javascript image arrays

31 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

31 Comments(s) _↴

Also in #JavaScript _↴