Любой может разместить фотографии из отпуска на своем веб-сайте, но только самые крутые веб-разработчики оформят их в виде слайд-шоу. И это не простое слайд-шоу с одной фотографией и одной HTML-страницей, а по-настоящему динамичное слайд-шоу, в котором каждое изображение загружается на одну и ту же HTML-страницу. Мы научим вас использовать динамический HTML (DHTML) и каскадные таблицы стилей (CSS) для создания собственного слайд-шоу, которое сделает ваших друзей, семью и коллег еще скучнее, о нет! Это более впечатляюще. Но помните! Поскольку это слайд-шоу написано на DHTML, его можно просмотреть только в браузере версии 4.0 или выше.
Конечно, у такого рода слайд-шоу есть серьезные применения. Просто мы об этом еще не подумали.
шаг первый
Соберите изображения, которые уже есть в Интернете, и обрежьте их до одинакового размера. Убедитесь, что диапазон размеров не превышает 640 x 480 пикселей, и сохраняйте одинаковые размеры в пикселях для всех фотографий — зритель будет визуально раздражать, если фотографии будут разного размера.
Шаг 2
В теге заголовка первое, что вам нужно сделать, это указать, что вы используете CSS в теге <STYLE>. В теге <STYLE> установите положение на странице, где вы хотите, чтобы отображался слайд, и решите, начинать ли с пустого фонового изображения или сразу показывать первый слайд. Вырежьте и вставьте следующий программный код на свою страницу, используя координаты местоположения по вашему выбору:
<STYLE type="text/css"> <!-- .slides {position:absolute; left: 25%; top:25%; видимость: скрыто} --> </STYLE>
Шаг 3
Затем сразу разберитесь с деталями CSS или вставьте JavaScript в тег заголовка. После var numSLides = задайте количество отображаемых слайдов (не задавайте слишком много, поскольку каждая фотография добавит на страницу значительное количество КБ). В нашем примере пять фотографий. Ниже приведен код программы:
<SCRIPT Language="JavaScript1.2"> вар numSlides = 5; вар currentSlide = numSlides;
Шаг 4
Если вы хотите добавить поясняющий текст к изображению, вы можете использовать следующий программный код, чтобы заменить наш текст описания вашим собственным текстом описания:
вар captionTxt = новый массив (numSlides
функция setUpCaptions ()
;
captionTxt[1] = "Вход на пирс 39."
captionTxt[2] = "Морские львы бродят возле пирса."
captionTxt[3] = "Лодка пришвартовалась у причала."
captionTxt[4] = "Фреска с китами в подводном мире."
captionTxt[5] = "Островки или скалы в море."
}
Шаг 5
Вставьте показанный здесь программный код в HTML-файл вашей веб-страницы под описанием JavaScript. Поскольку Navigator 4.0 и IE 4.0 интерпретируют CSS по-разному, наш скрипт использует обнаружение объектов для определения режима рендеринга. Если представлен режим «Навигатор», он все равно может определять некоторые конкретные объекты, чтобы программный код IE все еще работал. Кроме того, это еще и конец всего программного кода, поэтому он должен заканчиваться тегом </SCRIPT>:
функция 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
Закройте тег заголовка с помощью </HEAD>, а затем вставьте следующий программный код в основную часть HTML-файла веб-страницы. Обратите внимание, что код программы идентифицирует каждое изображение отдельным тегом <DIV>, который связан с обычным форматом <IMG src>:
<BODY onLoad="setUp()">
<B> Слайд-шоу на Builder.com!</B>
<DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV>
<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>
<DIV id="image3" class="slides"><IMG src=" Third.jpg"></DIV>
<DIV id="image2" class="slides"><IMG src=" Second.jpg"></DIV>
<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>
Шаг 7
Ваша аудитория должна пролистывать слайды в своем темпе, поэтому вы должны предоставить им что-то, на что можно нажать. . Вы можете использовать простые старые гиперссылки, но это гораздо сложнее благодаря специальным кнопкам «Предыдущий» и «Следующий GIF». В примере программного кода используется таблица для соединения next.gif и previous.gif:
<DIV style="position:absolute; top:350px; left:100px">
<A href="javascript:switchSlide(-1)"><IMG src="previous.gif" border=0></A>
<A href="javascript:switchSlide(1)"><IMG src="next.gif" border=0></A>
</DIV>
Если вы не хотите использовать файлы GIF для кнопок «Предыдущий» и «Следующий», замените теги <IMG> выше текстом.
Шаг 8
Наконец, введите текст описания, который будет отображаться в <TEXTAREA>. Вы можете выбрать размер <TEXTAREA> по своему усмотрению, просто измените числа rows= и cols=. Ниже приведен код программы:
<DIV id="captions" style="position:absolute; слева: 320 пикселей; сверху: 75 пикселей">
<B>Подпись к изображению</B>
<имя формы=forCaptions>
<TEXTAREA name="captionsText" Wrap="virtual" rows=25 cols=20"></TEXTAREA>
</ФОРМ>
</DIV>