Вывод случайного HTML на web-страницу

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Здравствуйте! Так получилось, что я сначала сделал страницы с уроками по организации вывода случайной фразы, картинки и времени на web-странице. Осталось последнее - вывод случайного HTML. Этот простой скрипт позволяет в режиме ротации отображать как небольшие изображения или аватары, короткие фразы в текстовом варианте, так и ссылки и даже небольшие таблицы.

При заходе на страницу на ней уже отображается случайный HTML в виде одного из перечисленных ранее. При обновлении страницы будет происходить замена HTML и будут появляться другие варианты.

Демо-пример Исходники (32 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.


Установка на ваш сайт

1. Скачайте учебный материал, распакуйте в текущую папку на компьютере. В папке randomhtml находятся:
- папка с изображениями img;
- папка js со скриптом randomhtml.js;
- файл index.html.

Можно открыть последний в вашем браузере и проверить работу скрипта. При каждой перезагрузке страницы картинка, анимашка, текст, ссылка, должны меняться. (Не торопитесь с перезагрузкой, делайте её с интервалом в 5-7 секунд и все будет нормально работать).

2. Подберите нужные Вам изображения и загрузите их в папку img вашего сайта.

3. Файл скрипта randomhtml.js загрузите в корневую папку со скриптами на сайт, обычно она так и называется js.

4. На странице своего сайта в разделе head вставьте следующий код вызова скрипта:

<script type="text/javascript" src="js/randomhtml.js"></script>

          Путь к файлу randomhtml.js.

5. В раздел body вставьте этот код:

<script type="text/javascript">
RandomHTMLLong('Привет!, День Дурака отмечаем всенародно, Как дела?, <a href="/6karta.php" target="_blank">Вывод ссылки</a>, <img src="img/excl.jpg" width="200" height="150" alt="картинка">, <table border="1"><tr><td>Это таблица</td></tr></table>, <img src="img/excl1.jpg" width="90" height="90" alt="картинка">,',',');
</script>

          Одна из коротких текстовых фраз.

          Вставьте свою ссылку.

          Пропишите путь к вашему изображению.

          Содержимое таблицы.

          Ширина и высота картинки, анимашки.

В результате этих действий Вы получите такую же картину, как в моём демо-примере. А мне остаётся пожелать Вам доброго здоровья и успехов в работе над своими проектами. Пока! Ваш Л.М.


Ваше мнение по материалу, изложенному на сайте




  © 2015–2024  dynamic-site.olerant.ru  L.M. Служба поддержки Яндекс.Метрика