Rich-media баннер своими руками

17 июня 2011, рубрика: Верстка |

Как сделать рич-медиа своими руками

Недавно на одном из своих ресурсов решил испытать новую партнерку, которая в качестве промо-материалов предоставляла банеры. Вот и решил я попробовать сделать сам рич медиа баннер, чтобы увеличить CTR. Далее о том что у меня получилось.
Позадалбывав поисковики запросом «как сделать рич медиа» я нашел несколько готовых решений. Но того что мне идеально подходит не нашел. Везде в качестве баннера выступал флеш-объект, были какие-то навороты. Мне же нужна была чисто всплывающая картинка с кнопкой «Закрыть», которая плавает по центру экрана и ничего больше. В итоге я забил и сделал все сам=)

Что представляет собой стандартный Rich-media баннер?

Плавающий div контейнер с фиксированым позиционированием и картинкой внутри и ничего больше =)

В моем случае, так как рич медиа нужно было вставить на несколько страниц было удобно оформить его в виде отдельно php файла.

<!-- рич-медиа баннер -->

<div id="my-rich-media">
<div id="rich-wrapper">
	<div id="rich-close" onClick="kill()">
	</div>
    <div id="rich-banner">
    	<a href="SomeHref" ><img src="img/image.jpg"></a>
    </div>
</div>
</div>
<script type="text/javascript" src="js/rich-media.js" ></script>
<!-- рич-медиа баннер -->

Контейнер с id = «my-rich-media» и есть тот самый плавающий div. Внутри него wrapper, чтобы потом красиво выровнять кнопку, которая представляет собой контейнер с id = «rich-close», задним фоном которого является изоражение крестика.

Соответствующие css стили:

#my-rich-media{ position:fixed; top:30%; height:200px; width:200px; background-color:#FFF; border:2px solid #CCC; text-align:center; left:35%; }

#my-rich-media img { border:0;} /* Специально для IE*/

#rich-wrapper { position:relative; width:100%; height:100%;}
#rich-close{ width:22px; height:22px; background-image:url(img/rich-close.png); position:absolute; top:0; left:100%; margin-left:-22px;}

И код файлика rich-media.js который меняет положение банера и отвечает за его закрытие:

var w = document.getElementById('my-rich-media').clientWidth;
document.getElementById('my-rich-media').style.left = (document.width - w) /2+'px';
function kill()
{
	document.getElementById('my-rich-media').style.display="none";
}

Для того, чтобы использовать получившийся баннер нужно подключить файл rich-media.php:

<?php include "rich-media.php"; ?>

Вот и все=) Один минус — при изменении размеров баннера придется менять в стилях размеры контейнера. Конечно, можно сделать его навороченым, добавить всяких примочек через JQuery но... Мне этого делать не нужно было=) Да и цель этого поста — рассказать основы. Дальше дело ваше — фантазии нет предела.

Исходники моего Rich-media баннера можно скачать тут.




Оцените полезность!
Не полезноПолезно (+18 баллов, 18 оценок)

4 комментария на «Rich-media баннер своими руками»

  1. Igor пишет:

    Попробуем сделать, последним временем занялся програмированием

  2. Azagtot пишет:

    Спасибо, помогло.

  3. Андрей Польшин пишет:

    Главное что ваш рецепт не глючит с другими js 

  4. Mila пишет:

    Подскажите, пожалуйста, как сделать, чтобы данный баннер, после нажатия

    на крестик больше не появлялся. А то после перезагрузки страницы он

    снова появляется. Спасибо, буду очень благодарна.

Ваш отзыв

.Все права защищены © 2017 Блог Полезного.