WordPress-Tipp: Bilder bei Mouse-Over ändern

28 Januar 2013 12 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.

Deswegen verwende ich nun den WP Visual Slideshow Builder. Das Plugin ist kostenlos, kann wesentlich mehr, ist aber auch sehr fancy …

Maus über das Bild bewegen

Weg ist der Fisch ...

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="http://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="http://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

Du kannst gerne Deinen Senf zu diesem Beitrag geben: Hier geht es zu den Kommentaren




Schreiben macht durstig! Eine kleine Erfrischung kann daher nie schaden. Wem dieser freie Artikel gefallen hat, der darf mir gerne einen frisch gezapften Hopfen-Tee ausgeben (Paypal - der Spenden-Knopf
oder bitcoin - Adresse: 1NacVNwcLLePUVv8uSafu5Ykdwh8QyDfgK). Ich freue mich über jede noch so kleine Spende. Vielen Dank und Prost!
 Alle Kommentare als Feed abonnieren

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

  1. Jörn sagt:

    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 sagt:

      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 sagt:

        Danke für Deine schnelle Antwort!

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

        Das meintest Du doch - oder?

        • jdo sagt:

          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 sagt:

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

    • jdo sagt:

      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 sagt:

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

    • jdo sagt:

      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 sagt:

    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 sagt:

    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?

Antworten