<script type="text/javascript" src="/templates/ihdnipro_home/scripts/mootools-release-1.11.js"></script> 
    <script> 
window.addEvent('domready', function() {
    var i = 0;
    Fx.Morph = Fx.Styles.extend({ 
            start: function(className){
                    var to = {};
                    $each(document.styleSheets, function(style){
                            var rules = style.rules || style.cssRules;
                            $each(rules, function(rule){
                                    if (!rule.selectorText.test('\.' + className + '$')) return;
                                    Fx.CSS.Styles.each(function(style){
                                            if (!rule.style || !rule.style[style]) return;
                                            var ruleStyle = rule.style[style];
                                            to[style] = (style.test(/color/i) && ruleStyle.test(/^rgb/)) ? ruleStyle.rgbToHex() : ruleStyle;
                                    });
                            });
                    });
                    return this.parent(to);
            }
    });
     
    Fx.CSS.Styles = ["width", "height", "left", "top", "bottom", "right", "display"];
     
    Fx.CSS.Styles.extend(Element.Styles.padding);
    Fx.CSS.Styles.extend(Element.Styles.margin);
     
    Element.Styles.border.each(function(border){
            ['Width', 'Color'].each(function(property){
                    Fx.CSS.Styles.push(border + property);
            });
    });
     
    var vkontakteMorph = new Fx.Morph('vkont_m', {wait: false});
    var callbMorph = new Fx.Morph('callb_m', {wait: false});
    var facebookMorph = new Fx.Morph('faceb_m', {wait: false});
    
    $('faceb_m').addEvent('mouseover', function(e){
            new Event(e).stop();
            facebookMorph.start('morph2');
    });
    $('faceb_m').addEvent('mouseout', function(e){
            new Event(e).stop();
            facebookMorph.start('morph1');
    });
    
    $('vkont_m').addEvent('mouseover', function(e){
            new Event(e).stop();
            vkontakteMorph.start('morph2');
    });
    $('vkont_m').addEvent('mouseout', function(e){
            new Event(e).stop();
            vkontakteMorph.start('morph1');
    });
    
    $('callb_m').addEvent('mouseover', function(e){
            new Event(e).stop();
            callbMorph.start('morph2');
    });
    $('callb_m').addEvent('mouseout', function(e){
            new Event(e).stop();
            callbMorph.start('morph1');
    });
});
    </script>

<!--  --> 
<style> 
.morph1 {
        right: -160px;
        position: relative;
        float: right;
        width: 200;
        height: 158;
	font-size: 12px;
	padding-bottom: 6px;
}
 
.morph2 {
        right: 0px;
}
.div{
    position: fixed;
    right: 0;
    top: 33%;
    width: 200px;
    height: 158px;
    overflow: hidden !important;
    z-index: 9999;
}
.div #text{
        position: relative;
        padding: 5px;
        float: right;
        width: 150px;
	color: #000;
	background-color: #E8E8E8;
}
#toggle{
    position: relative;
    float: left;
    width:30px;
}
</style> 
 
 
<div class="div"> 
<div id="callb_m" class="morph1"> 
    <div id="toggle"> 
    <img src="/templates/ihdnipro_home/images/callback_icon.png" id="toggler"> 
    </div> 
    <div id="text" style="height: 75px;"> 
	<form action="" method="POST"> 
	  <input type="text" value="Ваш телефон"><br> 
	  <input type="text" value="Ваше имя"><br> 
	  <input type="submit" value="Отправить">					
	</form> 
    </div> 
</div>    
    
<div id="faceb_m" class="morph1"> 
    <div id="toggle"> 
    <img src="/templates/ihdnipro_home/images/facebook_icon.png" id="toggler"> 
    </div> 
    <div id="text" style="height: 20px;"> 
	<a href="#">Мы в Facebook</a>  
    </div> 
</div> 
    
<div id="vkont_m" class="morph1"> 
    <div id="toggle"> 
    <img src="/templates/ihdnipro_home/images/vkontakte_icon.png" id="toggler"> 
    </div> 
    <div id="text" style="height: 20px;"> 
	<a href="#">Мы в Вконтакте</a>  
    </div> 
</div> 
</div> 
 
<!--  -->