JS - Балони с информация
Ето това представляват балоните с информация DEMO

Какво трябва да направим за да имате балони на вашата страница
Трябва да си сложите следния JavaScript
Слагате го в директорията ви( където е HTML файла ви) и в самия HTML добавяте:
<script type="text/javascript" src="overlib.js"></script>




Преди да ви обясня как работи нека ви кажа някои неща какво означават onmouseover - когато мишката е над обекта, onmouseout - когато мишката вече не е над обекта, onclick - при кликане върху обекта.

Как да си направим балоните ?
започвам подред както в демото

Обикновеният балон: при него кадето ви е линк-а добавяте onmouseover="return overlib('обикновен балон');" onmouseout="return nd();" трябва да се получи следния код
<a href="#" onmouseover="return overlib('Обикновен балон!');" onmouseout="return nd();">обикновен балон</a>



Със заглавие: отново имаме същия код но този пъд добавяме и CAPTION а след каптион в кавички добавяме и самия текст на заглавието кода става ето така
onmouseover="return overlib('... тук е текста!', CAPTION, 'Тук е за заглавието...');" незабравяите да сложите и отново onmouseout="return nd(); в противен случаи балона няма да се скрие. тук кода става така

<a href="#" onmouseover="return overlib('... тук е текста!', CAPTION, 'Тук е за заглавието...');" onmouseout="return nd();">Балон със заглавие</a>


Балон залепен за мишката:тук е малко по сложно имаме onmouseover и onClick когато посочим текста се появява надпис ( пример : onmouseover="return overlib('Кликни!');" ) а когато го натиснем се появява другнадпис които е залепен за самата мишка onclick="return overlib('това се залепя за мишката!', STICKY, CAPTION, 'заглавие');", първо отново пишем текста, след което STICKY което означава че текста ще е залепен за мишката, можем да сложим и заглавие CAMPTION , и 'самото заглавие'.Целия код изглежда така
<a href="#" onmouseover="return overlib('Кликни!');" onclick="return overlib('това се залепя за мишката!', STICKY, CAPTION, 'заглавие');" onmouseout="return nd();">кликнете</a>



Балон другата страна на мишката(Ляво): това е доста лесно, просто трябва да добавим LEFT към функцията при onmouseover и кога става
<a href="#" onmouseover="return overlib('а това от другата страна!', LEFT);" onmouseout="return nd();">от лявата страна на мишката</a>



Балон на определено разтояние: тук ще използваме SNAPX и SNAPY който всъщност определят разтоянието между мишката и балона съответно по X и Y кординатата, като след SNAPX се слага запетаика и число което определя разтоянието в пиксели (това важи и за SNAPY) и става така оnmouseover="return overlib('Това е на разтояние 20рх Х 20рх.', SNAPX, 20, SNAPY, 20)" виждата каква трябва да е последователноста а етого и целия код
<a href="#" onmouseover="return overlib('Това е на разтояние 20рх Х 20рх.', SNAPX, 20, SNAPY, 20)" onmouseout="return nd();">



Балон на фиксирана позиция: в този последен вариант ще използваме FIXX и FIXY като след тях добавяме числа ето по този начин FIXX, 80, FIXY, 150 това означава че нашия балон ще се появи на 80 пиксела в дясно от от левия РЪБ на монитора и 150пиклела надолу от Горния РЪБ на монитора кода тук изглежда така
<a href="#" onmouseover="return overlib('Това е на фиксиране позиция.', FIXX, 80, FIXY, 150)" onmouseout="return nd();">или на фиксирана позиция.</a>


УРОКА Е ПОДГОТВЕН СПЕЦИАЛНО ЗА WEB-TOURIST.NET





/ Трябва да сте регистриран за да напишете коментар /
От: Illusion
21:52 19-03-2010
Урока не е полезен, защото файловете и демото не са активни вече. Предлагам да бъде изтрит или обновен.
От: tanchev
22:46 03-07-2010
aide be ili daite faila ili mahnete urok ... basi .. tapotiqta toq sait zamrq mn
От: M1tq
11:37 30-07-2010
а как да го направя вместо текст.. да сепоказва видео ??
От: Fakeheal
20:48 31-07-2010
Аз предлагам същото като Illusion xD
От: Fakeheal
20:49 31-07-2010
P.S.


http://sourceforge.net/projects/overlib/files/overlib/overlib420/overlib420.zip/download

Ето ви линк за сваляне ;D
1