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

  • Gelöst Karl

    (@zittau)


    vor 1 Jahr, 8 Monaten

    Hallo,

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

    Dieser Effekt sollte steuerbar nur für eine einzige Seite (die Startseite) sein und nicht automatisch für alle Bilderlinks.

    Da ich nicht weiß, mit welchen Suchbegriffen ich im Pluginverzeichnis suchen müsste, frage ich daher hier an.

    Herzlichen Dank im voraus,
    Karl

    • Dieses Thema wurde geändert vor 1 Jahr, 8 Monaten von Karl.
    • Dieses Thema wurde geändert vor 1 Jahr, 8 Monaten von Karl.
    • Dieses Thema wurde geändert vor 1 Jahr, 8 Monaten von Karl.
Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Jahr, 8 Monaten

    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 1 Jahr, 8 Monaten von Hans-Gerd Gerhards. Grund: Tippfehler
    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Jahr, 8 Monaten

    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.

    Thread-Starter Karl

    (@zittau)

    vor 1 Jahr, 8 Monaten

    @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

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Jahr, 8 Monaten

    @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. 😉

    Moderator Angelika Reisiger

    (@la-geek)

    vor 1 Jahr, 8 Monaten

    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.

    Thread-Starter Karl

    (@zittau)

    vor 1 Jahr, 8 Monaten

    @hage + @la-geek

    Herzlichen Dank Euch beiden. Dank Eurer Hilfe habe ich es hinbekommen!

    Ich habe farbige Bilder auf die Seite gestellt und dazu diesen CSS-Style verwendet:

    picture.wp-image-123 {
       filter: grayscale(100%);
       -webkit-filter: grayscale(100%);
    }picture.wp-image-123:hover {
       filter: grayscale(0);
       -webkit-filter: grayscale(0);
    }

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Jahr, 8 Monaten

    super – freut uns. Danke für die Rückmeldung und “Gelöst”-Markieren. 👍

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Das Thema „Su. Plugin für Bildänderung bei „onMouseOver““ ist für neue Antworten geschlossen.