Як зробити спливаючу сторінку
При створенні сайтів дуже часто використовуються спливаючі вікна в якості меню, рекламних текстів і т.п. До того ж компактний вид дозволяє економити місце на сторінці. Все, що потрібно - це написати правильний код.
1
Створення спливаючих сторінок може проводитися на основі javascript. Проте, є більш простий варіант - використання мови розмітки гіпертексту HTML і мови таблиць CSS. Зручність полягає в тому, що створені таким чином вікна будуть підтримуватися більшістю браузерів незалежно від того, чи підтримують вони javascript.
2
Подібний код розміщується в два терміни, в першому рядку міститься посилання, яка відповідає за відкриття віконця, другий рядок - по суті, і є спливаючих вікном, атрибут onmouseover говорить про те, що буде відображатися стандартний при наведенні на рядок посилання тип курсора, onclick вказує на те, що після клацання приховане вікно стане видимим:
3
Вам буде потрібно вказати розміри вікна, колір і розмір тексту, фон і рамки. Всі ці параметри ви можете вказати в атрибуті style. Цветa вказується по кодової табліцe rgb. У стандартному інструменті Paint в вікні «Зміна кольорів», в можете знайти код потрібного відтінку, де R - червоний, G - зелений, В - синій (блакитний). Так чорний колір має код rgb (0,0,0), білий rgb (255,255,255), сірий rgb (126,126,126).
Селектор display з вказаним значенням none робить ваше вікно невидимим.
4
Тепер вам потрібно розмістити дві ці рядки між тегами вашої сторінки і . Після цього спливаюче вікно готове до роботи.
5
Однак при цьому наборі ви отримаєте постійно відкрите вікно. Так що, якщо вам потрібно, щоб спливаюче вікно можна було закрити, додайте посилання, яка буде відповідати за цю дію, перед тегом
:6
Ймовірно, ви захочете зробити вікно, спливаюче не по клацанню, як описано вище, а при наведенні курсору. Тоді перший рядок повинна бути записана так:
7
Таким чином, HTML-код спливаючого вікна ви отримали, і знайомі зі структурою його складання. Все що залишилося - оформити зовнішній вигляд і вміст, що, природно, буде залежати від ваших умінь, мети і фантазії. Але треба пам`ятати, що це найпростіший варіант створення спливаючого вікна. Якщо ви володієте достатнім досвідом програмування в javascript (MooTools, jQuery, Prototype та ін.), Ви можете створити більш красиву і цікаву сторінку.
">Статті за темою "Як зробити спливаючу сторінку"
Оцініть, будь ласка статтю