Fly-out-Box am rechten Browserrand

    Hallo, ich möchte gerne am rechten Browserrand eine Fly-out-Box mit simplem Bildwechsel realisieren. Ich habe folgenden Code über <Quellcode> eingegeben. Die CSS-Angaben für die Fly-out-Box werden korrekt übernommen. Der Javascript-Teil aber nicht wirklich. Der Bildwechsel funktioniert nicht. Die Links zu den Bildern habe ich natürlich angepasst.

    Für eine Antwort wäre ich dankbar.


    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Unbenanntes Dokument</title>

    <Style>

    #fly-out {

    height: 90px;

    width: 230px;

    top: 200px;

    right: 0px;

    position: absolute;

    z-index: 100;

    }

    </Style>

    <script type="text/javascript">

    <!--

    function change_img(img_name, img_src) {

    document[img_name].src = img_src;

    }

    -->

    </script>

    </head>


    <body>


    <div id="fly-out">


    <img name="image" src="Fly_out_1.png" onmouseover="change_img('image', 'Fly_out_2.png')" onmouseout="change_img('image', 'Fly_out_1.png')" />


    </div>


    </body>

    </html>

    Probier mal folgendes.


    Einstellungen > CSS:


    Widget > Quelltext

    Hallo,

    ich konnte mein Problem mit transition und transform lösen.


    <style>


    #flyout {

    height: 90px;

    width: 230px;

    top: 200px;

    right: 0px;

    position: absolute;

    z-index: 100;

    overflow: hidden;

    }

    .image2 {

    margin-left: 170px;

    transition: transform 0.7s;

    }

    .image2:hover {

    transform: translate(-170px, 0px);

    }

    </style>


    <div id="flyout">

    <img src="flyout.png"/>

    </div>


    Trotzdem Danke!