magikarrow

by sanford

HTML

<div class="swap left">
<img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowl"><img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowr">
</div>
<div style="height:400px;vertical-align:middle;display:table-cell;">
<div class="swap top">
<img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowd"><img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowu">
</div>
</div>

CSS

.swap {
    -webkit-transition-property: width,height;
    -webkit-transition-duration: 600ms;    
}
.swap IMG {
   -webkit-transition-property: width,height,background-color;
    -webkit-transition-duration: 700ms;
}


.swap.left {
    height: 88px;
    width: 30px;
    margin: 0 auto 0 auto;
    ZZborder: 1px dotted gold;
}
.swap IMG {
    ZZborder: 1px dotted fuchsia;
    background-color: #a2a2a2;
     
}
.swap.left IMG {
    height: 55px;
    width: 15px;
    background-image: url(http://127.0.0.1/otherpeople/jsfiddles/2GGaL/swap-left.png);
}
.swap.left.firehover {
    width: 110px;
}
.swap.left.firehover IMG {
    width: 55px;
    background-color: #555;
}
.swap.left IMG.arrowl {
    background-position: top left;
    float: left;
}
.swap.left IMG.arrowr {
    background-position: top right ;
    float: right;
    clear:both;
    top: -30px;
    position: relative;
}

.swap.top {
    width: 88px;
    height:30px;
}
.swap.top IMG {
    height: 15px;
    width: 55px;
    background-image: url(http://127.0.0.1/otherpeople/jsfiddles/2GGaL/swap-top.png);
    ZZborder:1px solid fuchsia;
}
.swap.top IMG.arrowd {
    background-position:top left;
    float:left;
}
.swap.top IMG.arrowu {
    background-position:bottom left;
    ZZclear:both;
    float:right;
    position: relative;
    ZZtop: -7px;
    left: -6px;
}
.swap.top.firehover {
    height: 110px;
}
.swap.top.firehover IMG {
    height: 55px;
    background-color: #555;
}

JavaScript

if (!Browser.Engine.webkit) {
    
    $$('.swap').set('morph',{duration:600});
    $$('.swap IMG').set('morph',{duration:700});

$$('.swap.left').addEvent('mouseenter',function(){
    this.morph({width:110});
    this.getElements('IMG').each(function(itm,idx){
        itm.morph({
            width:55
            ,backgroundColor:'#555555'
        });
    });
});

$$('.swap.left').addEvent('mouseleave',function(){
    this.morph({width:30});
    this.getElements('IMG').each(function(itm,idx){
        itm.morph({
            width:15
            ,backgroundColor:'#A2A2A2'
        });
    });
});
$$('.swap.top').addEvent('mouseenter',function(){
    this.morph({height:110});
    this.getElements('IMG').each(function(itm,idx){
        itm.morph({
            height:55
            ,backgroundColor:'#555555'
        });
    });
});

$$('.swap.top').addEvent('mouseleave',function(){
    this.morph({height:30});
    this.getElements('IMG').each(function(itm,idx){
        itm.morph({
            height:15
            ,backgroundColor:'#A2A2A2'
        });
    });
});

} else {
    $$('.swap').addEvents({
        'mouseover':function(){this.addClass('firehover');}
        ,'mouseout':function(){this.removeClass('firehover');}
    });
}