Эффекты на основе Java Script, jQuery и т.д.

Подсказки с анимацией и без

Пример подсказки без анимации Пример подсказки без анимации Пример подсказки с анимацией Пример подсказки с анимацией Пример подсказки с анимацией	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<style type="text/css"> /* стили контейнеров подсказок / #a {background: #cccccc;border: solid 1px #00ff00; text-align: center;} #b {background: #00ffff;border: solid 1px #ff00ff; text-align: center;} #c {background: url(http://skriptkpbstudio.ucoz.ru/demo_srt/podskazki/453/bg1.jpg); text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; border: 2px solid #222;} / элементы подсказок / #c img {float: left;} / стиль элементов(тегов) с подсказками */ .ttip, a.ttip {color: #fff; width: 230px;} </style> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/podskazki/453/Tooltip.js"></script>
	Здесь всё подписано, дополнительных пояснений не требуется.
	В сам тег <BODY> вставляем атрибут
onload="init()"
Запускаем функцию init() после полной загрузки странички
Внутри тега <BODY> - </BODY> там где у Вас будут элементы(теги) с подсказкой.
<!-- элемнты(теги) с подсказками --> <span class="ttip" onmouseover=if(t1)t1.Show(event,l1) onmouseout=if(t1)t1.Hide(event)>Пример подсказки без анимации</span><br> <a href="http://kpbshablon.ucoz.ru" class="ttip" target="_blank" onmouseover=if(t1)t1.Show(event,l5) onmouseout=if(t1)t1.Hide(event)>Пример подсказки без анимации</a><br> <p class="ttip" onmouseover=if(t2)t2.Show(event,l2) onmouseout=if(t2)t2.Hide(event)>Пример подсказки с анимацией</p> <div class="ttip" onmouseover=if(t3)t3.Show(event,l3) onmouseout=if(t3)t3.Hide(event)>Пример подсказки с анимацией</div><br> <span class="ttip" onmouseover=if(t3)t3.Show(event,l4) onmouseout=if(t3)t3.Hide(event)>Пример подсказки с анимацией</span> <!-- варианты контейнеров подсказок --> <div id="a" style="width: 150px; height: 49px;"></div> <div id="b" style="width: 150px; height: 49px;"></div> <div id="c" style="width: 155px; height: 62px;"></div> <script> var t1=null; var t2=null; var t3=null; // задаём подсказки var l1="Подсказка без анимации к тегу <b>span</b>"; var l2="Подсказка c анимацией к тегу <b>p</b>"; var l3="Подсказка c анимацией к тегу <b>div</b>"; var l4="<img src='http://skriptkpbstudio.ucoz.ru/demo_srt/podskazki/453/2.png'>Подсказка c анимацией к тегу <b>span</b>"; var l5="Подсказка без анимации к тегу <b>a</b>"; function init() { // программируем к какой подсказке какой контейнер и задаём режим ("идентификатор контейнера", режим: false - подсказка появляется без анимации true - с анимацией, внутренний параметр) t1 = new ToolTip("a",false); t2 = new ToolTip("b",true,40); t3 = new ToolTip("c",true,40); } </script>
Для примера я показал как ставить подсказку к разным тегам. Так-же использовал несколько стилей контейнеров для подсказок. Вы можете использовать один стиль или тоже несколько. Показал варианты появления подсказки с и без анимации. Элементы с подсказками можно группировать, как в примере, а можно использовать хаотично, в нужных Вам места странички. Колличество элементов с подсказками на страничке на Ваше усмотрение.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.