window.addEvent('domready', function() {
    var el = $('myElement');

    // MooTools is able to handle effects without the use of a wrapper,
    // so you are able to do effects with just one easy line.


    //THIRD EXAMPLE

    var anotherEl = $('anotherElement');
    var anotherEl2 = $('anotherElement2');
    var anotherEl3 = $('anotherElement3');


    // Again we are able to create a morph instance


    // Or we just use Element.morph

    

    $('opa1').addEvent('mouseover', function(e) {
        e.stop();
        // Changes the element's style to .myClass defined in the CSS
        anotherEl.morph('.shown');

    });
    $('opa1').addEvent('mouseout', function(e) {
        e.stop();
        // Changes the element's style to .myClass defined in the CSS
        anotherEl.morph('.hidden');

    });





    $('opa2').addEvent('mouseover', function(e) {
        e.stop();
        // Changes the element's style to .myClass defined in the CSS
        anotherEl2.morph('.showna');

    });
    $('opa2').addEvent('mouseout', function(e) {
        e.stop();
        // Changes the element's style to .myClass defined in the CSS
        anotherEl2.morph('.hiddena');

    });





    $('opa3').addEvent('mouseover', function(e) {
        e.stop();
        // Changes the element's style to .myClass defined in the CSS
        anotherEl3.morph('.shown');

    });
    $('opa3').addEvent('mouseout', function(e) {
        e.stop();
        // Changes the element's style to .myClass defined in the CSS
        anotherEl3.morph('.hidden');

    });
    
    
    
    





   


});