Как вставить угловой flash-баннер на сайт
Воскресенье, 22 февраля 2009
Этим постом начну серию статей-ответов на вопросы новичков, которые периодически сыплются мне в почту. Сразу оговорюсь, что описывать все, тем более самые скучные (читай простые) решения в блоге не буду, но по почте, рано или поздно, отвечаю всем.
Итак, есть задача: вставить на сайт flash-уголок (рабочий пример). Для пользователей Wordpress и Joomla всё просто — достаточно лишь скачать и настроить соответствующие плагины (PagePeel для Wordpress и PagePeel для Joomla). Тут особых проблем не наблюдается, всё настраивается через админку сайта, как и в сотнях других плагинов, поэтому даже не знаю что тут нужно объяснять.
Подробнее напишу, как добавить такой баннер на любой сайт ручками. Качаем скрипт для баннера отсюда (зеркало в блоге) и разархивируем его в нужную директорию на сервере.
В папке есть несколько ключевых файлов, с которыми нужно поработать:
- Изображения для баннера small.jpg (75×75 px) и big.jpg (500×500 px) — маленький и большой (развёрнутый) уголок соответственно. Их нужно поменять на свои изображения. Файл big.psd — это шаблон для удобства рисования своих баннеров, в работе он не участвует.
- Нужно настроить пути к большим и маленьким SWF и JPEG-файлам в скрипте pagepeel.js. Все нужные настройки переменных в скрипте помечены комментариями (если вы качали скрипт с блога — я перевел все комментарии на русский). Остальные параметры меняете на свой страх и риск. Сохраните скрипт (в кодировке UTF-8).
- В шаблоне сайта, между тегами <head>…</head> необходимо прописать:
<script src="ваш_путь/PagePeel.js" type="text/javascript"></script>
Всё, баннер должен работать.
При тестировании локально, нужно отключить предупреждения о подключении к Интернету в браузерах, иначе проверить работу скрипта не получится. Я тестировал сразу в сети.
Да и ещё, скрипт не работает в IE6.
Источник скрипта — donalyza.com
UPD: по многочисленным просьбам доработал скрипт до кроссбраузерного варианта. Рекомендую.
* * *
Сканер блогов:
Миша Квакин объявил второй набор в свою школу 3D-дизайна, не опоздайте! Замечаетльная подборка из 14 креативных дизайнов сайтов.
* * *
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе событий:
- подпишитесь на обновления по RSS
- получайте новые статьи на E-mail
- добавьте в Twitter: Как вставить угловой flash-баннер на сайт
- добавьте статью в закладки:
* * *
[...] Ответы на вопросы новичков от rotorweb.ru: Как вставить угловой flash-баннер на сайт. [...]
[...] Роторвеб опубликована подробная инструкция о том, как вставить угловой flash баннер на [...]
Спасибо за материал — сегодня попробую на блоге :)
В закладки, думаю найдём применение
<<Этим постом начну серию статей-ответов на вопросы новичков, которые периодически сыплются мне в почту.
Спасибо,что не оставляете без внимания и делитесь опытом!
IE7 пример к статье не работает тож ;)
[...] считать этот пост продолжением предыдущего, так, как мне в почту прилетел с десяток писем от [...]
Ого, спасибо, толково написано. Надо будет попробовать.
Я себе ставил такой скрипт, но немного исправленный. Вместо флэш там был какойто непонятный файлик который быс с программой для редактирования этих файлов. Точное расширение к сожалению не помню, да и потерял и скрипт с сайта снес.
Спасибо за разъяснение.
[...] в предыдущих частях (про flash-баннер, почитать можно тут и тут), но без альтернативной возможности [...]
Спасибо за инфо.
Здравствуйте.
Можно как то сделать, чтоб маленькая (small.png) картинка размерами 150×150 отображалась полностью?
странно но в архиве переведенном в коменте размеры стоят не те что надо !
pagepeel.small_image = escape ('./pagepeel/images/small.jpg'); // путь к маленькому изображению уголка (до наведения мышью на баннер) (поддерживаются форматы — .jpg, .gif, .png, .swf) — 75X75
pagepeel.small_width = '100'; ----> 75
pagepeel.small_height = '100'; ----> 75
и далее соотвецтвенно .
Мне нужно в своём блоге оформить кнопку в таком виде как здесь — footballbritain.blogspot.com
Чтоб было написано — Моя кнопка, ниже сама кнопка, а ещё ниже код к ней(втавленный как там в такую типа рамочку с калёсиком)
У меня уже всё есть, картинку нарисовал, код к ней сделал, остается только подмутить это всё в блоге .
Прошу помогите.
Дополнить вопрос
@Сергей: картинка у вас есть, код тоже... В чём тогда вопрос-то?
Вопрос в том , как мне их оформить в таком виде как на блоге(footballbritain.blogspot.com).
Если с вставкойподписи — Моя Кнопка, самой кнопки, проблем нет, то с её кодом всё сложнее. Дело в том что я незнаю как сделать ту «рамочку с калёсиком» в которой находится код баннера для всех желающих его копировать себе.
Это обычный
textarea, а HTML-код можно посмотреть в вашем сайте-примере.Как вставить не угловой баннер, а 468×60?