Alex: Bilder SW

Hallo und guten Abend,

ist es möglich (und zuverlässig in allen gängigen Browsern auf MAC und Win) ein farbiges Bild "grau" einzufärben und wenn ich mit der Maus drüber fahre, es wieder "farbig" dazustellen? Oder muss ich es wie bisher mit zwei Bildern machen?

  1. Om nah hoo pez nyeetz, Alex!

    ist es möglich (und zuverlässig in allen gängigen Browsern auf MAC und Win) ein farbiges Bild "grau" einzufärben und wenn ich mit der Maus drüber fahre, es wieder "farbig" dazustellen? Oder muss ich es wie bisher mit zwei Bildern machen?

    filter, caniuse

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Lid und Lido.

    1. Danke,

      filter, caniuse

      da der IE überhaupt nicht unterstützt wird, werde ich es leider weiterhin mit Bildern machen müssen. Schade eigentlich.

      1. @@Alex:

        nuqneH

        da der IE überhaupt nicht unterstützt wird,

        Alte IEs können das mit ihrem proprietärem Gray-Filter.

        Im IE 10 geht’s mit SVG.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Hallo,

          Im IE 10 geht’s mit SVG.

          danke für deine Antwort, dann nehme ich wohl dieses? https://github.com/karlhorky/gray

      2. Hallo Alex,

        du könntest es mit Javascript und Canvas versuchen, da bleibt nur der IE8 draußen vor.

        Gruß, Jürgen

        1. Guten Abend Jürgen,

          du könntest es mit Javascript und Canvas versuchen, da bleibt nur der IE8 draußen vor.

          danke für deine Antwort, dass der IE 8 da nicht mitspielt ist mir ehrlich gesagt scheiß egal. Wenigstens sollte der 10 und 11 mitspielen.

          Ist es denn schwer mit Javascript und Canvas? Hab damit noch nie etwas zu tun gehabt.

          1. Hallo Alex,

            Ist es denn schwer mit Javascript und Canvas? Hab damit noch nie etwas zu tun gehabt.

            ich habe da mal was ausprobiert: http://www.j-berkemeier.de/Test/Bildmanipulation.html

            Gruß, Jürgen

  2. Hallo und guten Abend,

    ich habe noch eine andere Idee, meine Bilder liegen nun alle in SW und Farbe vor. Die SW Bilder haben ein _sw mit dran. Wenn ich nun mit der Maus über das Bild fahre, ist es möglich mit jQuery das _sw dran zu hängen und wenn ich wieder mit der Maus weg gehe, es zu löschen?

    Mein Aufbau sieht so aus

      
     echo "<img src=\"img/klein/".$bilder['grafik']."\" alt=\"".$bilder['titel']."\">";  
    
    
    1. @@Alex:

      nuqneH

      ich habe noch eine andere Idee, meine Bilder liegen nun alle in SW und Farbe vor. Die SW Bilder haben ein _sw mit dran. Wenn ich nun mit der Maus über das Bild fahre,

      Und wenn ein Nutzer gar nicht mit der Maus navigiert, sondern per Tastatur?

      ist es möglich mit jQuery das _sw dran zu hängen und wenn ich wieder mit der Maus weg gehe, es zu löschen?

      Dazu brauchst du kein JavaScript, schon gar kein jQuery.

      <a href="…" style="background-image: url(img/klein/<?php [code lang=php]echo $bilder['grafik']; ?>_sw)">
        <img src="img/klein/<?php echo $bilder['grafik']; ?>" alt="<?php echo $bilder['titel']; ?>"/>
      </a>[/code]

      Ich habe mal angenommen, das Ding ist ein Link. Ansonsten könnte es statt des a-Elements auch div bzw. figure sein.

      Statt des Hintergrundbilds (das ich in diesem Fall tatsächlich ins Markup schreiben würde) könnten es auch auch 2 img-Elemente sein, die absolut in dem Containerelement (das dafür relativ positioniert wird) werden.

      a[style^=background]  
      {  
        display: inline-block;  
      }  
        
      a[style^=background] img  
      {  
        display: block;  
        opacity: 0;  
        transition: opacity ease 0.5s;  
      }  
        
      a[style^=background]:hover img,  
      a[style^=background]:focus img  
      {  
        opacity: 1;  
      }
      

      Das a-Element über den Attributselektor [style^=background] zu selektieren, wäre eine Möglichkeit.

      Da sich opacity animieren lässt, hab ich gleich mal einen saften Übergang (transition) eingebaut.

      Mein Aufbau sieht so aus

      echo "<img src="img/klein/".$bilder['grafik']."" alt="".$bilder['titel']."">";

        
      Ich würde – wie oben gezeigt – nicht das Markup mit PHP ausgeben lassen, sondern nur die Daten. Das macht den Code übersichtlicher, nicht zuletzt weil man die ganzen Anführungszeichen nicht escapen muss.  
        
      Qapla'
      
      -- 
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      
      1. Hallo,

        vielen dank für deine tolle Hilfe. Ich hätte dazu noch eine Frage. Wie würde es aussehen, wenn ich dein zweiten Vorschlag nehmen würde?

        Ich habe mal angenommen, das Ding ist ein Link. Ansonsten könnte es statt des a-Elements auch div bzw. figure sein.

        Die Bilder haben kein Link deshalb würde ich hier dann doch lieber das <figure> nehmen, hab damit noch nie etwas gemacht und dieses was du nun schreibst

        Statt des Hintergrundbilds (das ich in diesem Fall tatsächlich ins Markup schreiben würde) könnten es auch auch 2 img-Elemente sein, die absolut in dem Containerelement (das dafür relativ positioniert wird) werden.

        gibt mir auch Rätzel auf. Könntest du mir hier nochmals helfen bzw. mir ein Beispiel geben, wie ich deines umbauen müsste, um dieses zu erreichen?

        Vielen Dank für deine Hilfe.

      2. Hallo,

        ich habe mich nochmals hingesetzt und es mit <figure> getestet, ich gehe davon aus, dass du es so meinst?

          
            figure[style^=background]  
        {  
          display: inline-block;  
        }  
          
        figure[style^=background] img  
        {  
          display: block;  
          opacity: 1;  
          transition: opacity ease 0.5s;  
        }  
          
        figure[style^=background]:hover img,  
        figure[style^=background]:focus img  
        {  
          opacity: 0;  
        }  
        
        
          
        <figure style="background-image: url(img/klein/hallo.jpg)">  
        <img src="img/klein/hallo_sw.jpg" alt="Hallo"/>  
        </figure>  
        
        

        Was du damit meinst:

        Statt des Hintergrundbilds (das ich in diesem Fall tatsächlich ins Markup schreiben würde) könnten es auch auch 2 img-Elemente sein, die absolut in dem Containerelement (das dafür relativ positioniert wird) werden.

        weiß ich leider nicht und wüsste auch nicht, wie ich das umsetzten und formatieren muss.

        1. Om nah hoo pez nyeetz, Alex!

          Was du damit meinst:

          Statt des Hintergrundbilds (das ich in diesem Fall tatsächlich ins Markup schreiben würde) könnten es auch auch 2 img-Elemente sein, die absolut in dem Containerelement (das dafür relativ positioniert wird) werden.

          weiß ich leider nicht und wüsste auch nicht, wie ich das umsetzten und formatieren muss.

          <figure>  
            <img src="schwarz-weiß" alt="">  
            <img src="bunt" alt="schönes Bild">  
          </figure>
          
          figure {  
              position: relative;  
          }  
          figure img {  
              position: absolute;  
          }  
          img:last-child:hover {  
              opacity: 0;  
          }  
          img, img:hover {  
              transition: opacity 2s;  
          }
          

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bovis und Bovist.

          1. Hallo Matthias,

            sobald ich dieses

            figure img {  
                position: absolute;  
            }
            

            hinzufüge, werden keine Bilder mehr angezeigt.

            1. Om nah hoo pez nyeetz, Alex!

              <!DOCTYPE html>  
              <html lang="de">  
              <head>  
                <meta charset="utf-8">  
                <title></title>  
                <style>[code lang=css]    figure {  
                      position: relative;  
                  }  
                  figure img {  
                      position: absolute;  
                  }  
                  img:last-child:hover {  
                      opacity: 0;  
                  }  
                  img, img:hover {  
                      transition: opacity 2s;  
                  }
              ~~~  </style>  
              </head>  
                
              <body>  
                 <figure>  
                    <img src="http://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" alt="">  
                    <img src="http://wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="">  
                 </figure>  
              </body>  
              </html>[/code]  
              Matthias
              
              -- 
              Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Wind und Windows](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=W#wind).  
              ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
              
              
              1. Ist ja schön und gut, dass es bei dir funktioniert. Hab dein Beispiel getestet und es geht. Meine Seite ist aber leider etwas komplexer als diese 10 Zeilen Code die du in dem Beispiel hast.

                Hat denn keiner eine Idee, wie ich es mit Javascript gelöst bekomme? Wer keines anhat ist selber schuld, dann gehen 40% aller Funktionen eh nicht auf meiner Seite. Von daher ist mir das egal.

                Wie man sieht geht es mit CSS leider bei mir nicht.

                1. Om nah hoo pez nyeetz, Alex!

                  Ist ja schön und gut, dass es bei dir funktioniert. Hab dein Beispiel getestet und es geht. Meine Seite ist aber leider etwas komplexer als diese 10 Zeilen Code die du in dem Beispiel hast.

                  Ach.
                  Und wo kann ich mir das anschauen?

                  Hat denn keiner eine Idee, wie ich es mit Javascript gelöst bekomme? Wer keines anhat ist selber schuld, dann gehen 40% aller Funktionen eh nicht auf meiner Seite. Von daher ist mir das egal.

                  Das sollte dir nicht egal sein.

                  Wie man sieht geht es mit CSS leider bei mir nicht.

                  Das geht bestimmt mit CSS, ein valides Dokument vorausgesetzt.

                  Matthias

                  --
                  Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Eins und Einsatzwagen.

                  1. Und wo kann ich mir das anschauen?

                    Kann man sich nicht online ansehen, das ist nur bei uns im Verein Intern. Das ganze läuft unter XAMPP, sollte aber egal sein.

                    Ich habe auf meiner Seite wie mir dieses empfohlen wurde normalize.css respond.js und html5shiv.js im Einsatz.

                    Das sollte dir nicht egal sein.

                    Doch das ist mir egal, wer in der heutigen Zeit kein JavaScript anhat, der muss sich nicht wundern dass viele Sachen nicht funktionieren. Hast du dir mal Facebook ohne JS angesehen? Nein? Dann solltest du dieses mal machen.

                    1. Jetzt geht es, es war noch ein overflow:hidden hin. Allerdings wenn ich das mit dem position: absolute; mache, wird mein Contenbereich nicht mehr automatisch vergrößert. Die Bilder liegen also nun halb im Content halb im Footer.

                      Ich sag ja es gibt nur Ärger mit dem scheiß. Mit JS hätte ich die Problem nie gehabt.

                      1. Ok, so sollte es gehen, ich verstehe nicht warum ich dem height eine feste Größe mitgeben muss, vorhin hatte ich es auf auto, aber dann passt sich der Content nicht automatisch an. Ich sag ja scheiß Css. Mit JS hätte ich solche Problem nie gehabt. Außerdem ist es jetzt nicht mehr responsive, da ich ja eine höhe angegeben habe.

                        Also alles für den Arsch!

                          
                        figure {  
                        display: inline-block;  
                        position: relative;  
                        width: 208px;  
                        height: 137px;  
                        border: 3px solid #FFFFFF;  
                        outline: 1px solid #efefef;  
                        margin-bottom: 10px;  
                        margin-right: 31px;  
                        margin-left: 0em;  
                        
                        
                        1. Die ganzen letzten 4 Stunden Arbeit waren wohl für den Arsch. Ich wollte den SW Bildern auch eine opacity mitgeben dass diese etwas heller dargestellt werden, also opacity:0.45; Wenn ich dieses nun mache, werden die „normalen“ Bilder nicht mehr in voller Helle dargestellt. Ich wusste es von Anfang an, dass es nur Problem gibt. Aber mit euch kann man scheinbar nicht diskutieren. Ihr meint immer, dass man mit CSS alles ohne Problem lösen kann. Nun habe ich den Dreck, darf wieder bei  0 Anfangen.

                        2. @@Alex:

                          nuqneH

                          Ok, so sollte es gehen, ich verstehe nicht warum ich dem height eine feste Größe mitgeben muss,

                          Deshalb. Und nein, musst du nicht …

                          vorhin hatte ich es auf auto, aber dann passt sich der Content nicht automatisch an.

                          … Lösung hab ich genannt.

                          Ich sag ja scheiß Css.

                          CSS tut das, was du sagst. Wenn das nicht das ist, was du willst, liegt das nicht an CSS.

                          Mit JS hätte ich solche Problem nie gehabt.

                          Aber dafür unzählige andere.

                          Außerdem ist es jetzt nicht mehr responsive, da ich ja eine höhe angegeben habe.

                          Also alles für den Arsch!

                          Nein, s.o.

                          Qapla'

                          --
                          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          2. @@Matthias Apsel:

            nuqneH

            figure img {
                position: absolute;
            }

            Wenn beide img absolut positioniert werden, sind beide aus dem Fluss, d.h. sie bestimmen nicht mehr die Höhe der figure-Box.

            Es dürfte sinnvoll sein, nur eins absolut zu positionieren und das andere im normalen Elementflusszu belassen.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. Hallo,

              Wenn beide img absolut positioniert werden, sind beide aus dem Fluss, d.h. sie bestimmen nicht mehr die Höhe der figure-Box.

              Es dürfte sinnvoll sein, nur eins absolut zu positionieren und das andere im normalen Elementflusszu belassen.

              aber beide Bilder liegen doch wie du mir selber geraten hast, innerhalb von <figure> wenn ich also dem Element eine absolute Positionierung gebe, dann sind beide Bilder daran ebenfalls positioniert?

              1. @@Alex:

                nuqneH

                Wenn beide img absolut positioniert werden, sind beide aus dem Fluss, d.h. sie bestimmen nicht mehr die Höhe der figure-Box.

                Es dürfte sinnvoll sein, nur eins absolut zu positionieren und das andere im normalen Elementflusszu belassen.

                aber beide Bilder liegen doch wie du mir selber geraten hast, innerhalb von <figure>

                Aus HTML/DOM-Sicht, ja.

                Was nicht heißt, dass die Bilder innhalb der figure-Box _dargestellt_ werden. Wenn img absolut positioniert werden, liegen sie nicht unbedingt in der figure-Box. Ihre Positionierung bezieht sich auf die nächst höhere Box, die nicht 'static' positioniert ist (was der Defaultwert ist, wenn nicht anderes angegeben ist).

                Wenn sich die Positionierung auf die figure-Box beziehen soll, muss für diese also – wie ich schon schrieb – position: relative gesetzt werden.

                Zum Nachlesen dürfte an der Stelle die deutsche Übersetzung der CSS-2.0-Spec geeignet sein.

                Qapla'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. Hallo Alex,

      ... meine Bilder liegen nun alle in SW und Farbe vor. ...

      ich habe mal meine Spiralenseite umgebaut, der Bildwechsel geht jetzt über css:

      figcaption { text-align:center; margin-bottom:0.5em }  
      .bild_bild img { position:absolute; opacity:1 }  
      .bild_bild img + img { position:static; opacity:0 }  
      .bild_bild:hover img { opacity:0 }  
      .bild_bild:hover img + img { opacity:1 }  
      img { transition: opacity 2s }
      
      <figure class="bild_bild">  
       <img src="Sonnenblume.jpg" alt="Sonnenblume"><img src="Sonnenblume_Mitte.jpg" alt="Sonnenblume Ausschnitt">  
       <figcaption>Sonnenblume<br><span class="kleiner">(Mouseover vergrößert die Mitte)</span></figcaption>  
      </figure>
      

      Gruß, Jürgen

      1. Om nah hoo pez nyeetz, JürgenB!

        <span class="kleiner">(Mouseover vergrößert die Mitte)</span>

          
        „kleiner“ vergrößert? ;-)  
          
        small wäre ein geeignetes Element.  
          
        Matthias
        
        -- 
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Wunde und Wunderhorn](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=W#wunde).  
        ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
        
        
        1. Hallo Matthias,

          „kleiner“ vergrößert? ;-)

          small wäre ein geeignetes Element.

          Altlasten, ich habe gerade angefangen, die Seite zu entrümpeln, z.B. Javascript-Abfragen zu entfernen, die prüfen, ob der Browser getElement... unterstützt.

          Gruß, Jürgen

      2. Hallo Jürgen,

        ich habe mal meine Spiralenseite umgebaut, der Bildwechsel geht jetzt über css:

        figcaption { text-align:center; margin-bottom:0.5em }

        .bild_bild img { position:absolute; opacity:1 }
        .bild_bild img + img { position:static; opacity:0 }
        .bild_bild:hover img { opacity:0 }
        .bild_bild:hover img + img { opacity:1 }
        img { transition: opacity 2s }

        
        >   
        > ~~~html
        
        <figure class="bild_bild">  
        
        >  <img src="Sonnenblume.jpg" alt="Sonnenblume"><img src="Sonnenblume_Mitte.jpg" alt="Sonnenblume Ausschnitt">  
        >  <figcaption>Sonnenblume<br><span class="kleiner">(Mouseover vergrößert die Mitte)</span></figcaption>  
        > </figure>
        
        

        vielen lieben Dank für das Beispiel, ich werde es gleich mal bei mir einbauen, vielleicht kommen ich ja doch noch an mein Ziel. Aber eine Frage habe ich noch, was soll das img + img? Ist das so richtig und geht das auch in älteren IE (bis IE sagen wir mal 9 oder 10)?

        1. Hallo Alex,

          ... Aber eine Frage habe ich noch, was soll das img + img? Ist das so richtig ...

          siehe CSS/Selektoren

          ... und geht das auch in älteren IE (bis IE sagen wir mal 9 oder 10)?

          Probier es aus, meine Seite ist ja verlinkt.

          Gruß, Jürgen

          1. Probier es aus, meine Seite ist ja verlinkt.

            Hab leider kein alten IE mehr :/

            1. Hallo Alex,

              Hab leider kein alten IE mehr :/

              ich auch nicht, aber zum Glück können die neuen IEs alte emulieren.

              Gruß, Jürgen

              1. @@JürgenB:

                nuqneH

                Hab leider kein alten IE mehr :/

                Ich schon – auf dem Mac.

                ich auch nicht, aber zum Glück können die neuen IEs alte emulieren.

                Was mit Vorsicht zu genießen ist. Auf der sicheren Seite ist man wohl mit virtuellen Maschinen modern.ie (von language negotiation haben die auch noch nichts gehört, oder?)

                Qapla'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                1. Hallo Gunnar,

                  ich auch nicht, aber zum Glück können die neuen IEs alte emulieren.

                  Was mit Vorsicht zu genießen ist. Auf der sicheren Seite ist man wohl mit virtuellen Maschinen modern.ie (von language negotiation haben die auch noch nichts gehört, oder?)

                  wobei für mich nicht alte IEs das Problem sind, sonder aktuelle Browser unter MacOS, IOS, Android und Linux. Als Privatbastler stehen mir die inzwischen vielen Systeme nicht zur Verfügung. Ich entwickle und teste unter Windows mit aktuellen IE, FF und Chrome und frage dann Freunde und meine Kinder, ob ich deren Handy/Tablet/Mac mal benutzen darf. Bei Linux hoffe ich, dass dessen Browser dann mit abgedeckt sind. Wobei mehr als einfache Funktionstests nicht möglich sind, echtes Debuggen geht so nicht. Schade, dass es den Safari nicht mehr für Windows gibt.

                  Gruß, Jürgen

                  1. Hallo

                    … Bei Linux hoffe ich, dass dessen Browser dann mit abgedeckt sind. Wobei mehr als einfache Funktionstests nicht möglich sind, echtes Debuggen geht so nicht.

                    Mir ist es weder beim FF noch bei Chromium oder Opera (bis 12.x aus eigener Erfahrung) vorgekommen, dass sich die Fähigkeiten der Browser einer Programmversion zwischen Windows und Linux-Builds unterschieden. Ich kann natürlich nicht ausschließen, dass das bei einzelnen Versionen für einzelne Funktionen nicht doch zutraf, aber das dürften Ausnahmen gewesen sein.

                    Tschö, Auge

                    --
                    Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                    Terry Pratchett, "Wachen! Wachen!"
                    ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
                    Veranstaltungsdatenbank Vdb 0.3