Назад
Создание прибыльного бизнеспроекта на базе сайта

SEO + ASP.NET 4.0 + БИЗНЕСМОДЕЛЬ = ПРИБЫЛЬНЫЙ САЙТ

Инструмент быстрого построения прибыльного онлайн бизнеса своими силами без капиталовложений за 4 месяца все подробности на SEO + ASP.NET 4.0.

Подписка на рассылку

МАГИЯ C#!

Создание вебсайта с формой автоматического приема онлайн платежей по WebMoney!
Ваше имя
Ваш e-mail
Уроки по ASP.NET c# ADO.NET
     

18 видеоуроков
более 5 часов
по созданию сайта,
выполняющего
продажи ваших продуктов (физических/электронных) на полном автомате с личным оповещением на e-mail, а также ...
DVD-курс по C#, .NET

3 часть. Введение в ASP.NET. WebServices Профессиональная подготовка разработчика по языку C# на платформе .NET

asp.net webservices dvd c# gridview Гудок курс Более 65 подробных видео уроков по теоретическим основам технологии сайтостроения ASP.NET и процессу создания и использованию вебсервисов.

DVD-курс по C#, .NET

2А часть. XML/TXT в аспекте ADO.NET Профессиональная подготовка разработчика по языку C# на платформе .NET

xml txt dvd c# ADO ADO.NET Гудок курс 70 подробных видео уроков по работе с форматами xml, txt, по работе с файлами и директориями. Разработка высокоорганизованных свойств для значительного сокращения объема исходного кода и облегчения дальнейшей модификации и многое-многое другое...

DVD-курс по C#, .NET

1 часть. Windows Forms Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок

185 подробнейших уроков (70 часов) лекций в формате видеоуроков по теории языка c# и платформы .NET. Практическое закрепление теоретического материала на примере создания Windows Forms - приложения видеоигры "Tanks"

DVD-курс по C#, .NET

2 часть. ADO.NET/SQL Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок ADO.NET sql

165 подробных видео уроков по созданию приложений распределенных баз данных на примере разработки проектов с использований технологий ADO.NET (Connected model, Disconnected model, Typed DataSet, ...)

Бодибилдинг
Программы тренировок для занятий штангой, гантелями; описание тренажеров

Я записываю курсы!
  Курс валют

НБУ курс евро






Всплывающая графическая подсказка на MooTools



Всем привет. Сегодня мы делаем всплывающие Mootools подсказки. Для этого нам потребуется несколько иконок, графические подсказки, и сама библиотека Mootools. Вот demo, а вот ссылка на ресурсы для урока.

Начнём. Создадим .html файл и подключим Mootools.

<!--Подключаем библиотеку Mootools-->
<script src="mootools.js" type="text/javascript"></script>

Теперь создадим html разметку. Это будет выглядеть так:

<div id="siteWrap">
<!--Блок с подсказками. -->
<div id="bubbleWrap" style="visibility: hidden;">
<div class="bubble" id="buble_psd">
<img src="images/chat_256.png"/></div>
<div class="bubble" id="buble_center">
<img src="images/chat_256.png"/></div>
<div class="bubble" id="buble_audio">
<img src="images/chat_256.png"/></div>
</div>
<!--Блок с иконками.-->
<div id="pageWrap">
<div class="page" id="psdPage">
<a href="#">
<img src="images/page_twiter.png" /></a></div>
<div class="page" id="netPage">
<a href="#"><img
src="images/page_tec.png" /></a></div>
<div class="page" id="audioPage">
<a href="#"><img
src="images/page_net.png" /></a></div>
</div>
</div>

Теперь нам не помешало бы поработать с CSS.

<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
background: #1a1613 url(images/bg_tutBody.gif) repeat-x;
}
img
{
border: 0;
}
#siteWrap
{
margin: 287px auto 0 auto;
width: 642px;
height: 345px;
position: relative;
background: transparent url(images/bg_pageWrap.jpg) 
no-repeat top left;

}
#pageWrap
{
position: absolute;
z-index: 5;
top: 138px;
left: 134px;<
}
#psdPage
{
margin-left:-5px;
margin-right: 40px;
float: left;
cursor: pointer;
}
#netPage
{
margin-right: 40px;
float: left;
cursor: pointer;
}
#audioPage
{
float: left;
cursor: pointer;
}
#bubbleWrap
{
position: absolute;
z-index: 10;
left: 158px;
top: 60px;
}
.bubble
{
position: absolute;
}
#buble_psd
{
margin-left:-20px;
}
#buble_audio
{
margin-left:265px;
}
#buble_center {
margin-left:120px;
}
.clear {
clear: both;
}
</style>

Ну и наконец давайте заставим двигаться нашу подсказку так как мы и задумывали.

<script type="text/javascript" charset="utf-8">\
window.addEvent('domready', function() {

//Создаём переменные (в этом случае два множества)
// - представление наших подсказок
на странице.
var myPages = $$('.page');
var myBubbles = $$('.bubble');

//Ставим подсказки на opacity к нулю, 
//таким образом они скрыты первоначально
myBubbles.setStyle('opacity', 0);
$('bubbleWrap').setStyle('visibility','visible')

//Добавляем наши события к иконкам

myPages.each(function(el, i) {
el.set('morph', {link : 'cancel'});

//Двигаем подсказку вверх на -30px и 
//постепенно делаем видимой opacity = 1
el.addEvents({
'mouseenter': function() {
myBubbles[i].morph({
'opacity' : 1,
'margin-top' : '-30px'
});
},
// Возвращаем всё на места. Как было изначально.
'mouseleave' : function() { 
myBubbles[i].morph({
'opacity' : 0,
'margin-top' : 0
});
}
});
});
});

</script>

Вот и всё! Удачи.



Больше информации читайте по теме:



Оценить статью:

Оценивая статью, Вы подсказываете нам насколько данная информация стала полезной именно для Вас. Мы ожидаем, прежде всего, оценку доступности материала для понимания и простоты его изложения. Дополнительные комментари, вопросы, дополнения и замечания Вы можете указать на странице От Вас

Частичное, или полное копирование материала данной статьи возможно лишь при размещении ссылки на данную страницу.


            
        




Имя:  


Текст комментариев (не больше 600 знаков):  
введите не более 600 знаков



Введите символы с картинки:
Капча имеет "срок годности". Поэтому, если необходимо обновите страницу.



Черный список покупателей
c# курс Гудок   курс по ASP.NET Гудок   курс по ADO.NET Гудок   курс по XML txt Гудок   курс по рефлексии и многопоточности Гудок