Баннер расхлоп или также известный как разворачивающийся баннер, это такой подвид баннеров, которые изначально имеют определенный размер, а при наведении на него курсора мыши, увеличиваются в размере до определенного значения. Эти баннеры также могут быть как вертикальными так и горизонтальными.  В данной статье я покажу пример как сделать такой баннер. Прежде всего хочу отметить что расхлоп-баннер можно реализовать как минимум парой методов. Один из них – реализация в одном флеш-ролике, а второй, это использование двух flash-банеров – маленького и большого размера. О втором варианте я вам и поведую.

Как сделать баннер расхлоп? Суть этих двух flash роликов заключается в том, что они рисуется под свои размеры, один меньше другой большой, и самое главное это реакция на два события, вернее даже на три. Первое событие – rollover, для реакции на событие когда указатель курсора мыши попадает на наш объект – маленький баннер, второе – rollout, соответственно реакция происходит когда курсор покидает объект – наш большой баннер. И последнее событие, обычная реакция на клик мышки – сделать переход на наш сайт либо на скрипт который просят в тех требованиях.

И так, алгоритм работы flash баннера расхлоп.

На нашей страничке прописаны два div-а, один за другим. У обоих допустим есть фиксированная ширина, например 200px и в стилях прописан бордер как обычно в 1px толщиной либо черный либо серый. Первый маленький баннер у нас отображается, а вот второй большой пока что спрятан, а именно в стиле у него прописано display:none; Также для обращения к этим дивам им присвоены id например test1 и соответственно test2.

Теперь сами flash ролики. У первого маленького прописан такой скрипт на кнопке:

on(rollover){
getURL('javascript:show(1);');

}

У второго – большого:

on(rollout){
getURL('javascript:show(0);');

}

Здесь show – это имя функции к которой будут обращаться наши flash баннеры. Вначале при наведении на маленький ролик, сработает вызов функции show с параметром 1. Эта js-функция поменяет наши div-стили, а точнее скроет маленький div и откроет большой div. Теперь окажется что наш курсор уже находится над большим банером, и теперь либо юзер кликнет на него, либо отведет указатель, тем самым вызвав функцию show с параметром 0. В этом случае большой div снова скроется, а маленький покажет свое личико.

Вот сама функция show которая прописывается в нашем html файле с div-вами:

<script type="text/javascript">// <![CDATA[
function show(act) {
document.getElementById('test1').style.display = act ? 'none' : 'block';
document.getElementById('test2').style.display = act ? 'block' : 'none';
}
// ]]></script>

Надеюсь кому то это поможет, если будет стоять задача сделать flash баннер с расхлопом.

Пример