<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>
<!-- -->