Schwarz-Weiß Filter für alle Browser

    Hi,
    Ich plane mal wieder mir ein neues Wp Theme zu basteln und dieses mal soll es komplett Schwarz Weiß sein. Das heißt auch die Bilder. Nur wenn man mit der Maus drüber fährt wird das Bild farbig.

    Jetzt wollte ich fragen, ob ihr ein Javascript kennt, das so etwas kann? am besten auf jquery basis.
    Ich habe das ganze schon mit IE Filtern hinbekommen aber leider gibt es die ja auch nur für den IE.
    Natürlich könnte ich auch jeweils immer zwei bilder hinterlegen, aber ich betreibe den Blog nicht allein und deshalb muss die Lösung auch wirklich Idiotensicher sein.

    Ich höffe ihr könnt mir weiterhelfen und freue mich auf Antwort.:-D

    • Gerade eben
    • 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

    das ist derzeit nur mit html5 möglich steht in der beschreibung... hab jetzt keine lust mehr das auszuprobieren, aber das sollte doch auch via css mit overflow: hidden auf dem umgebenden element (span) und bei img {position: relative; top:0; left:0; } und img:hover {top:-XYpx; left:-XYpx) gehen, wenn du aus beiden varianten ein gemeinsames bild machst. also span um jedes img setzen und mit breite und höhe des bildes versehen: <span style="width: IMGpx; height: IMGpx; display: block;"><img class="sw-hover" src="hover-bild.jpg"/></span>

    dann brauchts auch kein js. ... hab´s jetzt doch getestet:

    html: (bild-höhe 81px = beide zustäbnde summe 162px)

    <span class="hover-span">
    <img src="hover-states.png" class="hover"/>
    </span>

    css:

    .hover-span {
    overflow: hidden;
    display: block;
    width: 870px;
    height: 81px;
    }
    .hover {
    position: relative;
    top: 0px;
    left: 0px;
    }
    .hover:hover {
    position: relative;
    top: -81px;
    left: 0px;
    }

    mostho: Ich werds dann posten wenns fertig ist.
    kaiser:
    Schon klar. Und wenn ich den blog alleine betrteiben würde, würde ich es auch so machen, aber ich kann meinen technickfremden Freunden nicht zumuten Jedes Bild mit Photoshop zu bearbeiten und zwei mal zu uploaden.

    Das Script läuft auf allen neueren Browserversionen, bis au IE, aber der hat schon ewig eine proprietäre Lösung.

    Wenn du, oder wer anders, allerdings ein Plugin kennst, das beim Upload gleich eine zweite Schwarz Weiß version speichert, würde ich es auf deine Weise machen. Alleine schon wegen den ladezeiten. Doppelter Traffic kann nicht länger dauern als User Seitig 20 Grafiken zu desaturieren.

    hm. user-seitig ist immer ein problem. das eigentliche problem, dass ich dir hier aber lösen helfen wollte, war ein ganz anderes: der hover-state muss ja erst "on request" geladen werden. hängt natürlich von der bild-größe ab (und deine user werden sich vermutlich einen dreck um dateigrößen scheren), aber das bild wird ja erst bei mouseover geladen und damit wird deine seite a) wenig user-feedback geben und b) werden ungeduldige user deine seite für b1) kaputt halten (außer du schaffst es das bild auch als hintergrundbild für den umgebenden span zu setzen > ie zeigt ein kreuzerl solange er kein bild hat) oder b2) sowieso nur die sw-bilder sehen.

    hmm du hast recht. Dann werd ich halt meinen Leuten beibringen müssen ,wie man Grafiken desaturiert.
    Hier ist eine kleine Testseite für den effect:
    http://www.gawoo.de/test/

    Da ich aber nicht immer die Größe der Bilder vorher weiß, hab ich das ganze mit jquery gelöst und dem ganzen noch einen schönen Effeckt gegeben.:grin: Jetzt ist dar Wechsel beim hovern nicht mehr so hart.

    HTML
    $(document).ready(function(){
    $(".box").hover(
        function () {
            $("img", this).fadeTo("normal", 0);
        },
        function () {
            $("img", this).fadeTo("normal", 1);
        }
    );
});

    Das farbige Bild ist dann der Hintergrund von .box.

    erstmal "GROSSER RESPEKT"!! sauberes Layout und wirklich schön und vor allem nett (und neu) mit den aufgehenden Boxen für Login etc. Guter jQuery-Einsatz! Also abschließend nochmal: Respekt!

    Folgende Frage hab ich: Wie bitte kommst Du auf die Rockwell?? (Ist ja kein Standard-, dafür aber mein Lieblingsfont). Der Fallback auf Helvetica und Arial klappt übrigens bestens.

    Ich glaube übrigens, dass zwar der eine oder andere User mit den hover-states nicht zurecht kommen wird, weil Verbindung zu langsam oder whatever, aber was soll´s: Das Ergebnis rechtfertigt den Aufwand. Pfeif auf das, was ich geschrieben hab. Mach einfach weiter so... Nachsatz: Bei den meisten jQuery-Geschichten kann man die Dauer auch einstellen. Vielleicht einfach nur den Übergang verkürzen.

    Danke für das Lob :-D.
    Naja wie dir schon aufgefallen ist sind ja zwei websafe Fonts als Fallback vorhanden, also kann die erste Wahl etwas ausgefallener sein. Und da Rockwell nun auch nicht so exotisch ist wird er Wohl bei 10-20% der User auch angezeigt werden. Rockwell passt halt gut in das kantige Design.

    Momentan kämpfe ich gerade mit meinen 3 Spalten Layout. Mir fällt einfach kein Wege ein die Artikel Nacheinander auf die drei Spalten zu verteilen. Ich will ja nicht, dass in der linken Spalte die neuen Artikel sind, in der mitte die älteren und rechts die ganz alten. Es soll ja schon von oben nach unten gehen.:roll:
    Irgend eine Idee?

    ich verwende blueprint als css framework. da hast du 24 spalten, d.h. einfach dem artikel 8 spalten breite geben mit <div class="span-8">INHALT ARTIKEL</div> und fertig. die "floaten" und schubsen sich dann gegenseitig in die nächste spalte. problem kann nur entstehen, wenn die artikel arg unterschiedliche höhen haben, weil sie dann manchmal verrutschen.

    Hello Muhsaft, ich muss mich jetzt nochmal (aus dem anderen thread) wiederholen: Du musst das gar nicht via Abfrage/Query/Loop machen, weil´s ja nur Deine Seite verlangsamt. Das geht nur mit css auch. Und zwar mit einer Kombination aus min/max-height (Monika) und den gefloateten Boxen. (Hab das vor kurzem selbst erst gemacht & funktioniert).

    Detailierter: Du musst mit margin-left & margin-right bei jeder Box arbeiten. float: left; schiebt sie so hin, wie du es brauchst, also ltr. Wenn Du darauf bestehst, dass zB 20px Abstand zwischen den Boxen sein soll und Menü, Footer, etc. auch bündig sein sollen, dann müsstest du diesen Elementen eben auch 10px margin-left und -right geben. Mehr braucht´s nicht. Und das max/min-Ding ist eben dazu da, dass sie auch untereinander rutschen und keine leeren Zeilen entstehen...

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden