Mouseover Bild 1 in Bild 2 ändern

  • Hallo zusammen,

    ich bin neu hier, habe das Forum schon einige Zeit durchsucht, finde aber für mich keine passende Antwort.
    Ich habe wenig Kenntnisse in der Computersprache bei php und css.
    Mein Problem ist:
    Ich habe 2 identische Bilder (selbst erstellte Button als jpg.)
    Eins ist grau und eins blau. Nun versuche ich schon ewig, dass sich der graue Butten beim Drauflegen des Mauszeigers in den blauen Button ändert.
    Gibt es da einen Textcode, den ich im Textblock eingeben kann?
    Ich habe das probiert, aber funktioniert nicht. Mouseover und Mouseout werden jedesmal rausgelöscht oder es zeigt nur den Text an.

    <a href="ZuverlinkendeAdresse"><img src="Bild1.jpg" onmouseover="this.src='Bild2.jpg'"onmouseout="this.src ='Bild1.jpg'"

    Ich hatte vorher mit Joomla zu tun, da war sowas integriert. Aber nun muss ich mit Wordpress arbeiten und da weiß ich nicht weiter.Vielleicht könnt ihr einem "Anfänger" erklären wie ich mein Problem lösen kann.

    Ich bedanke mich schon mal im Voraus für die Bemühungen

    LG
    Eisenbahner

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Ich persönlich würde mir ja für CSS :hover und background-image durchlesen .. Zudem würde ich für so etwas simples lieber eine wieder benutzbare Klasse anlegen. Zudem sollte man auch immer an die mobilen Nutzer denken .. Bilder als Buttons sind da schwer zu vermitteln diese sind aufgrund von Netzschwankungen/ Volumen nicht sofort sichtbar und bauen auch vllt erst langsam oder mit dem gefürchteten 'gebrochenem Bild'- Icon. Aber das ist natürlich nur meine Meinung ;)

    Gesendet von meinem ONE A2003 mit Tapatalk

  • Ich möchte mich bei Euch für die Antworten und Vorschläge bedanken. Wahrscheinlich hat es keinen Sinn, dass ich mich da weiter reinsteigere, da ich, wie schon gesagt, von CSS ganz wenig Ahnung habe. Für Euch ist das simpel, für mich spanische Dörfer. Ich kann die HP in ihren Grundelementen bedienen und dachte, das mit dem Bildwechsel wäre keine große Sache. Irrtum. Ich habe keine Ahnung welchen Code ich wie und wo reinschreiben soll. Und ob das für mich überhaupt möglich ist, da das eine Sport-HP mit mehreren Abteilungen ist und ich den Rang als Redakteur habe, weiß ich auch nicht. Ich kann wenigstens sagen, dass ich ein ganzes Wochenende darüber nachgelesen und rumprobiert habe. Also danke nochmal.

    Eisenbahn

  • Dann probier's doch einfach mit einem Plugin wie z.B. diesem

    https://de.wordpress.org/plugins/amazing-hover-effects/

    oder diesem

    https://de.wordpress.org/plugins/image-…er/screenshots/

    oder auch diesem

    https://de.wordpress.org/plugins/ultimate-hover-effects/

    etc.

    Mit denen bekommst Du vielleicht nicht ganz genau das hin, was Dir vorschwebt, aber auf jeden Fall einen Effekt, wenn die Grafiken mit dem Mauszeiger überfahren werden...

Jetzt mitmachen!

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