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

    Danke für die schnelle Antwort. So funktioniert es, aber der Bildwechsel soll erst bei "onklick" oder "hover" stattfinden.

    Für eine Antwort wäre ich wieder dankbar!

    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!