Su. Plugin für Bildänderung bei „onMouseOver“

Hallo Karl,
das kannst du allerdings schon ohne ein Plugin und mit ein wenig CSS erreichen:

body.home img {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

body.home img:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

Wenn du das nur für bestimmte Bilder machen möchtest, dann muss entsprechend das konkrete Bild bei der CSS-Regel angesprochen werden.

Wie immer bei CSS: An dieser Stelle möchte ich aber noch darauf hinweisen, dass wir hier bei WordPress-Fragen helfen. CSS-Probleme gehören in der Regel nicht dazu, auch wenn wir je nach Zeit mal entsprechende Tipps geben.
Eine gute Möglichkeit, sich mit CSS zu beschäftigen, findest du z. B. hier, hier oder hier. Hier noch ein Link zu einem Hilfe- und Austausch-Forum für (u. a.) CSS -> Forum.

Viele Grüße
Hans-Gerd

• Diese Antwort wurde geändert vor 11 Stunden, 55 Minuten von Hans-Gerd Gerhards. Grund: Tippfehler

Nachtrag und kurze Ergänzung:
Für ein Bild wäre die CSS-Regel dann sinngemäß wie folgt:

body.home img.wp-image-638 {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

body.home img.wp-image-638:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

Über die developer console (Aufruf mit F12) findest du das gewünschte Element. Im Beispiel img.wp-image-638.

@hage
Danke für die AW.

Heißt das bitte, ich ich muss logischerweise jedes einzelne Bild immer mit dessen ID „ansprechen“? Diese füge ich dann kommagetrennt im Klassennamern hintereinander an?

Karl

@zittau
ja, z. B. so:

body.home img.wp-image-638, img.wp-image-194 {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

body.home img.wp-image-638:hover, img.wp-image-194:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

Einfach mal testen. 😉

kann mir bitte jemand ein WP-Plugin empfehlen, welches bei Mausberührung temporär ein Schwarzweiss-Bild als ein farbiges (oder umgekehrt) anzeigt?

Ein echtes Schwarz-Weiß-Bild bunt einfärben geht nicht. Man kann zwar einen einfarbigen oder einen Layer mit Farbverlauf darüber legen, aber zum Beispiel ein Schwarz-Weiß-Bild von einer Wiese mit Apfelbäumen kann nicht so geändert werden, dass die Wiese und Blätter grün und die Äpfel rot sind. Man könnte höchstens gegen ein zweites (buntes) Bild austauschen.

Natürlich kann man ein Farbbild zuvor mit dem Filter grayscale einfügen und dann bei Mouse hover den Filter wieder deaktivieren, wie Hans-Gerd es gezeigt hat.

Heißt das bitte, ich ich muss logischerweise jedes einzelne Bild immer mit dessen ID „ansprechen“?

Standardbilder in WordPress haben in der Regel keine ID, sondern CSS-Klassen. Wenn du alle Bilder auf der Startseite in s/w anzeigen lassen willst, dann reicht es theoretisch aus, die CSS-Klasse des body-Tags dem img-Tag voranzustellen, bei der Startseite ist das normalerweise die CSS-Klasse home (praktisch könnten noch weitere Referenzen nötig sein, es kommt halt auf das Theme etc. an).

.home img:hover { 
filter: grayscale(1); 
}

Macht aus allen bunten Bildern auf der Startseite bei Mouse hover ein Schwarz-Weiß-Bild.
(Das Präfix -webkit ist übrigens nur für sehr alte Browser erforderlich, IE kann es so gar nicht, siehe dort).

Buntes Bild bei Mouse hover erzeugen, dafür vorher Filter s/w anwenden, hatte Hans-Gerd auch schon erklärt:

.home img{ 
filter: grayscale(1); 
}
.home img:hover { 
filter: grayscale(0); 
}

Filter setzt erst alle Bilder auf s/w und bei Mouse hover wird der Filter wieder entfernt/zurückgesetzt.