ЦЕЛЬ ЛАБОРАТОРИИ:
1. Разработайте JavaScript для создания заданного баннера.
2. Разработайте JavaScript для создания заданного слайд-шоу.
Баннерная реклама
- Баннерная реклама является отличительной чертой каждой коммерческой веб-страницы.
- Обычно он располагается в верхней части веб-страницы, и его цель — привлечь внимание посетителя.
- Все рекламные баннеры представлены в файловом формате, таком как GIF, JPG, TIFF или других распространенных форматах графических файлов.
- Некоторые из них представляют собой Flash-ролики, для просмотра которых посетитель должен иметь браузер с подключаемым модулем Flash.
- Ниже приведены шаги для вставки баннерной рекламы на веб-страницу.
1) Создайте рекламный баннер с помощью графического инструмента, такого как PhototShop, Paint и т. д.
2) Создайте элемент ‹img› на веб-странице с высотой и шириной для отображения баннерной рекламы.
3) Создайте JavaScript, который загружает и отображает рекламные баннеры.
Слайд-шоу
- Слайд-шоу по своей концепции похоже на рекламный баннер в том смысле, что слайд-шоу вращает несколько изображений на веб-странице.
- Слайд-шоу дает посетителю возможность изменить отображаемое изображение: посетитель может нажать кнопку «Вперед», чтобы увидеть следующее изображение, и кнопку «Назад», чтобы увидеть предыдущее изображение.
- Создание слайд-шоу для вашей веб-страницы — простой процесс.
- Тег ‹body› содержит тег ‹img›, который используется для отображения изображения на веб-странице.
Примеры программ
1. Разработайте программу JavaScript для создания простого рекламного баннера
<html> <head> <title>Banner Advertisements</title> </head> <body bgcolor="#EEEEEE"> <a href="https://www.javatutsweb.com"> <img src="java-programming-ad.jpg"/> </a> </body> </html>
2. Разработайте программу JavaScript для создания слайд-шоу с группой из четырех изображений, а также смоделируйте следующий и предыдущий переход между слайдами в вашем JavaScript
<html> <head> <title>Image SlideShow</title> <script> var images = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg"]; var count = 0; function previousImage() { if(count!=0) count--; var id = document.getElementById("imageId"); id.src = "images/" + images[count]; } function nextImage() { if(count!=4) count++; var id = document.getElementById("imageId"); id.src = "images/" + images[count]; } </script> </head> <body> <center> <img id="imageId" src="images/01.jpg" width="300" height="200"/> <br/> <hr> <input type="button" value="< Prev Image" onclick="previousImage()"/> <input type="button" value="Next Image >" onclick="nextImage()"/> </center> </body> </html>