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

Дата: 20.12.2007 | Автор: Игорь Квентор | Рубрика: Верстка |

Тэги: , , ,

Это весьма интересный эффект, который сделает ваш сайт более динамичным, ибо при каждой загрузке в шапке будет автоматом появляться новая картинка. Делается это при помощи небольшого 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!

Вебсовет

rss Подпишитесь на RSS

Или получайте новости на ваш e-mail:

Комментарии (24) на запись “Меняющаяся картинка в шапке сайта”

  1. seo специалист 01.05.2008 16:05

    Спасибо!!! Прикольно, как-то попробую

  2. Илья 03.08.2008 16:02

    Вот-вот, и не надо мучиться с выбором, ту или эту картинку поставить. Пусть все работают! Спасибо, мне пригодится!

  3. Игорь Квентор 03.08.2008 23:07

    Дерзайте! :)

  4. logycom 20.08.2008 17:27

    спасибо, полезная весч:)

  5. Игорь Квентор 28.08.2008 12:09

    Упс! Только сегодня заметил, что Опера некорректно отображает рамку у кода, помещая туда лишь первый “абзац”. Код, конечно же, нужно скопировать целиком, от знака <?php до знака ?>
    Ох уж эта Ооопера… (матерится в пол голоса)…

  6. Илья 29.08.2008 06:32

    Игорь, у меня почему-то иначе получается, Опера показывает код целиком и на белом фоне, а все остальное на черном орнаментальном. А Мозилла (FF) как раз выделяет рамкой кусочек. Посмотрите, пожалуйста.
    http://s58.radikal.ru/i160/0808/63/2a18fc52bee0.gif
    http://s59.radikal.ru/i164/0808/82/cb6961a7e95f.gif

  7. Илья 29.08.2008 06:47

    А вот эта ссылка на скриншот странички в IE7
    http://s40.radikal.ru/i090/0808/25/282eeca90c17.gif
    Удивительно, но только ругаемый браузер показывает точно. Что это, особенность WP?

  8. Игорь Квентор 29.08.2008 06:52

    Привет, Илья! А сейчас как? Просто я убрал из кода пустые строки. ВП воспринимает их как новый абзац, поэтому и чудит так.

  9. Илья 29.08.2008 09:05

    Вот теперь все три браузера показывают одинаково верно.
    И сколько еще неожиданностей может быть?
    Как-то чем дальше, тем опаснее. Показалось,
    что WP поможет преодолеть малую грамотность в области WEB, а что-то чем больше узнаю, тем меньше уверенности.

  10. Игорь Квентор 29.08.2008 09:55

    :) Вордпресс, как и любой другой CMS движок, любит преподносить сюрпризы. Оттого и существуют целые форумы поддержки, на которых обсуждается куча траблов и глюков. Однако все решаемо, не стоит волноваться.

  11. sanek 31.08.2008 17:19

    Вопрос к программистам:

    я таким образом делаю картинки рядом с сылкой при наведении на нее. (a:hover {background:url(’images/title/title.php’) right center no-repeat; padding:23px 65px 12px 0;text-decoration:underline;color: #00f617;})
    Чего нужно добавить в код, что бы у всех ссылок были разные картинки?

  12. Игорь Квентор 02.09.2008 17:31

    sanek, это вопрос не к программистам, а к верстальщикам. Указанный вами кусок кода реализует для всех ссылок отображение одинковой картинки при наведении мыши. Чтобы картинки были разные, нужно добавить разные имена классов перед тэгом a. И, соответственно, в каждом правиле прописать свою картинку. Например:

    .ssylka1 a:hover {background: url(адрес картинки 1) и т.д.}
    .ssylka2 a:hover {background: url(адрес картинки 2) и т.д.}
    .ssylka2 a:hover {background: url(адрес картинки 2) и т.д.}

    В тексте для нужной ссылки пишете <span class=”ssylka(номер)”> ссылка</span>

  13. sanek 03.09.2008 01:11

    про это-то я знаю. Вот мой тестовый сайт drupal.pistoletmakarova.ru (не пугайтесь названия, скоро адрес будет vashe-hobbi.com как доделаю все)

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

  14. Игорь Квентор 03.09.2008 11:27

    Вот тут уже ничего не посоветую. Возможно есть варианты на Java-скриптах.

  15. sanek 03.09.2008 19:08

    Да по-любому есть какой-нибудь скрипт, только его фик найдешь.
    Ладно, спасибо за поддержку.

  16. HIDDEN 11.08.2009 09:16

    Спасибо большое! Все работае! я сам делал так:
    1.Создать рнр файл и прописать там код <?php img srs={THEME}/images/header.jpg ?>
    (если хочешь млжно хоть до 1000)
    потом просто присоединяем куда нужно

  17. Валентина 29.09.2009 14:33

    Скажите, пожалуйста, а что делать в случае если во всех браузерах скрипт работает нормально (при переходе на другую страницу меняется картинка), а в Опере - чтобы поменялась картинка необходимо страницу именно обновлять, а не просто переходить на другую страницу. Как это исправить?

  18. Валентина 01.10.2009 12:18

    Тема все еще актуальна. Очень нужен совет!

  19. Игорь Квентор 02.10.2009 09:56

    Валентина, увы я не программист, и как изменить скрипт для того, чтобы Опера не кэшировала картинки, я не знаю.

  20. Валентина 02.10.2009 12:53

    Вот что надо сделать! выводить на страницу таким образом:
    <?php
    echo "<div id='header'
    style='background: url(images/header/random.php?p=".rand().") no-repeat; width: 800px; height: 150px;'></div>";
    ?>
    Может кому пригодится)

  21. Валентина 02.10.2009 12:54

    Ваш сайт съел куски кода!
    http://www.softtime.ru/forum/read.php?id_forum=1&id_theme=68442

  22. Игорь Квентор 02.10.2009 22:01

    Код поправил :) Да, возможен и такой вариант, но только в том случае, если в шапке ничего кроме фона не будет. Если же захочется добавить туда текст заголовка или описания, то код заметно усложнится.

  23. Виктор 10.01.2010 23:25

    У меня вопросик! А можно как то сделать так чтобы картинка все таки менялась скажем каждые 5-10 секунд, а не за счет обновления страницы!

  24. Игорь Квентор 10.01.2010 23:50

    Виктор, можно. Для этого уже существуют готовые решения на jQuery в виде слайдера. Если интересно, могу в ближайших постах рассказать об этом подробнее с примерами

Трэкбеки

Оставить комментарий