Недавно на одном из своих ресурсов решил испытать новую партнерку, которая в качестве промо-материалов предоставляла банеры. Вот и решил я попробовать сделать сам рич медиа баннер, чтобы увеличить 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%; }

#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 но... Мне этого делать не нужно было=) Да и цель этого поста — рассказать основы. Дальше дело ваше — фантазии нет предела.

polezniy.com