Всем привет. Сегодня мы делаем всплывающие 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>

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