ЯК зробити спливаючу сторінку :: Веб-програмування

При створенні сайтів дуже часто використовуються спливаючі вікна в якості меню, рекламних текстів і т.п. До того ж компактний вид дозволяє економити місце на сторінці. Все, що потрібно - це написати правильний код.

Інструкція

Створення спливаючих сторінок може проводитися на основі javascript. Тим не менш, є простіший варіант - використання мови розмітки гіпертексту HTML і мови таблиць CSS. Зручність полягає в тому, що створені таким чином вікна будуть підтримуватися більшістю браузерів незалежно від того, чи підтримують вони javascript.

Подібний код розміщується у двох термінах, в першому рядку міститься посилання, яка відповідає за відкриття віконця, другий рядок - по суті, і є спливаючим вікном, атрибут onmouseover говорить про те, що буде відображатися стандартний при наведенні на рядок посилання тип курсора, onclick вказує на те, що після клацання приховане вікно стане видимим:

Натиснути тут!

Вам буде потрібно вказати розміри вікна, колір і розмір тексту, фон і рамки. Всі ці параметри ви можете вказати в атрибуті style. Цветa вказується по кодової табліцe rgb. У стандартному інструменті Paint у вікні «Зміна квітів», в можете знайти код потрібного відтінку, де R - червоний, G - зелений, В - синій (блакитний). Так чорний колір має код rgb (0,0,0), білий rgb (255,255,255), сірий rgb (126,126,126).

Селектор display з вказаним значенням none робить ваше вікно невидимим.

Тепер вам потрібно розмістити дві ці рядки між тегами вашої сторінки і. Після цього спливаюче вікно готове до роботи.

Однак при даному наборі ви отримаєте постійно відкрите вікно. Так що, якщо вам потрібно, щоб спливаюче вікно можна було закрити, додайте посилання, яка буде відповідати за це дія, перед тегом

закрити

Ймовірно, ви захочете зробити вікно, спливаюче не по клацанню, як описано вище, а при наведенні курсора. Тоді перший рядок повинна бути записана так:

наведіть мишку сюди!

Таким чином, HTML-код спливаючого вікна ви отримали, і знайомі зі структурою його складання. Все що залишилося - оформити зовнішній вигляд і вміст, що, природно, буде залежати від ваших умінь, мети і фантазії. Але треба пам'ятати, що це найпростіший варіант створення спливаючого вікна. Якщо ви володієте достатнім досвідом програмування в javascript (MooTools, jQuery, Prototype та ін.), Ви можете створити більш красиву і цікаву сторінку.