Як зробити спливаючу сторінку

Як зробити спливаючу сторінку


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


 

Інструкція

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

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

<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display='block'"><span style="text - decoration: underline;">Натиснути тут!</span></a>

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

<div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background - color: rgb(255,255,225); text - align: justify; font - size: 12px; width: 135px;'> Повідомлення або текст в спливаючому вікні</div>

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

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

5. Проте при цьому наборі ви отримаєте постійно відкрите вікно. Так що, якщо вам треба, щоб спливаюче вікно можна було закрити, додайте посилання, яке відповідатиме за цю дію, перед тегом </div>:

<br /><div style='text - align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font - size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text - decoration: underline;">закрити</span></a></div>

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

<a onmouseover="document.getElementById('PopUp').style.display = 'block' " onmouseout="document.getElementById('PopUp').style.display = 'none' " onfocus='this.blur();'><span style="text - decoration: underline;">наведіть мишку сюди!</span></a>

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