Ankündigung

Einklappen
Keine Ankündigung bisher.

Bilder grau, bei hover farbig

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bilder grau, bei hover farbig

    Hallo zusammen,

    hab da mal ne frage, gibt es die möglichkeit per CSS die bilder "von natur aus" grau zu haben und wenn man mit der maus drüber fährt des richtige bild mit farbe anzuzeigen? Also ich weiß dass es geht nur leider kenne ich nur die möglichkeit mit einem zweiten bild, welchem der Farbwert entzogen wurde. Geht es auch nur mit CSS ohne, dass ich extra jedes bild zweimal hochladen muss?
    Ähnliche Effekte gehen auch ^^

    Gruß
    Wishu
    Der komplette Text den sie vor dieser Zeile lesen, ist per Zufall generiert worden und muss nicht zwingend Sinn ergeben.
    Wishu-Blog | Wishu.de | WishuLoad

  • #2
    AW: Bilder grau, bei hover farbig

    Hi,
    Zitat von Wishu Beitrag anzeigen
    gibt es die möglichkeit per CSS die bilder "von natur aus" grau zu haben
    nein. aber möglicherweise bietet Microsoft dafür einen IE-Filter an.

    Gruß
    Ingo
    Ingo Webdesign

    Kommentar


    • #3
      AW: Bilder grau, bei hover farbig

      was will ich mit IE? xD soll ja bei allen browsern gleich aussehen.
      gibt es da nichmal was annäherndes, vllt mit transparenz oder so?

      Gruß
      Wishu
      Der komplette Text den sie vor dieser Zeile lesen, ist per Zufall generiert worden und muss nicht zwingend Sinn ergeben.
      Wishu-Blog | Wishu.de | WishuLoad

      Kommentar


      • #4
        AW: Bilder grau, bei hover farbig

        Meinst du sowas hier.? http://killcasper.de/content/media_foto.htm

        Wenn ja.. würde mich auch mal interessieren..
        »Lernen ist wie Rudern gegen den Strom. Hört man damit auf, treibt man zurück.« Laozi, 6. Jahrhundert v. Chr. chinesischer Denker
        ~Juelz on deviantArt!
        ~Juelz website!

        Kommentar


        • #5
          AW: Bilder grau, bei hover farbig

          Eine Möglichkeit ausser mit zwei Bildern gibt es glaube ich nicht...
          Meine neue private Homepage ist fertig. Es wird um Meinungen, Anregungen, Kritik und Gästebucheinträge gebeten: http://markus.ug-team.de

          Kommentar


          • #6
            AW: Bilder grau, bei hover farbig

            ja sowas in der art. naja eigentlich ja sowas ^^
            hatte leider kein beispiel.
            wie gesagt mit transparenz würde es glaube auch gehen, gibt es dazu ne möglichkeit? Denn könnt ichs erstmal ausprobieren.

            Gruß
            Wishu
            Der komplette Text den sie vor dieser Zeile lesen, ist per Zufall generiert worden und muss nicht zwingend Sinn ergeben.
            Wishu-Blog | Wishu.de | WishuLoad

            Kommentar


            • #7
              AW: Bilder grau, bei hover farbig

              Ich würde sagen.. alle bilder auf gleiche größe bring.. dann mit photoshop oder so ein transparentes bild in der gleich größe erstellen.. und dann hoverst halt über alle bilder das transparente bild..

              sry wenn ich mich falsch ausgedrückt hab..^^
              »Lernen ist wie Rudern gegen den Strom. Hört man damit auf, treibt man zurück.« Laozi, 6. Jahrhundert v. Chr. chinesischer Denker
              ~Juelz on deviantArt!
              ~Juelz website!

              Kommentar


              • #8
                AW: Bilder grau, bei hover farbig

                das bsp ist ein js
                einfach mal nach *scriptaculous* suchen und dann etwas *fummeln*...
                oder das anfänger tutorial durchackern..
                sigpic
                Bewertungen (ob positiv oder negativ) können unterlassen werden

                Kommentar


                • #9
                  AW: Bilder grau, bei hover farbig

                  Mein Vorschlag:
                  Das graue Bild als Hintergrundbild und das färbige Bild als normales Bild genau darüber einbinden.
                  Das färbige erst mit display: none; ausblenden und bei hover dann entsprechend einblenden.
                  Kosmetik Hobby

                  Kommentar


                  • #10
                    AW: Bilder grau, bei hover farbig

                    Trifft vielleicht nicht ganz die Frage, aber mit PHP ist es möglich. Falls Interesse besteht ,schau dir doch mal diesen Artikel aus dem Selfphp-Kochbuch an: http://www.selfphp.info/kochbuch/kochbuch.php?code=82
                    Gruß von Zab

                    Kommentar


                    • #11
                      AW: Bilder grau, bei hover farbig

                      Code:
                      <img style="opacity: 0.5;" onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity='100'" onmouseout="this.style.MozOpacity=0.5;this.filters.alpha.opacity='50'" src="xxxx" alt="" border="0">
                      So sollte es gehen.

                      Kommentar


                      • #12
                        AW: Bilder grau, bei hover farbig

                        Zitat von Wishu Beitrag anzeigen
                        Hallo zusammen,

                        hab da mal ne frage, gibt es die möglichkeit per CSS die bilder "von natur aus" grau zu haben und wenn man mit der maus drüber fährt des richtige bild mit farbe anzuzeigen? Also ich weiß dass es geht nur leider kenne ich nur die möglichkeit mit einem zweiten bild, welchem der Farbwert entzogen wurde. Geht es auch nur mit CSS ohne, dass ich extra jedes bild zweimal hochladen muss?
                        Ähnliche Effekte gehen auch ^^

                        Gruß
                        Wishu
                        Das sollte mit CSS 3.0 gehen, das graue Bild über das richtige legen und mit einer Transparenz versehen, dann eine eigene Transparenz (opacity:0) für hover hinzufügen.

                        Hier eine Lösung über die base.css für Transparenz, die ich mal ausprobiert habe und bei deinem Vorhaben funktionieren sollte:
                        Code:
                        .trans { filter:Alpha(opacity=60); opacity:0.6; -moz-opacity:0.6; }
                        filter:Alpha ist für IE
                        -moz-opacity ist für Mozilla/Firefox
                        opacity ist reines CSS 3.0, also die kommende CSS-Version, die Firefox zum Teil bereits vorab unterstützt.

                        Wobei ich jetzt nicht weiss, wie man eine andere Transparenz bei hover zuweist.

                        Hinzu kommt das Problem, dass nur die letzten Versionen der Browser und bisher auch nur Firefox und IE das verarbeiten können.
                        Aber vielleicht findet noch wer eine Lösung für die wichtigsten anderen Browser.

                        edit: Oder die Inline-Lösung von Mr. 619 da über mir, die hat auch hover mit drin. Hat ich nicht gesehen, das Posting.
                        Zuletzt geändert von shadaik; 09.10.2007, 12:53.

                        Kommentar


                        • #13
                          AW: Bilder grau, bei hover farbig

                          hab jetzt erstmal das von Mr.619 genommen, wobei da das problem ist, dass es nur Im FF funzt und auch nur mit Javascript. bisher nur im Footer und bei Über mich.

                          Gruß
                          Wishu
                          Der komplette Text den sie vor dieser Zeile lesen, ist per Zufall generiert worden und muss nicht zwingend Sinn ergeben.
                          Wishu-Blog | Wishu.de | WishuLoad

                          Kommentar


                          • #14
                            AW: Bilder grau, bei hover farbig

                            Mit CSS geht das glaube ich nicht, jedenfals auf garkeinenfall alleine. Könnte unter umständen mit java-script zusammen funken, ka. Ich verstehe nur nicht ganz warum du unbedingt dabei css verwenden willst. Einfach ganz normalen hover mit zwei bilder das erste grau und dann das zweite farbig.

                            Aber vielleicht hilf dir ja dieser Queltext, must halt nur auf deine Sachen abstimmen, bei Fragen Frag!


                            <html xmlns="http://www.w3.org/1999/xhtml">
                            <head>
                            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                            <title>bla bla bla</title>
                            <style type="text/css">
                            <!--
                            body {
                            background-image: url(background.jpg);
                            }
                            #Layer11 {
                            position:absolute;
                            left:25px;
                            top:100px;
                            width:900px;
                            height:120px;
                            z-index:11;
                            }
                            .Stil1 {
                            color: #FFFFFF;
                            font-weight: bold;
                            font-size: 16px;
                            font-family: Verdana, Arial, Helvetica, sans-serif;
                            }
                            #Layer12 {
                            position:absolute;
                            left:25px;
                            top:240px;
                            width:900px;
                            height:120px;
                            z-index:12;
                            }
                            -->
                            </style>
                            <script type="text/JavaScript">
                            <!--

                            function MM_preloadImages() { //v3.0
                            var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                            var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                            if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
                            }

                            function MM_findObj(n, d) { //v4.01
                            var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                            d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
                            if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
                            for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
                            if(!x && d.getElementById) x=d.getElementById(n); return x;
                            }

                            function MM_nbGroup(event, grpName) { //v6.0
                            var i,img,nbArr,args=MM_nbGroup.arguments;
                            if (event == "init" && args.length > 2) {
                            if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
                            img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
                            if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
                            nbArr[nbArr.length] = img;
                            for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
                            if (!img.MM_up) img.MM_up = img.src;
                            img.src = img.MM_dn = args[i+1];
                            nbArr[nbArr.length] = img;
                            } }
                            } else if (event == "over") {
                            document.MM_nbOver = nbArr = new Array();
                            for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
                            if (!img.MM_up) img.MM_up = img.src;
                            img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
                            nbArr[nbArr.length] = img;
                            }
                            } else if (event == "out" ) {
                            for (i=0; i < document.MM_nbOver.length; i++) {
                            img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
                            } else if (event == "down") {
                            nbArr = document[grpName];
                            if (nbArr)
                            for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
                            document[grpName] = nbArr = new Array();
                            for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
                            if (!img.MM_up) img.MM_up = img.src;
                            img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
                            nbArr[nbArr.length] = img;
                            } }
                            }
                            //-->
                            </script>
                            </head>

                            <body onload="MM_preloadImages('downbild.jpg','overbild. jpg','overbeidownbild.jpg','downbild2.jpg','overbi ld2.jpg','overbeidownbild2.jpg')">
                            <div id="Layer1" style="position: absolute; left: 134px; top: 46px; width: 71px; height: 30px; z-index: 1"> <a href="zielseite.html" target="_self" onclick="MM_nbGroup('down','group1','Elementname', 'downbild.jpg',1)" onmouseover="MM_nbGroup('over','Elementname','over bild.jpg','overbeidownbild.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="upbild.jpg" alt="alternativtext" name="Elementname" border="0" id="presse" onload="" /></a></div>
                            <div id="Layer2" style="position: absolute; left: 315px; top: 47px; width: 65px; height: 30px; z-index: 2"> <a href="zielseite 2.html" target="_self" onclick="MM_nbGroup('down','group1','Elementname2' ,'downbild2.jpg',1)" onmouseover="MM_nbGroup('over','Elementname2','ove rbild2.jpg','overbeidownbild2.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="upbild2.jpg" alt="alternativtext2" name="Elementname2" border="0" id="news" onload="" /></a></div>
                            </body>
                            </html>



                            MFG

                            tim-er
                            mail me

                            Kommentar


                            • #15
                              AW: Bilder grau, bei hover farbig

                              es soll mit CSS sein, damit es bei jedem Funktioniert, da Javascript bei vielen leider aus ist. und mit 2 bildern könnte ich es wie gesagt auch selbst hinbekommen ^^
                              aber trotzdem danke
                              Gruß
                              Wishu
                              Der komplette Text den sie vor dieser Zeile lesen, ist per Zufall generiert worden und muss nicht zwingend Sinn ergeben.
                              Wishu-Blog | Wishu.de | WishuLoad

                              Kommentar

                              homepage-forum.de - Hilfe für Webmaster! Statistiken

                              Einklappen

                              Themen: 56.933   Beiträge: 431.211   Mitglieder: 28.702   Aktive Mitglieder: 44
                              Willkommen an unser neuestes Mitglied, sukhdevscatering.

                              Online-Benutzer

                              Einklappen

                              196 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 193.

                              Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              • arnego2
                                Antwort auf mySQL ORDER BY mit Umlauten
                                Wenn das alles so klappt warum ist dir die Ordnung so wichtig?
                                Gestern, 17:18
                              • Megabyte
                                Antwort auf mySQL ORDER BY mit Umlauten
                                Hallo Sempervivum

                                Danke für deinen Beitrag. Das wäre sicherlich ein begehbarer Weg. Fühlt sich aber immer noch irgendwie an wie "durch den Rücken in die Brust geschossen". Aber scheinbar lässt sich diese Aufgabe nicht mit einer einzigen Direktive elegant lösen. Wenn es daher...
                                Gestern, 16:38
                              • Sempervivum
                                Antwort auf mySQL ORDER BY mit Umlauten
                                Wenn es nicht gerade hunderttausende von Datensätzen sind würde ich auf eine Sortierung mit PHP und einem Callback setzen, also usort. Dann kannst Du in der Vergleichsfunktion die Strings in eine Form bringen, die für den Vergleich geeignet ist und brauchst diese nirgends zu speichern, also die Redundanz...
                                Gestern, 16:18
                              • Megabyte
                                Antwort auf mySQL ORDER BY mit Umlauten
                                Hallo arnego2

                                Danke für die Rückmeldung, aber hilft hier nicht :-)

                                Ich habe keinerlei Probleme mit der Darstellung von Umlauten. Alle Umlaute werden sowohl in phpMyAdmin als auch im Frontend exakt dargestellt. Dafür wurde mittels diversen utf-8 Direktiven gesorgt. Keine...
                                Gestern, 15:53
                              • arnego2
                                Antwort auf mySQL ORDER BY mit Umlauten
                                Bei mir hat die .my.cnf Methode funktioniert.

                                https://stackoverflow.com/questions/...sql-phpmyadmin
                                Gestern, 14:41

                              Die neuesten Beiträge

                              Einklappen

                              • Megabyte
                                mySQL ORDER BY mit Umlauten
                                Wenn man auf meiner Seite bei der Auswahl 'Suche' die Kategorie 'Land' auswählt und dort nach 'Deutschland' sucht erfolgt eine Auflistung der Filme die mindestens einen Drehort in Deutschland hatten. So weit do gut...

                                Wenn man nun bis ans Ende scrollt erscheint dort der Film "Zweiohrküken"...
                                Gestern, 00:50
                              • arnego2
                                Antwort auf mySQL ORDER BY mit Umlauten
                                Wenn das alles so klappt warum ist dir die Ordnung so wichtig?
                                Gestern, 17:18
                              • Megabyte
                                Antwort auf mySQL ORDER BY mit Umlauten
                                Hallo Sempervivum

                                Danke für deinen Beitrag. Das wäre sicherlich ein begehbarer Weg. Fühlt sich aber immer noch irgendwie an wie "durch den Rücken in die Brust geschossen". Aber scheinbar lässt sich diese Aufgabe nicht mit einer einzigen Direktive elegant lösen. Wenn es daher...
                                Gestern, 16:38
                              • Sempervivum
                                Antwort auf mySQL ORDER BY mit Umlauten
                                Wenn es nicht gerade hunderttausende von Datensätzen sind würde ich auf eine Sortierung mit PHP und einem Callback setzen, also usort. Dann kannst Du in der Vergleichsfunktion die Strings in eine Form bringen, die für den Vergleich geeignet ist und brauchst diese nirgends zu speichern, also die Redundanz...
                                Gestern, 16:18
                              • Megabyte
                                Antwort auf mySQL ORDER BY mit Umlauten
                                Hallo arnego2

                                Danke für die Rückmeldung, aber hilft hier nicht :-)

                                Ich habe keinerlei Probleme mit der Darstellung von Umlauten. Alle Umlaute werden sowohl in phpMyAdmin als auch im Frontend exakt dargestellt. Dafür wurde mittels diversen utf-8 Direktiven gesorgt. Keine...
                                Gestern, 15:53
                              • arnego2
                                Antwort auf mySQL ORDER BY mit Umlauten
                                Bei mir hat die .my.cnf Methode funktioniert.

                                https://stackoverflow.com/questions/...sql-phpmyadmin
                                Gestern, 14:41
                              • Dekson
                                Antwort auf Neuer Drucker?
                                Morgen

                                Hattest du dich denn entschieden zu einem Drucker?
                                Ich muss ja sagen, dass es wirklich unterschiedliche Hersteller und Modelle gibt, man sollte einfach schauen, welchen man gebrauchen kann bzw. welcher die Voraussetzungen erfüllt.
                                Ich zum Beispiel habe mich nach Zubehör...
                                Gestern, 05:58
                              • Megabyte
                                Antwort auf Bitcoin-Board.de - Deutschsprachiges Bitcoin & Altcoin Forum
                                Ich mag Bitcoins ebenso wenig. Bitcoins öffnen dubiosen Machenschaften Tür und Tor. Außerdem sind wegen dem Schrott gute Grafikkarten exorbitant teuer geworden bzw. gar nicht mehr erhältlich :-)
                                27.09.2021, 22:09
                              • Megabyte
                                Antwort auf HomeOffice
                                Bin bei Localfu (auch aus Erfahrung)

                                Die zu erwartende Arbeitsergebnisse sind vorab klar festzuhalten und mit einer realistischen Zeitschiene zu versehen. Wenn z.B. ein Konstrukteur zu Hause an einem CAD-System ein Bauteil entwickeln soll so erwartet man dann Ergebnisse in 14 Tage (Beispiel...
                                27.09.2021, 22:00
                              • Nightland Driver
                                Mysql id anhand des nutzers auslesen und nächste/letzte erhalten?
                                Hey, ich habe ein kleines Logik Problem und wollte mal fragen ob mir jemand dabei helfen kann.

                                Ich mag aus meiner Datenbank eine Nachricht auslesen. Diese hat folgende werte [id, user_id, text].
                                Nun rufe ich anhand der id [5] die nachricht von dem Benutzer [2] auf. Dieser Benutzer...
                                23.09.2021, 17:00
                              Lädt...
                              X