Як зробити банер расхлоп і прописати його?

Банер расхлоп або також відомий як розгортається банер, це такий підвид банерів, які спочатку мають певний розмір, а при наведенні на нього курсора миші, збільшуються в розмірі до певного значення. Ці банери також можуть бути як вертикальними так і горизонтальними. У даній статті я покажу приклад як зробити такий банер. Перш за все хочу відзначити що расхлоп-банер можна реалізувати як мінімум парою методів. Один з них - реалізація в одному флеш-ролику, а другий, це використання двох 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 банер з расхлопом.

приклад