О чем эта статья?

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

Браузеры с отключенным JavaScript просто покажут всю страницу полностью. Зато браузеры, с включенным JavaScript и поддерживающие DOM представят этот документ в виде отдельных слайдов с:

• ссылками вперед и назад
• общим количеством кадров и номером отображаемого слайда
• ссылками-оглавлением на все кадры презентации

Что будем делать?

• Разобьем документ на отдельные слайды
• Покажем общее количество слайдов и номер слайда, отображаемого в настоящий момент
• Соорудим навигацию по слайдам типа «вперед-назад»
• Соберем заголовки слайдов и сделаем из них оглавление
• ...

Как построим XHTML-документ?

Для реализации нашего слайд-шоу разобьем документ на логически законченные блоки и заключим каждый в

Каждый слайд будем начинать с заголовка, заключенного в теги

...

Остальной XHTML-код в пределах слайда может быть произвольным, включая изображения, таблицы и т.п.

Что должно получиться?

XHTML-код документа должен получиться таким:

...
  

    
Заголовок слайда 1
    ... произвольный XHTML-код 1-го слайда
  
...
  

    
Заголовок слайда n
    ... произвольный XHTML-код n-го слайда
  
...

Для чего такая структура?

Зная, что каждый слайд заключен в

• легко подсчитать их количество и сделать панель навигации «следующий – предыдущий»;
• определить заголовки каждого блока и сделать из них оглавление.

Что сделаем с помощью JavaScript?

• Найдем в документе все
  ...
  и подсчитаем их количество.
• Переберем слайды:
  • выберем в них заголовки

    ...

    для генерации оглавления
  • создадим ссылки типа «вперед-назад»
• Сделаем панель навигации по слайдам
• Сделаем оглавление слайдов для быстрого перехода к любому из них

Как посчитать слайды?

var divs = document.getElementsByTagName("div");

Массив divs содержит все элементы div из документа. Переберем его и выберем только

for (var i=0; i 

for (var h=0; h 

 if (mySlide.childNodes[h].tagName == 'H2') {
// в массив заголовков кладем первый h2 для каждого слайда
 heads[s] = mySlide.childNodes[h];
 heads[s].id = 'heads'+s;
 break;
 }