multisnakes, IE

WORKS w/2!

by sanford

HTML

<!--[if IE]>
<style type="text/css">
.leftcurvewrap {margin-top: 138px;}
.snakectrwrapper {height: 272px; /* 308 - 18top -18bot */}
.leftcts,.rightcts {height: 132px;}
</style>
<![endif]-->

<div class="snakeout snake1">
    <div id="l1" class="snakewrapper snakeleftwrapper">
    <div class="leftcurvewrap">
    <div class="leftcurve curve">
        </div>
    </div>
    <div class="cts leftcts">
        </div>
</div>
<div id="c1" class="snakewrapper snakectrwrapper cts">
</div>
<div id="r1" class="snakewrapper snakerightwrapper">
    <div class="cts rightcts">
     </div>    
    <div class="rightcurvewrap">
    <div class="rightcurve curve">
        </div>
    </div>

</div>
</div>
<div class="snakeout snake2">
    <div id="l1" class="snakewrapper snakeleftwrapper">
    <div class="leftcurvewrap">
    <div class="leftcurve curve">
        </div>
    </div>
    <div class="cts leftcts">
    </div>
</div>
    <div id="c1" class="snakewrapper snakectrwrapper cts"></div>
<div id="r1" class="snakewrapper snakerightwrapper">
    <div class="cts rightcts">
     </div>    
    <div class="rightcurvewrap">
    <div class="rightcurve curve">
        </div>
    </div>

</div>
</div>

CSS

.leftcurve,.rightcurve{
    border-style: dotted;
 }
.snakeout * {
   -webkit-transition-property: border-color,outline;
   -moz-transition-property: border-color,outline;
   transition-property: border-color,outline;
    -webkit-transition-duration: 900ms;   
    -moz-transition-duration: 900ms;   
    transition-duration: 900ms;   
    border-color: #222;
}
#testimg {width:100px;}


#testimg,.cts,.curve { 
    filter:blendTrans(duration=0.9);
    ZZbackground-color:yellowgreen;
}
.snakeout + .snakeout {
    position: relative;
    left: -90px;
}
.dxtransform {
    border-color: #ffcc00 !important;
}
.snakeout:hover .cts,.snakeout:hover .curve {
    border-color: #ffcc00;
}

.leftcurve{
    border-width: 0 2px 2px 0;
    -moz-border-radius: 0 0 24px 0;
    -webkit-border-radius: 0 0 24px 0;
    border-radius: 0 0 24px 0;
    margin-top: -138px;
}
.rightcurve{
    border-width: 2px 0 0 2px;
    -moz-border-radius: 24px 0 0 0;
    -webkit-border-radius: 24px 0 0 0;
    border-radius: 24px 0 0 0;
    margin-top: -2px;
}

.leftcurvewrap, .leftcurve
,.rightcurvewrap, .rightcurve{
   ZZoutline: red dotted 1px;
}
.leftcurvewrap,.leftcurve{
        width: 24px;
}
.rightcurvewrap,.rightcurve{
        width: 24px;
 }
.leftcurve,.rightcurve {
    height: 140px;
}
.leftcurvewrap {
    height: 2px;
}
.rightcurvewrap {
    height: 2px;
}

.leftcurvewrap,.rightcurvewrap{
    ZZbackground-color: white;
    border-color: white;  
    border-style:solid;
}
.leftcurve,.rightcurve{
    background-color:  transparent;
}
/* zindexing section */
.leftcurvewrap,.rightcurvewrap
,.leftcurve,.rightcurve
,.leftcts,.rightcts
,.snakectrwrapper
{
    position: relative;   
  
} 
.leftcurvewrap{z-index:75;ZZoutline: blue solid 1px; }
.leftcurve{z-index:65;ZZoutline: navy solid 1px; }
.leftcts {z-index:55;ZZoutline: blue solid 1px; }
.snakectrwrapper {z-index:55;ZZoutline: darkred solid 1px;}
.rightcurvewrap{z-index:55;ZZoutline: darkred solid 1px; }
.rightcurve{z-index:45;ZZoutline: darkred...

JavaScript

/*@cc_on
$$('#testimg,.snakeout').addEvents({
    'mouseenter':function(e){        
            this.getElements('.cts,.curve').each(function(itm,idx){
         itm.filters[0].Apply();
         itm.addClass('dxtransform');
             }).each(function(itm,idx){
                itm.filters[0].Play();
            });
            
       
    },
    'mouseleave':function(e){
       // debugger;
            this.getElements('.cts,.curve').each(function(itm,idx){
    itm.filters[0].Apply();
    itm.removeClass('dxtransform');
    itm.filters[0].Play();
            
            });
   
    }
    }); 
@*/