Меняющаяся картинка в шапке сайта

Рубрики: Верстка |

Это весьма интересный эффект, который сделает ваш сайт более динамичным, ибо при каждой загрузке в шапке будет автоматом появляться новая картинка. Делается это при помощи небольшого php-скрипта. Вот его код:

<?php
$folder = '.';
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
$img = null;
if (substr($folder,-1) != '/') {
$folder = $folder.'/';
}
if (isset($_GET['img'])) {
$imageInfo = pathinfo($_GET['img']);
if (
isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
file_exists( $folder.$imageInfo['basename'] )
) {
$img = $folder.$imageInfo['basename'];
}
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
$file_info = pathinfo($file);
if (
isset( $extList[ strtolower( $file_info['extension'] ) ] )
) {
$fileList[] = $file;
}
}
closedir($handle);
if (count($fileList) > 0) {
$imageNumber = time() % count($fileList);
$img = $folder.$fileList[$imageNumber];
}
}
if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists('imagecreate') ) {
header ("Content-type: image/png");
$im = @imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);
imagepng ($im);
imagedestroy($im);
}
}
?>

Принцип его работы довольно прост: при каждой перезагрузке страницы он будет случайно выбирать картинку из той же папки, где лежит сам. Чтобы все заработало, нужно скрипт сохранить в виде PHP-файла с именем random.php. Затем подготовить ряд картинок одного размера, и положить в ту же папку, где лежит сам файл. У нас это пусть будет папка header, вложенная в общую папку с картинками images.Картинки можно сохранять в любом виде, хоть jpg, хоть gif или даже bmp.

В листе стилей CSS мы пропишем это дело в виде фона к соответствующему блоку. Раз у нас это “шапка” (header), то вот туда и воткнем:

#header {
background: url(images/header/random.php) no-repeat;
width: 800px;
height: 150px;
}

Здесь заданы ширина и высота блока 800х150 пикселей. Соответственно и картинки все должны быть такого же размера. В правиле background мы указали не совсем обычный URL — вместо привычной ссылки на картинку, мы дали ссылку непосредственно на наш файл random.php. То есть в нужном месте на странице будет подставляться не сама картинка, а этот php-скрипт, который уже в свою очередь подставит там случайную картинку. Все просто!

Далее мы в коде самой страницы напишем:

<div id="header"></div>

И этого достаточно. Конечно же непременным условием должна быть поддержка работы PHP на вашем хостинге. Но сейчас это есть практически у всех хостеров даже на самых дешевых тарифах.

Пример работы данного скрипта можно посмотреть здесь: Баечка.ру

Чтобы увидеть новую картинку, просто обновите страницу.

Enjoy!

Вебсовет

Циклы статей

• Создание 2-х колоночного шаблона для Вордпресс
• Проект Ипонамат. Зарабатываем денешки
• Блочная верстка

Свежие записи

• Big First Letter или Буквица
• Символьные объекты в HTML-коде
• Firefox — убираем пунктир у ссылок
• Выделение внешних ссылок при помощи CSS
• Pop-up изображения для текстовых ссылок
• Настройка плагинов Вордпресс
• Создание 2-х колоночного шаблона для Вордпресс. Часть 9. Комментарии
• Создание 2-х колоночного шаблона для Вордпресс. Часть 8. Подвал
• Создание 2-х колоночного шаблона для Вордпресс. Часть 7. Сайдбар (Навигация)
• Создание 2-х колоночного шаблона для Вордпресс. Часть 6. Контент (продолжение)

Теперь вы можете скачать эту книгу в формате PDF (540кБ в архиве ZIP). Как всегда - совершенно бесплатно! :) Книга расширена Полезняшками и Приложением, а также исправлены некоторые неточности и более подробно описаны некоторые фишки.
Enjoy!

Свежие комментарии

• вадим: Интересно спасибо
• Mike: Извините, если не по теме, что вы скажете насчет бесплатного...
• Лариса: Спасибо за скорый ответ.Решила еще раз внмательно...
• Лариса: Пользуясь вашими вебсоветами установила WP, сейчас...
• Viggo: Нельзя ли привести пару скриншотов таких пунктирных линий у...

Тэги

Верстка Вордпресс Гугль Денвер Домены ЖЖ Олсабмиттер Опера Раскрутка Ролловер меню Фидбурнер Фотошоп Яндекс база WP блоги блочная верстка браузер буквица виджеты внешние ссылки выбор домена выбор хостинга графоманские сайты доменная зона заработать заработок защита e-mail изображения индекс индексация ключ API книга контент линейки макет манимейкинг меняющаяся картинка навигация новая книга обтекание пиар пингатор пингатор блогов плагины платные статьи платный хостинг подвал позиционирование покупка домена привязка стилей продажа ссылок продвижение псевдо-классы регистрация домена сайдбар сайт сервисы закладок символы символьные объекты слой состав шаблона социалки тиц трэкбэк уроки установка Вордпресс установка Wordpress флешмоб формы форумы фотогалерея хостер шаблон шаблон вордпресс шапка шапка сайта шпаргалка юзабилити "бесплатный" домен Blogger Blogsome Blogspot CMS css DNS FAQ feedburner Firefox first-letter form Gmail html IE input livejournal php plugin pop-up PR PSPad RSS Sape Webmoney WordPress z-index

Архив

• Октябрь 2008
• Сентябрь 2008
• Август 2008
• Июль 2008
• Июнь 2008
• Май 2008
• Апрель 2008
• Март 2008
• Февраль 2008
• Январь 2008
• Декабрь 2007

Поиск

Рубрики

• WordPress
• Браузеры
• Верстка
• Вопрос/Ответ
• Делаем деньги
• Дизайн
• Домены
• Инструменты
• Мои книги
• Полезняшки
• Раскрутка
• Сервер
• Хостинг

Пузомерки