Hi, you're back for another page of the train gif how to dictionary. So far you've managed to make trains go left and right and adjust the speed of each. Now it's time to get them off your webpage background and onto a backdrop. Here's the backdrop we're going to use: And we'll use the same train that we have always been using. To set a position where you want the backdrop to go, you use the <DIV> tag. To do this you have to know where on the screen you want it to appear. Whereever you place it is up to you, since I'm working with 800x600, that is how many pixels make up the screen....800 across and 600 down, without scrolling bars appearing...which makes perfect sence since you don't want to have to scroll forever to see a scene. Well, the big moment has arrived, let's get started. Remember when I told you, you use the <DIV> command to place the backdrop where you want? Well like the MARQUEE tag, the DIV tag has some commands that help it decide what you want it to do. A DIV tag looks like this: <DIV id="bkdrop" style="position:absolute; Z-index:0;; top:439; left:0"> I've lost you haven't I? It is kinda complicated this way so I'll break it down so that it's easier to understand. id="bkdrop".....this gives your DIV tag a name (Any name will do) style="position:absolute; Z-index:0;; top:439; left:0".....This tells the image where it's supposed to be. Let's break it down a bit more. position:absolute;.....this means that the image is "shown" in that position. "Hidden" is another value of the POSITION command but we don't need to go into that. z-index:0;;.....this is another way to show the order top:439; left:0.....This is the position on the screen you want this particular image. 439 pixels down from the top of the screen and 0 pixels from the left of the screen. It's time to add your IMG tag again. Here's how it should look now, with your own values of course: <DIV id="bkdrop" style="position:absolute; Z-index:0;; top:439; left:0"> <IMG SRC="http://background.gif" width="100%"> </div> ***REMEMBER that the <IMG SRC> tag should point to the place on your website where the image is saved. |
| Now you have the background layer in place on your screen it's time to add all the other "Layers" to the scene. This is the most important time to remember...what you want behind the trains, like stations, towers, signals, trees, and what you want in front of the trains. To put something behind a train, the image's DIV tag comes before the train process, an image in front of the train, which you see the train duck behind, comes after the train process. So let's add the backdrop to our existing html:
<DIV id="bkdrop" style="position:absolute; Z-index:0;; top:439; left:0"> <IMG SRC="http://background.gif" width="100%"> </div> <DIV id="Layer2" style="position:absolute; Z-index:1;; top:400; left:0"> <MARQUEE DIRECTION="RIGHT" SCROLLDELAY="35" TRUESPEED> <IMG SRC="http://file name.gif"><IMG SRC="http://file name.gif"><IMG SRC="http://file name.gif"><IMG SRC="http://file name.gif"><IMG SRC="http://file name.gif"><IMG SRC="http://file name.gif"> </marquee> </div> You should have this now: (remember that the file name.gif should be your own image files and your top: and left: will be different from this one). YELLOW is existing HTML, PINK is what has been added |