window.addEvent("domready", function() {

/* IMAGE 1 */
$('pixel1').addEvent('mouseover', function(e){
var myEffects = new Fx.Styles('slide1', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'height': [300, 0]
});
var myEffects = new Fx.Styles('barre1', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'width': [177, 0],
    'margin-left': [0, -200]
});
var myEffects = new Fx.Styles('titre1', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'margin-left': [0, 400]
});
});

$('pixel1').addEvent('mouseleave', function(e){
var myEffects = new Fx.Styles('slide1', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'height': [0, 300]
});
var myEffects = new Fx.Styles('barre1', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'width': [0, 177],
    'margin-left': [-200, 0]
});
var myEffects = new Fx.Styles('titre1', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'margin-left': [400, 0]
});
});


/* IMAGE 2 */
$('pixel2').addEvent('mouseover', function(e){
var myEffects = new Fx.Styles('slide2', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'height': [300, 0]
});
var myEffects = new Fx.Styles('barre2', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'width': [177, 0],
    'margin-left': [0, -200]
});
var myEffects = new Fx.Styles('titre2', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'margin-left': [0, 400]
});
});

$('pixel2').addEvent('mouseleave', function(e){
var myEffects = new Fx.Styles('slide2', {duration: 300, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'height': [0, 300]
});
var myEffects = new Fx.Styles('barre2', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'width': [0, 177],
    'margin-left': [-200, 0]
});
var myEffects = new Fx.Styles('titre2', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'margin-left': [400, 0]
});
});

/* IMAGE 3 */
$('pixel3').addEvent('mouseover', function(e){
var myEffects = new Fx.Styles('slide3', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'height': [300, 0]
});
var myEffects = new Fx.Styles('barre3', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'width': [177, 0],
    'margin-left': [0, -200]
});
var myEffects = new Fx.Styles('titre3', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'margin-left': [0, 400]
});
});

$('pixel3').addEvent('mouseleave', function(e){
var myEffects = new Fx.Styles('slide3', {duration: 300, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'height': [0, 300]
});
var myEffects = new Fx.Styles('barre3', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'width': [0, 177],
    'margin-left': [-200, 0]
});
var myEffects = new Fx.Styles('titre3', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'margin-left': [400, 0]
});
});

/* IMAGE 4 */
$('pixel4').addEvent('mouseover', function(e){
var myEffects = new Fx.Styles('slide4', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'height': [300, 0]
});
var myEffects = new Fx.Styles('barre4', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'width': [177, 0],
    'margin-left': [0, -200]
});
var myEffects = new Fx.Styles('titre4', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'margin-left': [0, 400]
});
});

$('pixel4').addEvent('mouseleave', function(e){
var myEffects = new Fx.Styles('slide4', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'height': [0, 300]
});
var myEffects = new Fx.Styles('barre4', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'width': [0, 177],
    'margin-left': [-200, 0]
});
var myEffects = new Fx.Styles('titre4', {duration: 200, transition: Fx.Transitions.Quad.easeOut});
myEffects.start({
    'margin-left': [400, 0]
});
});


});