Скрипт для рондомного отображения background (бекграунда).

Доброго времени суток, уважаемые читатели блога Мои тараканы!

Бекграунд для сайта.

Недавно передо мной возникла задача: придумать что-то, чтобы при каждой перезагрузке страницы, каждый раз загружался новый background страницы.

На каком-то форуме нашел такой скрипт:

var bgPath = '/img/bg';
var imagesNumber = 3;
var rndBg = Math.floor(Math.random() * imagesNumber);
document.body.style.backgroundImage = 'url(' + bgPath + rndBg + '.jpg)';

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

Я решил испробовать данный скрипт. Вставил всё по существующей инструкции, но и у меня тоже он, почему-то не сработал.

Немного повозился и… О чудо — всё работает!

Давайте вместе разберём этот код, в чем же была причина?

Первое: Данный скрипт нужно вставить после открывающего тега body.
Второе: Путь к изображениям. В шаблоне сайта я создал папку "background" и туда поместил изображения, которые должны рондомно (случайно, каждый раз другое) меняться при каждой перезагрузке страницы. Вы можете назвать эту папку как угодно. Или же совсем не создавать, а запихнуть файлы в уже существующую папку. Главное правильно указать путь к ним (лучше всего указать абсолютный путь).
Третье: Имя файла. В скрипте указано имя файла bg. Давайте и мы назовём свои беграунды bg0, bg1, bg2. Путь к изображению будет формироваться следующим образом: (+ bgPath + rndBg + '.jpg) — путь к картинке/bg (её название (без номера)) + номер картинки + расширение.
Последнее: var imagesNumber = 3 — 3 — это количество background’ов отображаемых в ротации. Если вы укажете число большее, чем число имеющихся у вас картинок — может проскочить «пустой» задний фон.

Пример:

<script type="text/javascript">;
var bgPath = 'http://ваш_сайт/templates/ваш_шаблон/images/backgrounds/bg'<!-- путь к изображениям (На WordPress путь может выглядеть так http://ваш_сайт/wp-content/temes/ваш_шаблон/images/backgrounds/bg)-->
var imagesNumber = 3;<!-- количество отображаемых изображений -->
var rndBg = Math.floor(Math.random() * imagesNumber);
document.body.style.backgroundImage = 'url(' + bgPath + rndBg + '.jpg)';
</script>

Для того чтобы фоновое изображение растягивалось на всю ширину экрана и не прокручивалось с остальным контентом в файл CSS следующий код:

body {
 background: fixed;
 -moz-background-size: 100%; /* Firefox 3.6+ */
 -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
 -o-background-size: 100%; /* Opera 9.6+ */
 background-size: 100%; /* Современные браузеры */}

Не нужно заменять все атрибуты тега body. Измените только нужные значения атрибута background.

Кстати, возможен другой вариант этой фишки:

var bgFolder = 'img/';
var backgrounds = [
  'bg0.jpg',
  'bg1.jpg',
  'bg2.jpg',
  'bg3.jpg',
  'bg4.jpg'
];
var rndBg = Math.floor(Math.random() * 5);
document.body.style.backgroundImage = 'url(' + bgFolder + backgrounds[rndBg] + ')';

Ну, теперь, я думаю, с этим скриптом вы разберётесь сами. Ну, если нет — смотрите инструкции к предыдущему скрипту — своего рода задачка на логику.

Кстати, если пошёл разговор о задачах на логику — вот вам ещё одна:

Задача на логику

Дошкольники решают эту задачу за 5-10 минут. У некоторых программистов уходит на неё до часа.
Но многие люди, исписав несколько листов бумаги, сдаются.

Маленькие дети не могут составлять уравнения или искать математические закономерности, поэтому они замечают, что значение зависит от количества кружочков в каждой цифре. В «9» один кружочек, в «8» — два, в «1» — ни одного, а, значит, 2581 = 2.

На этом всё. Вопросы в комментариях. Подписывайтесь на обновления блога в Twitter , RSS или по почте!

С уважением, Мышак Пётр!

Всемирная паутина World Wide Web.

Доброго времени суток, уважаемый читатель блога Moi-tarakany.ru !

Как то я пытался объяснить одному ламеру, что такое интернет. Он ни как не мог понять, в чём разница между Web и интернет.

И так, давайте попробуем разобраться, в чём же, все-таки, разница между Web и интернет?

После запуска СССР искусственного спутника Земли Министерство обороны США посчитало, что на случай войны Америке нужна надёжная система передачи информации. Тогда для этой цели была разработана первая компьютерная сеть. Это событие можно считать началом интернета. Читать далее «Всемирная паутина World Wide Web.»

Мой краткий учебник по HTML.Что такое HTML

Когда то один мой знакомый, узнав о том, что я увлекся сайтостроением, посоветовал не тратить время на HTML, а сразу приступать к изучению CMS. Я его тогда конечно не послушал, и склепал свой первый статичный сайт, страниц на десять. Сайт получился немного корявый. Сейчас я стараюсь его никому не показывать, но мне, ни капли не жаль потраченного времени.

Современные технологии позволяют создать сайт, не зная ни одного тэга. Но для того чтобы понимать с чем имеешь дело не мешало бы выучить хотя бы основные тэги и правила HTML.
Читать далее «Мой краткий учебник по HTML.Что такое HTML»

Теги HTML для работы со шрифтами: font color, font face, font size

Font color, font face, font size

Доброго времени суток, уважаемые читатели блога Moi-tarakany.ru !

В прошлых статьях, мы с вами начали изучать HTML на примере простенькой странички.

В этом посте речь пойдёт о тегах, предназначенных для шрифтов.

Начнем, пожалуй, с цвета.

Font color

Как известно любой цвет — это смешанные в определенной пропорции три основных цвета — красный, зелёный и синий.

В HTML цвет задаётся шестнадцатеричным кодом. В шестнадцатеричной системе исчислений используется не десять, а 16 цифр. Первые 10 это цифры от 0 до 9, остальные 6 — обозначаются символами A, B, C, D, E и F. Цвет состоит из трёх пар цифр. Первая пара — обозначает красный цвет, вторая — зелёный, третья — синий. Чем выше значение конкретной пары, тем заметней будет цвет в конкретном оттенке.
Читать далее «Теги HTML для работы со шрифтами: font color, font face, font size»

Изображения и гиперссылки

Фото.
Здравствуйте друзья!
Давайте сегодня вставим в наш сайт изображения и свяжем странички между собой ссылками.

Для вставки изображения используется тэг <img/> с атрибутом src=»здесь указывается путь к изображению»
Пример:
<img src="images/logo.gif"/>
Тэг <img>одиночный — то есть не требует закрывающего </img>.
Читать далее «Изображения и гиперссылки»

HTML шрифты

Здравствуйте друзья!
В этом посте речь пойдёт о тэгах, предназначенных для шрифтов.

Начнем, пожалуй, с цвета.

Font color

Как известно любой цвет — это смешанные в определенной пропорции три основных цвета — красный, зелёный и синий. В HTML цвет задаётся шестнадцатеричным кодом. В шестнадцатеричной системе исчислений используется не десять, а 16 цифр. Первые 10 это цифры от 0 до 9, остальные 6 — обозначаются символами A, B, C, D, E и F. Цвет состоит из трёх пар цифр. Первая пара — обозначает красный цвет, вторая — зелёный, третья — синий. Чем выше значение конкретной пары, тем заметней будет цвет в конкретном оттенке.
Читать далее «HTML шрифты»

Тэги форматирования текста

Приветствую Вас друзья!
Давайте продолжим работу над нашим сайтом.
Чтобы было с чем работать, давайте добавим немного текста. Скопируйте код и вставте его внутрь сайта .

<p>Этот текст я написал для примера. Вы можете проявить фантазию и придумать свой текст, или можете ничего не переделывать и оставить всё как есть. Всётаки это Ваш сайт.</p>

Для этого находим наш index.html, нажимаем на нём правой клавишей мыши, выбираем Edit with Notepad++ (если у вас установлен этот блокнот) или открыть с помощью: и выбираем блокнот или любой другой текстовый редактор. Проделываем нужные изменения. Если вам не нравится мой текст, можете вставить свой. Сохраняем ( удобней всего использовать комбинацию клавиш Ctrl+S ). Открываем в браузере.
Читать далее «Тэги форматирования текста»

Тэги форматирования текста

Теги для текста

Тэги для форматирования текста

Доброго времени суток, уважаемые читатели блога Moi-tarakany.ru !

Давайте продолжим работу над нашим первым сайтом.

Сегодня поговорим о тегах HTML предназначенных для форматирования текста.

Но для того, чтобы было с чем работать, давайте добавим немного текста.

Скопируйте код:
Читать далее «Тэги форматирования текста»