mouseover effekt wie?

  • hey,
    ich habe da ein kleines Problem, ich wollte für meine Internetseite die Bilder als Links verwenden und die Farben der Bilder ändern, wenn ich darüber fahre, aber irgendwas muss ich falsch gemacht haben... kann mir jemand helfen?


    so sieht mein code aus:



    <head>
    <script language="javascript">
    function Mouseover(Infografiken) {
    MyImage.src = "EndBallons_InfoGrafik;preview.jpg";
    }

    function MouseOut(Infografiken) {
    MyImage.src = "EndBallons_InfoGrafik;preview_sw.jpg";
    }
    </script>




    <a href="serie-infografik1.html">
    <img src="ballons.jpg" alt="Infografiken" onmouseover="EndBallons_InfoGrafik;preview.jpg" onmouseout="EndBallons_InfoGrafik;preview_sw.jpg"></a>



    Vielen Dank!

  • Moin,


    Du schreibst bei onmouseover="" einfach nur Text ins leere.

    HTML
    <img src="ballons.jpg" alt="Infografiken" 
        onmouseover="EndBallons_InfoGrafik;preview.jpg" <!-- hier -->
        onmouseout="EndBallons_InfoGrafik;preview_sw.jpg" <!-- und hier -->
    >


    In den Anführungszeichen "" bei onmouseover (und allen anderen js Methoden)
    wird Javascript erwartet.


    Also rufst Du dort drin zB eine Funktion auf:


    oder aber auch ohne Funktion:

    HTML
    <a href="serie-infografik1.html">
        <img src="ballons.jpg" alt="Infografiken" 
            onmouseover="this.src = 'EndBallons_InfoGrafik;preview.jpg'"
            onmouseout="this.src = 'EndBallons_InfoGrafik;preview_sw.jpg'"
        >
    </a>


    Oder aber auch ohne Javascript - dann nämlich mit CSS.


    Und, dass EndBallons_InfoGrafik;preview_sw.jpg kein gültiger Dateiname ist weißt Du, oder? :)

  • Jahm einiges falsch gemacht cottton wird dir bestimmt helfen :p
    CSS Filter würden auch reichen! :)
    http://codepen.io/wolf-w/pen/zrVzbr?editors=1100
    Mouseover Effekte via JS sind ausgelutscht und sehen auf grund der fehlenden Möglichkeit einer Transition meistens nicht so gut aus (vorallem wenn das bild noch laden muss oder solch schöne Dinge :P )


    Filterfunktionen siehe:
    https://developer.mozilla.org/de/docs/Web/CSS/filter
    https://css-tricks.com/almanac/properties/f/filter/

  • hey, vielen Dank für die schnellen Antworten. Ich bin noch ein ziemlicher html-Otto und muss ein Portfolio für die Uni machen, bin einfach nur froh wenn überhaupt irgendwas klappt, damit ich meinen Kurs bestehe! Aber die Antworten haben mir auf jeden Fall schonmal geholfen! Dankeschön :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!