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.714   Beiträge: 429.207   Mitglieder: 28.475   Aktive Mitglieder: 45
                              Willkommen an unser neuestes Mitglied, sw2.

                              Online-Benutzer

                              Einklappen

                              229 Benutzer sind jetzt online. Registrierte Benutzer: 5, Gäste: 224.

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

                              Die neuesten Themen

                              Einklappen

                              Die neuesten Beiträge

                              Einklappen

                              Lädt...
                              X