WordPress-Tipp: Bilder bei Mouse-Over ändern

16 Kommentare Autor: Jürgen (jdo)

Wordpress 3 Logo 150x150Update: Aus irgendwelchen Gründen funktioniert das bei WordPress 4 nicht mehr … möglicherweise ist auch ein Plugin schuld.

Eine Alternative wäre der WP Visual Slideshow Builder. Das Plugin ist kostenlos, kann wesentlich mehr, ist aber auch sehr fancy …

Update Ende …

Ich hatte vor kurzer Zeit einen Beitrag über das GIMP-Plugin Reynthesizer geschrieben, mit dem man wie auf magische Weise Objekte aus Bildern verschwinden lassen kann. Bei der Darstellung der Bilder dachte ich mir dann, dass es eigentlich schöner oder besser zu sehen wäre, wenn sich Original und bearbeitetes Foto durch das Darüberfahren mit der Maus ändern würden.

Kann sein, dass es hierfür ein Plugin gibt – ich habe nicht nachgesehen, weil es auch so ganz einfach realisieren lässt. Im Prinzip ist es ein bisschen CSS und dann die Bilder im Text-Modus von WordPress anpassen. Der notwendige CSS-Code sieht so aus:

img.nohover {
border:0
}
img.hover {
border:0;
display:none
}
a:hover img.hover {
display:inline
}
a:hover img.nohover {
display:none
}

Nun kann ich in meinem Fall mittels <a><img class="hover" alt="Manta mit Taucher" src="https://www.bitblokes.de/wp-content/uploads/2013/01/manta-mit-taucher-570x380.jpg" width="570" height="380" /><img class="nohover" alt="Manta ohne Taucher" src="https://www.bitblokes.de/wp-content/uploads/2013/01/manta-ohne-taucher-570x380.jpg" width="570" height="380" /></a> die beiden Bilder einfügen und das Ergebnis siehst Du unten. Da ist keine Magie dabei, allerdings muss man bei WordPress aufpassen. Die beiden von den <img>-Tags eingeschlossenen Bilder müssen in einer Zeile stehen. WordPress fügt sonst einen Absatz ein und dann klappt die Geschichte nicht. Auf jeden Fall kannst Du so mit wenig Aufwand eine Nachher-Vorher-Situation visualisieren.

Manta mit TaucherManta ohne Taucher

Clownfisch vor Heal SelectionClownfisch nach Heal Selection




 Alle Kommentare als Feed abonnieren

16 Kommentare zu “WordPress-Tipp: Bilder bei Mouse-Over ändern”

  1. Jörn says:

    Hi,

    den Tipp habe ich gesucht, aber ich bekomme den Zeilenumbruch - sofern WP einen einfügt - nicht weg.

    Ich habe den Code (mit den beiden Mantas) kopiert und Deine Bilder durch meine ersetzt. Meine beiden Bilder werden mit untereinander (statt übereinander gelegt) angezeigt. Also genau das Phänomen, was Du beschreibst.

    Kannst Du mir eine Tippen geben!?

    • jdo says:

      Ich gehe davon aus, dass Du das im Text-Modus und nicht im visuellen machst? Füg mal die Bilder im Textmodus ein und versichere Dich, dass es wirklich nur eine Zeile ist. Dann speichere im Text-Modus ab, damit WordPress gar keinen Zeilenumbruch machen kann. Das könnte helfen.

      • Jörn says:

        Danke für Deine schnelle Antwort!

        Ich habe folgenden Code in der HTML-Ansicht von WP reinkopiert:

        Das meintest Du doch - oder?

        • jdo says:

          Ja, das meinte ich - auch wenn der Code hier verschwunden ist. Schau mal, ob zwischen den HTML-Tags irgendwo ein Leerzeichen ist - das könnte den Zeilenumbruch auch auslösen.

  2. Jörn says:

    Grmpf - ich find nix. Visuell sind die Bilder nebeneinander, sehe ich mir die Seite in der Vorschau an, sind sie nebeneinander - inkl. Leerzeile.

    • jdo says:

      Das sollte ja auch außerhalb von WordPress funktionieren. Versuch mal, nur den Code und das CSS in einer einfachen HTML-Datei - das geht ja auch lokal. Wenn das geht, dann spuckt Dir WordPress in die Suppe. Funktioniert das nicht, ist der Fehler woanders.

  3. Frief says:

    schöne idee scheint nur nicht zu funktionieren .. oder sind die Bilder untereinander normal ?? ^^

    • jdo says:

      Hmmm ... das hat aber mal funktioniert - warum es nun nicht mehr geht, muss irgendwie an den neueren WordPress-Versionen liegen. Muss ich mir noch mal ansehen - in einer separaten HTML-Datei klappt das.

  4. Signon says:

    Das funktioniert immernoch ;D
    Man muss nur wirklich penibel darauf achten es in die selbe zeile zu schreiben! Tipp dafür: kopiert es euch in den editor(windows) und zieht es da wirklich in eine Zeile!
    Danke dafür!

  5. Andi says:

    Das ist ne klasse Anleitung, die richtig gut funktioniert! Hat jemand eine Idee, wie ich bild 2 dann mit einem Link hinterlege, sodass das zweite Bild verlinkt ist?

  6. Pia says:

    Ich habe das aller gleiche Problem, dass die Bilder direkt nebeneinander angezeigt werden. Habe den Rat mit 'im Editor einfügen....' befolgt aber das ändert nichts.
    Allerdings habe ich um 3 Bilder nebeneinander anzuzeigen schon diesen Code eingefügt :

    Kann es sein, dass es deswegen dann nicht mehr funktioniert?

  7. Wobby says:

    Hallo zusammen 🙂
    Falls das noch aktuell ist ?!
    Am Besten in WordPress als HTML :

    img.nohover {
    border:0
    }
    img.hover {
    border:0;
    display:none
    }
    a:hover img.hover {
    display:inline
    }
    a:hover img.nohover {
    display:none
    }


    -------------------------------------------------------------------------------

    hier in meinem Beispiel mit Link zu einer anderen Seite ...

    Das klappt !
    Wobby

  8. Wobby says:

    Mist hat die Hälfte abgeschnitten die Kommentarfunktion hier 🙁

    img.nohover {
    border:0
    }
    img.hover {
    border:0;
    display:none
    }
    a:hover img.hover {
    display:inline
    }
    a:hover img.nohover {
    display:none
    }

  9. Wobby says:

    also als HTML mit und den CSS Code einschliessen und darunter dann die Bilder so wie hier beschrieben das klappt