Question

I’m attempting to use multiple movies inside the same container and make them play when different buttons are clicked.

One is for my landing page, one is for the about us…etc.

I am attempting to use JavaScript to write a function to call the movies interdependently. I would like to press on navigation button’s then different things pop up. JavaScript is what I assume I should use but I’m an a**hole so I figured I’d ask you good people. I am studying the DOM but really have no practice in using it. I have made an Image map which is a (swf.) which I’d like to load when people click about us, a Quick Time movie for the landing page, also a file I’m working on to run and loop after the landing page movie runs or if someone clicks on home. As I said I want them all to appear in the same container when some one clicks on the navigation buttons.

I know, that’s it…I’m stuck, I have been confused for a few days reading different blogs, w3schools, StackOverflow, QuirksMode…still no idea how to approach it appropriately.

I figured I’d first create a separate JavaScript file. Duh

OK I should be more specific.
WHERE DO THE OBJECTS GO? IN THE HTML OR JAVASCRIPT?
HOW DO I REFERENCE THEM? OnClick, getElementById()...both????

I understand the basic principles so I have confidence if you gave me a nudge I could write the code correctly so please don’t smack the programming out of me.

What I do know is they all have to be the same size, how to airbrush and screenprint...that doesn't help though, and how to go to w3schools and read.

Answer 1

A good book for you might be PPK on JavaScript. A good reference is Javascript: The Definitive Guide, 5th Edn (nb: 6th Edn due by March!)

Here’s how it should work for you:

a) you put all of your resources into an HTML file – swf’s, pictures, movies, the lot. Put all the swappable things inside their own <div id="thingId" /> elements inside a big <div id="centrestage"/> element. It will seem a big mess of things for now, but don’t panic. For the element that you want to show ‘first’ when the page loads, make it a <div id="thingId" class="onstage" />

… this gets all your resources into the HTML file.

b) supposing all your buttons are img’s, you’ll put <img id="button1" />, for button2, button3, etc.

b) you attach a stylesheet to your HTML with a rule as follows:

  div.centrestage div { display: none; }
  div.centrestage div.onstage { display: block; }

… this hides the resources you don’t want displayed for now

c) you attach a JavaScript to your HTML that does the following things:

  window.onLoad = function(e) {

     var centrestage = document.getElementById('centrestage');
     var r1 = document.getElementById('resource1');
     var r2 = document.getElementById('resource2');

     var currentResource = r1;

     var b1 = document.getElementById('button1');
     button1.onClick = function(e) {
         currentResource.className = '';
         r1.className = 'onstage';
         currentResource = r1;
     }

     var b2 = document.getElementById('button2');
     button1.onClick = function(e) {
         currentResource.className = '';
         r2.className = 'onstage';
         currentResource = r2;
     }

  }

… notice that this script doesn’t DO anything yet … it just attaches some functions to some onClick events, of some objects that you’ve picekd out of the DOM tree by name. The functions basically turn on/off the ‘onstage’ class attribute for the DIV‘s, and the stylesheet does the rest.

As you probably get the gist of … once the browser has read your HTML, you’ve got a DOM object model ‘in memory’. Once this model finishes loading, the browser hunts for any scripts which registered themselves in the onLoad event, and executes them. This way of doing things helps to separate all the structure (HTML/DOM) from the look (CSS) from the behaviour (JavaScript hanging off DOM events).