Любой может разместить фотографии из отпуска на своем веб-сайте, но только самые крутые веб-разработчики оформят их в виде слайд-шоу. И это не простое слайд-шоу с одной фотографией и одной HTML-страницей, а по-настоящему динамичное слайд-шоу, в котором каждое изображение загружается на одну и ту же HTML-страницу. Мы научим вас использовать динамический HTML (DHTML) и каскадные таблицы стилей (CSS) для создания собственного слайд-шоу, которое сделает ваших друзей, семью и коллег еще скучнее, о нет! Это более впечатляюще. Но помните! Поскольку это слайд-шоу написано на DHTML, его можно просмотреть только в браузере версии 4.0 или выше.
Конечно, у такого рода слайд-шоу есть серьезные применения. Просто мы об этом еще не подумали.
шаг первый
Соберите изображения, которые уже есть в Интернете, и обрежьте их до одинакового размера. Убедитесь, что диапазон размеров не превышает 640 x 480 пикселей, и сохраняйте одинаковые размеры в пикселях для всех фотографий — зритель будет визуально раздражать, если фотографии будут разного размера.
Шаг 2
В теге заголовка первое, что вам нужно сделать, это указать, что вы используете CSS в теге
Шаг 3
Затем сразу разберитесь с деталями CSS или вставьте JavaScript в тег заголовка. После var numSLides = задайте количество отображаемых слайдов (не задавайте слишком много, поскольку каждая фотография добавит на страницу значительное количество КБ). В нашем примере пять фотографий. Ниже приведен код программы:
:
функция setUp() {
если (!document.all) {
документ.все = документ;
for (i=1;i<=numSlides;i++) document.all[("image"+i)].
style=document.all[("изображение"+i)];
}
переключательСлайд (1);
}
функция switchSlide(sDir) {
новыйСлайд = текущийСлайд + сДир;
если (!newSlide) newSlide=numSlides;
если (newSlide > numSlides) newSlide=1;
document.all[("image"+newSlide)].style.visibility="visible";
document.all[("изображение"+currentSlide)].
style.visibility="скрытый";
// Если вам не нужен текст описания, удалите следующую строку:
document.all["подписи"].document.forCaptions.captionsText.
значение = captionTxt [newSlide];
текущийСлайд = новыйСлайд;
}
//-->
Обратите внимание на комментарии в конце кода программы: если у вас нет описания, удалите строку под ним.
Шаг 6
Закройте тег заголовка с помощью , а затем вставьте следующий программный код в основную часть HTML-файла веб-страницы. Обратите внимание, что код программы идентифицирует каждое изображение отдельным тегом
Шаг 7
Ваша аудитория должна пролистывать слайды в своем темпе, поэтому вы должны предоставить им что-то, на что можно нажать. . Вы можете использовать простые старые гиперссылки, но это гораздо сложнее благодаря специальным кнопкам «Предыдущий» и «Следующий GIF». В примере программного кода используется таблица для соединения next.gif и previous.gif:
Если вы не хотите использовать файлы GIF для кнопок «Предыдущий» и «Следующий», замените теги выше текстом.
Шаг 8
Наконец, введите текст описания, который будет отображаться в