onmouseover mit fade?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Jokerjoe

Neues Mitglied
6 Mai 2013
9
0
1
Hallo zusammen,

ich versuche gerade mit JavaScript Bild Nr. 4 zu ändern, indem man über Bild 1-3 hovert.
Das klappt auch spitze. Aber ich verzweifle gerade daran, hier einen Fade einzubauen :confused: Daran sitze ich jetzt tatsächlich schon etwas länger.

Wäre es möglich, dass mir jemand mal eben hilft? Das ist für euch profis bestimmt nur ein winziger Befehl, den ich aber ums Verrecken nicht finde :smile:

Vielen Dank im Vorfeld!



HTML:
            <button onmouseover="document.getElementById('change_image').src='imgs/test5.jpg'" onmouseout="document.getElementById('change_image').src='imgs/test4.jpg'">
            <img src="imgs/test1.jpg" id="" width="50" height="50"></button>
            
            <button onmouseover="document.getElementById('change_image').src='imgs/test6.jpg'" onmouseout="document.getElementById('change_image').src='imgs/test4.jpg'">
            <img src="imgs/test2.jpg" id="" width="50" height="50"></button>
            
            <button onmouseover="document.getElementById('change_image').src='imgs/test7.jpg'" onmouseout="document.getElementById('change_image').src='imgs/test4.jpg'">
            <img src="imgs/test3.jpg" id="" width="50" height="50"></button>
            <br><br>
            
            
            <img src="imgs/test4.jpg" id="change_image" width="150" height="50">

CSS:
button {

    background: transparent;
    border: none !important;
    font-size:0;

}
 

Jokerjoe

Neues Mitglied
6 Mai 2013
9
0
1
Toll dass du so schnell geantwortet hast! :)
Aber bei den gezeigten Beispielen müsste ich alles neu machen, oder? Ansonsten verstehe ich nicht so ganz, welcher Code wo hingehört :eek:
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.349
272
83
66
Scabwik hat schon Recht, ganz so einfach wie ich dachte, ist es nicht.
Mein erster Ansatz war dieses hier:
Code:
    <style>
        #imgwrapper {
            position: relative;
        }

        #imgwrapper #overimg {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: opacity 1s;
        }
    </style>
    <button onmouseover="mouseover('images/dia0.jpg');" onmouseout="mouseout();">
        <img src="images/dia3.jpg" id="" width="50" height="50"></button>

    <button onmouseover="mouseover('images/dia1.jpg');" onmouseout="mouseout();">
        <img src="images/dia4.jpg" id="" width="50" height="50"></button>

    <button onmouseover="mouseover('images/dia2.jpg');" onmouseout="mouseout();">
        <img src="images/dia4.jpg" id="" width="50" height="50"></button>
    <br><br>
    <div id="imgwrapper">
        <img src="images/01.png" id="baseimg" width="150" height="50">
        <img src="images/01.png" id="overimg" width="150" height="50">
    </div>


    <script>
        var voverimg = document.getElementById("overimg");
        function mouseover(im) {
            voverimg.src = im;
            voverimg.style.opacity = "1";
        }
        function mouseout() {
            voverimg.style.opacity = "";
        }
    </script>
Auf der einen Seite funktioniert das, auf der anderen Seite auch wieder nicht, denn wenn man schnell von einem Bild zum nächste fährt, bleibt das Überblenden aus. :frown:
Als nächsten Ansatz habe ich jQuery benutzt:
Code:
    <style>
        #imgwrapper {
            position: relative;
        }

        #imgwrapper #overimg {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            /* transition: opacity 1s; */
        }
    </style>
    <button>
        <img src="images/dia3.jpg" id="" width="50" height="50" onmouseover="mouseover('images/dia0.jpg');"
            onmouseout="mouseout();"></button>

    <button>
        <img src="images/dia4.jpg" id="" width="50" height="50" onmouseover="mouseover('images/dia1.jpg');"
            onmouseout="mouseout();"></button>

    <button>
        <img src="images/dia4.jpg" id="" width="50" height="50" onmouseover="mouseover('images/dia2.jpg');"
            onmouseout="mouseout();"></button>
    <br><br>
    <div id="imgwrapper">
        <img src="images/01.png" id="baseimg" width="150" height="50">
        <img src="images/01.png" id="overimg" width="150" height="50">
    </div>


    <script>
        var voverimg = $("#overimg");
        function mouseover(im) {
            if (voverimg.is(':animated')) {
                voverimg.data("preimg", im);
            } else {
                voverimg.attr("src", im).animate({ opacity: 1 }, "slow", function () {
                    voverimg.data("preimg", false);
                });
            }
        }
        function mouseout() {
            voverimg.animate({ opacity: 0 }, "slow", function () {
                if (voverimg.data("preimg")) {
                    voverimg.attr("src", voverimg.data("preimg")).animate({ opacity: 1 }, "slow", function () {
                        voverimg.data("preimg", false);
                    });
                }
            });
        }
    </script>
Funktioniert, aber ein wenig kompliziert. :frown:
Ob da jemand eine einfachere Lösung einfällt?
 
Reactions: Jokerjoe
Werbung: