Как вставить угловой flash-баннер на сайт

Иллюстрация к статье «Как вставить угловой flash-баннер на сайт»

Этим постом начну серию статей-ответов на вопросы новичков, которые периодически сыплются мне в почту. Сразу оговорюсь, что описывать все, тем более самые скучные (читай простые) решения в блоге не буду, но по почте, рано или поздно, отвечаю всем.

Итак, есть задача: вставить на сайт flash-уголок (рабочий пример). Для пользователей WordPress и Joomla всё просто — достаточно лишь скачать и настроить соответствующие плагины (PagePeel для WordPress и PagePeel для Joomla). Тут особых проблем не наблюдается, всё настраивается через админку сайта, как и в сотнях других плагинов, поэтому даже не знаю что тут нужно объяснять.

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

В папке есть несколько ключевых файлов, с которыми нужно поработать:

  1. Изображения для баннера small.jpg (75×75 px) и big.jpg (500×500 px) — маленький и большой (развёрнутый) уголок соответственно. Их нужно поменять на свои изображения. Файл big.psd — это шаблон для удобства рисования своих баннеров, в работе он не участвует.
  2. Нужно настроить пути к большим и маленьким SWF и JPEG-файлам в скрипте pagepeel.js. Все нужные настройки переменных в скрипте помечены комментариями (если вы качали скрипт с блога — я перевел все комментарии на русский). Остальные параметры меняете на свой страх и риск. Сохраните скрипт (в кодировке UTF-8).
  3. В шаблоне сайта, между тегами <head>…</head> необходимо прописать:<script src="ваш_путь/PagePeel.js" type="text/javascript"></script>

Всё, баннер должен работать.

При тестировании локально, нужно отключить предупреждения о подключении к Интернету в браузерах, иначе проверить работу скрипта не получится. Я тестировал сразу в сети.

Да и ещё, скрипт не работает в IE6.

Источник скрипта — donalyza.com

UPD: по многочисленным просьбам доработал скрипт до кроссбраузерного варианта. Рекомендую.

* * *

Сканер блогов:

Миша Квакин объявил второй набор в свою школу 3D-дизайна, не опоздайте! Замечаетльная подборка из 14 креативных дизайнов сайтов.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 26

  1. @ Внутренняя поисковая оптимизация сайта: ручное редактирование мета-тегов и тега заголовка страницы, 24.02.2009 в 12:02

    [...] Ответы на вопросы новичков от rotorweb.ru: Как вставить угловой flash-баннер на сайт. [...]

    Ответить

  2. @ Блог-шоу - выпуск 16 - Продвижение сайтов, веб-дизайн и креатив, 25.02.2009 в 20:16

    [...] Роторвеб опубликована подробная инструкция о том, как вставить угловой flash баннер на [...]

    Ответить

  3. Терехов, 26.02.2009 в 7:54

    Спасибо за материал — сегодня попробую на блоге :)

    Ответить

  4. Пузат, 28.02.2009 в 11:54

    В закладки, думаю найдём применение

    Ответить

  5. Сокол, 28.02.2009 в 15:09

    <<Этим постом начну серию статей-ответов на вопросы новичков, которые периодически сыплются мне в почту.

    Спасибо,что не оставляете без внимания и делитесь опытом!

    Ответить

  6. Wasly, 01.03.2009 в 20:55

    IE7 пример к статье не работает тож ;)

    Ответить

  7. @ Как вставить угловой flash-баннер на сайт 2 (кроссбраузерное решение) | rotorweb.ru | Проблемы и решения в Web-дизайне, 09.03.2009 в 14:04

    [...] считать этот пост продолжением предыдущего, так, как мне в почту прилетел с десяток писем от [...]

    Ответить

  8. Евгений, 09.03.2009 в 22:29

    Ого, спасибо, толково написано. Надо будет попробовать.

    Ответить

  9. Евгений, 12.03.2009 в 17:02

    Я себе ставил такой скрипт, но немного исправленный. Вместо флэш там был какойто непонятный файлик который быс с программой для редактирования этих файлов. Точное расширение к сожалению не помню, да и потерял и скрипт с сайта снес.

    Ответить

  10. Виктор Фомин, 30.08.2009 в 16:42

    Спасибо за разъяснение.

    Ответить

  11. @ Баннер-уголок на jQuery | rotorweb.ru | Проблемы и решения в Web-дизайне, 16.09.2009 в 15:08

    [...] в предыдущих частях (про flash-баннер, почитать можно тут и тут), но без альтернативной возможности [...]

    Ответить

  12. Али, 12.12.2009 в 21:59

    Спасибо за инфо.

    Ответить

  13. @ Олег, 02.03.2010 в 12:40

    Здравствуйте.

    Можно как то сделать, чтоб маленькая (small.png) картинка размерами 150×150 отображалась полностью?

    Ответить

  14. Cisko, 02.03.2010 в 18:41

    странно но в архиве переведенном в коменте размеры стоят не те что надо !

    pagepeel.small_image = escape ('./pagepeel/images/small.jpg'); // путь к маленькому изображению уголка (до наведения мышью на баннер) (поддерживаются форматы — .jpg, .gif, .png, .swf) — 75X75

    pagepeel.small_width = '100'; ----> 75

    pagepeel.small_height = '100'; ----> 75

    и далее соотвецтвенно .

    Ответить

  15. @ Сергей, 22.03.2010 в 19:37

    Мне нужно в своём блоге оформить кнопку в таком виде как здесь — footballbritain.blogspot.com

    Чтоб было написано — Моя кнопка, ниже сама кнопка, а ещё ниже код к ней(втавленный как там в такую типа рамочку с калёсиком)

    У меня уже всё есть, картинку нарисовал, код к ней сделал, остается только подмутить это всё в блоге .

    Прошу помогите.

    Дополнить вопрос

    Ответить

    • rotor, 22.03.2010 в 20:37

      @Сергей: картинка у вас есть, код тоже... В чём тогда вопрос-то?

      Ответить

  16. @ Сергей, 23.03.2010 в 19:57

    Вопрос в том , как мне их оформить в таком виде как на блоге(footballbritain.blogspot.com).

    Если с вставкойподписи — Моя Кнопка, самой кнопки, проблем нет, то с её кодом всё сложнее. Дело в том что я незнаю как сделать ту «рамочку с калёсиком» в которой находится код баннера для всех желающих его копировать себе.

    Ответить

    • rotor, 25.03.2010 в 11:18

      Это обычный textarea, а HTML-код можно посмотреть в вашем сайте-примере.

      Ответить

  17. @ 2zla, 07.04.2010 в 11:57

    Как вставить не угловой баннер, а 468×60?

    Ответить

  18. @ Knowkip, 12.10.2011 в 7:23

    Данный скрипт будет работать на сайтах под Ucoz?

    И в какой программе удобнее всего редактировать скрипт?

    Ответить

  19. john, 15.11.2011 в 3:28

    При наведении некрасиво дёргается((, через неделю дёрганье дико раздражает.

    borissemenoff.ru/aktivnij-flash-ugolok/ — тут уголок не дёргается, но с копирайтом (тоже бесит).

    Ответить

  20. @ Павел, 10.12.2011 в 11:35

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

    Ответить

  21. flash-баннер, 31.12.2011 в 15:19

    Может,стоит забыть и забить на IE?

    Ответить

  22. @ Евгений, 15.07.2014 в 5:56

    Классно! Сначала не получилось уже хотел грохать скрипт, а потом пригляделся оказывается не везде прописал путь. Еще раз спасибо. Как раз искал то, чтобы можно было поставить на DLE движок. Верно подметили что на Joomla и WordPress существуют готовые плагины. Ставлю сайт в закладки.

    Ответить

  23. @ greench, 05.03.2015 в 3:04

    у меня партнёрка и там такой код

    куда бы я этот код не вставлял реклама всегда выходит в одном месте в нижней части сайта, как мне поставить его в сайдбар?

    Ответить

  24. Jim, 02.08.2015 в 23:31

    Баннер красивый НО:

    — Эффективность нулевая в плане ctr. Не кликает народ на эту тему. Самый эффективный это поп-ап баннер.

    — Из-за флэша не поддерживается в мобильных устройствах и яблочной продукции.

    — В коде флеша, а именно в big.swf прописан

    getURL (_root.ad_url, «_blank»); ваша ссылка будет открываться в новых вкладках, а если нужен просто переход внутри сайта?

    — fla исходников нет, не отредактировать эту строчку на _self. Декомпиляторы не качественно кодируют, пытаться взломать бесполезно(.

    -В IE не работает.

    Ответить

Есть что сказать?