Изменение содержимого внутри элемента?

Question

Я пытаюсь использовать несколько фильмов внутри одного контейнера и заставить их воспроизводиться при нажатии разных кнопок.

Один предназначен для моей целевой страницы, другой - для нас....так далее.

Я пытаюсь использовать JavaScript, чтобы написать функцию для взаимозависимого вызова фильмов.Я хотел бы нажать на кнопку навигации, после чего всплывают разные вещи.Я полагаю, что JavaScript - это то, что я должен использовать, но я ** дыра, поэтому я решил спросить вас хороших людей.Я изучаю DOM, но на самом деле не имею практики его использования.Я создал карту изображений (SWF), которую я хотел бы загрузить, когда люди щелкают о нас, фильм Quick Time для целевой страницы, а также файл, над которым я работаю, чтобы запустить и выполнить цикл после приземления.Страница фильма запускается или, если кто-то нажимает на дом.Как я уже сказал, я хочу, чтобы все они появлялись в одном контейнере, когда кто-то нажимает на кнопки навигации.

Я знаю, вот и все ... Я застрял, я несколько дней путался, читаяразные блоги, w3schools, StackOverflow, QuirksMode ... до сих пор не знаю, как подходить к нему соответствующим образом.

Я подумал, что сначала я создам отдельный файл JavaScript. Дух

Хорошо, я должен быть более специфичным .WHERE DO THE OBJECTS GO? IN THE HTML OR JAVASCRIPT? HOW DO I REFERENCE THEM? OnClick, getElementById()...both????

Я понимаю основные принципы, поэтому я уверен, что если вы дадите мне толчок, я смогу правильно написать код, поэтому, пожалуйста, не отмахивайтесь от программирования.*

Answer 1

Хорошей книгой для вас может быть PPK на JavaScript .Хороший справочник: Javascript: Полное руководство, 5-е издание (примечание: 6-е издание к марту!)

Вот как это должно работать для вас:*

a) вы помещаете все свои ресурсы в файл HTML - файлы SWF, картинки, фильмы и многое другое.Поместите все заменяемые объекты в свои собственные элементы <div id="thingId" /> внутри большого элемента <div id="centrestage"/>.Это покажется большим беспорядком, но не паникуйте.Для элемента, который вы хотите показывать «первым» при загрузке страницы, сделайте его <div id="thingId" class="onstage" />

... это позволит получить все ваши ресурсы в HTML-файл.

b) предположим,все ваши кнопки - img, вы поставите <img id="button1" />, для button2, button3 и т. д.

b) вы прикрепите таблицу стилей к своему HTML с правилом, следующим образом:

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

... это скрывает ресурсы, которые вы не хотите отображать на данный момент

в) вы присоединяете JavaScript к вашему HTML, который выполняет следующие действия:

  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;
     }

  }

... уведомлениечто этот скрипт пока ничего не делает ... он просто присоединяет некоторые функции к некоторым событиям onClick, к некоторым объектам, которые вы picekd из дерева DOM по имени.Функции в основном включают / выключают атрибут класса «onstage» для DIV, а таблица стилей делает все остальное.

Как вы, вероятно, понимаете суть ... как только браузер прочитает вашHTML, у вас есть объектная модель DOM «в памяти».После завершения загрузки этой модели браузер ищет все сценарии, которые зарегистрировались в событии onLoad, и выполняет их.Этот способ работы помогает отделить всю структуру (HTML / DOM) от look (CSS) от поведения (JavaScript зависает от событий DOM).

Answer 2

Вот довольно простой пример, который я написал. При нажатии на ссылку изменится текст в div с идентификатором 'panel'.

<html>
    <head>
        <script type="text/javascript">
            function changeContent()
            {
                var element = document.getElementById('panel');
                element.innerHTML = 'hello';
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="changeContent()">Click me</a>
        <div id="panel">after the click this will show hello</div>
    </body>
</html>

Ключ element.innerHTML. В этом случае я просто добавил текст, но, конечно, вы можете добавить любой необходимый вам HTML-код, например, код для вставки SWF-файлов.