carsten schlichting: mit : hover ein bewegliches gif einspielen

Hallo zusammen:

habe folgende css klasse zum Testen definiert.

a:hover{background-image:url(images/austdrauf.gif)}

hatte die Hoffnung, dass ich durch css beim überfahren mit der maus ein animiertes gif-bild einblenden und starten könnte.

leider ist dem nicht so. Was ich sehr schade finde. alternativ hätte ich  ein javascriptscript- das funktioniert.
Aber das hier, wär doch total elegant-oder.

hab ich vielleicht ein fehler gemacht?

Liebe Grüße

carsten

  1. Hallo,

    a:hover{background-image:url(images/austdrauf.gif)}
    hatte die Hoffnung, dass ich durch css beim überfahren mit der maus ein animiertes gif-bild einblenden und starten könnte.
    leider ist dem nicht so. Was ich sehr schade finde. alternativ hätte ich  ein javascriptscript- das funktioniert.
    Aber das hier, wär doch total elegant-oder.

    Genau das habe ich auch gemacht, siehe Kopf dieser Seite und es funktioniert wunderbar. (Ich habe es allerdings keinem Link mitgegeben sondern einem div, was dazu führt, dass es im IE nicht geht, bei einem Link muss das aber gehen.)

    Vielleicht musst du noch die position des Bildes festlegen und ob es sich wiederholen soll, etc.

    Grüße
    Jeena Paradies

    --
    Vlona Koorbash Grafiken - PDF-Magazin mit Grafiken meiner Frau erschienen | Jlog | Gourmetica Mentiri
    1. Hi Jeena

      naja der IE ist aber ganz schön wichtig find ich.
      Also die gifs müssen funktionieren, weil sie es auch mit dem javascript tun.

      Aber mit den Positionen probier ichs mal.

      danke++

      und grüße

      carsten

      1. Hallo,

        naja der IE ist aber ganz schön wichtig find ich.
        Also die gifs müssen funktionieren, weil sie es auch mit dem javascript tun.

        Ach wo wer benutzt denn heutzutage noch den IE bei den ganzen Sicherheitslöchern und wo es doch so gute andere Browser gibt?

        Aber mit den Positionen probier ichs mal.

        Wenn es ein Link ist dann wird es auch im IE gehen, der versteht ja hover bei Links.

        Grüße
        Jeena Paradies

        --
        Vlona Koorbash Grafiken - PDF-Magazin mit Grafiken meiner Frau erschienen | Jlog | Gourmetica Mentiri
        1. 80% haben anscheinend den IE.;-)

          naja hab das jetzt mit den Positionierungen probiert. Und zwar auch so, dass das Bild versetzt wird. und da sah man, das die browser schon das bild wechselten, aber leider die Gif animation nicht starteten.

          schade

          aber trotzdem danke

          Carsten

          1. Hallo,

            naja hab das jetzt mit den Positionierungen probiert. Und zwar auch so, dass das Bild versetzt wird. und da sah man, das die browser schon das bild wechselten, aber leider die Gif animation nicht starteten.

            Das muss doch gehen, habe ich doch selbst schon oft gemacht und auch oft gesehen. Zeig mal deinen Code her am besten mal hochladen.

            Bei mir funktioniert das nämlich sehr gut http://jeenaparadies.net/t/self/carsten.html, ich habe aber keinen IE zum Testen da, aber ich bin fest davon überzeugt, dass es da auch geht!

            Jeena Paradies

            --
            Vlona Koorbash Grafiken - PDF-Magazin mit Grafiken meiner Frau erschienen | Jlog | Gourmetica Mentiri
            1. Hallo ihr zwei,

              Bei mir funktioniert das nämlich sehr gut http://jeenaparadies.net/t/self/carsten.html, ich habe aber keinen IE zum Testen da, ...

              Ich schon. Momentan einen englischen IE5.5 SP2. Und ich kann bestätigen, dass das ganz fabelhaft klappt. Ich war erst etwas irritiert, als mich auf der Beispielseite nur ein "blah" angrinste - aber als ich mit der Maus draufzeigte, erschien plötzlich ein Hintergrundbild mit etlichen undefinierbaren Farbfeldern, die eifrig vor sich hinflimmern. Star Treck lässt grüßen. ;-)

              aber ich bin fest davon überzeugt, dass es da auch geht!

              Na, und ich erstmal!

              So long,

              Martin

            2. danke noch mal

              Dein Code funktioniert echt. Auch im IE.

              hier ist der code auszug:

              <style type="text/css">
                 <!--

              a:hover {
                  background-image: url(images/austdrau.gif);
                  position: absolute;
                  top: 20px;
                  left: 200px;}
                 .nr3  {
                  position: absolute;
                  top: 20px;
                  left: 200px;}
                 -->

              <html>

              <a href="catalog/index.php"> <img src="images/austnorm.gif" border="0" class="nr3"></a>

              </html>

              eigentlich ist das ja nichts kompliziertes.

              Mich würd es wirklich interessieren, wie du es gemacht hast.
              was jetzt noch eine verbesserung wär,ist wenn das "blah" beim hover weggehen würde -praktisch verdeckt werden würde. Vielleicht mit dem z-index dann.
              eine weitere einschrenkung von css zu javascript ist auch, dass das gif nicht zu Ende abgespielt wird, wenn man mit der maus die Fläche verläßt.

              grüße
              carsten

              1. Hallo,

                Dein Code funktioniert echt. Auch im IE.

                Guck doch mal rein wie ich das gemacht habe, ich habe alles nur mit Hintergrundbildern gemacht, also ohne ein <img>.

                Das mit dem Verschwinden ist so ne Sache, das würde in allen anderen browsern funktionieren, wen du um das blah noch ein <span> aber innerhalb des Links legen wirdest, dieses dann bei span:hover { display: none; } ausblenden würdest. Man könnte auch vielleicht a:hover span { display: none; } probieren, aber ich glaube das wird der IE nicht verstehen, und ich weiß nicht mal ob es die anderen Browser verstehen würden.

                Grüße
                Jeena Paradies

                --
                Vlona Koorbash Grafiken - PDF-Magazin mit Grafiken meiner Frau erschienen | Jlog | Gourmetica Mentiri
                1. ok ich werds probieren.

                  was bedeutet denn:

                  no-repeat 0px -80px  ??   vor allem 0px-80px

                  Vielen Dank und Grüße

                  carsten

                  1. Hallo,

                    o-repeat 0px -80px  ??   vor allem 0px-80px
                    Siehe http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position und minus bedeutet einfach ein negativer Wert. Aber eine Beschreibung ist doch im Quellcode meiner Datei enthalten.

                    Grüße
                    Jeena Paradies

                    --
                    Vlona Koorbash Grafiken - PDF-Magazin mit Grafiken meiner Frau erschienen | Jlog | Gourmetica Mentiri
                    1. ach so... hab gedacht, das das no-repeat mit dem gif zu tun hätte. aber klar jetzt weiß ich wieder.

                      Die Beschreibung habe ich nicht mit runterladen können. da war nur der Code??? vielleicht ist die sicherheitshalber gelöscht worden?

                      kannst du den eventuell über das Forum posten? -sorry Weiß nicht wie ich die seite anders runterladen kann?

                      Bin gerade dabei alles zusammen zu basteln.

                      was macht denn der META-content? kann das eventuell auch an diesen Dingen liegen oder an http-equiv, dass das bei mir nicht klappen wollte?

                      1. Hi carsten!

                        Die Beschreibung habe ich nicht mit runterladen können. da war nur der Code??? vielleicht ist die sicherheitshalber gelöscht worden?

                          a {  
                           display: block;  
                           width: 320px;  
                           height: 80px;  
                           background: url(header_bg.gif) 0 -80px no-repeat;  
                           /* das 80px ist dazu gedacht dass man das Bildchen aus dem sichtbaren Bereich herausschiebt  
                              es aber dennoch geladen wird. */  
                          }  
                          a:hover { background-position: top left; }  
                          /* hier wird es beim hovern in den sichtbaren Bereich geschoben, ist aber schon geladen  
                             deshalb ist es auch sofort da, ohne verz&ouml;gerung. */  
                          
                          
                        <a href="">blah</a>
                        

                        Mit Beschreibung meinte Jeena die Kommentare.

                        MfG Hopsel

                        --
                        "It's amazing I won. I was running against peace, prosperity, and incumbency."
                        George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
                        Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
                        1. dankeschön

                          habe im IE die seite gespeichert, und die kommentare sind nicht mit runtergeladen worden - komisch?

                          Anders kann man die seite doch nicht runterladen oder?

                          carsten

                          1. hi danke an alle

                            werd jetzt ins bett gehen, mir brummt der kopf.

                            aber eigentlich kann man schon sagen, das bilder mit css so direkt nicht ausgetauscht werden können oder?

                            viele grüße von mir

                            carsten

                            1. Hi carsten!

                              aber eigentlich kann man schon sagen, das bilder mit css so direkt nicht ausgetauscht werden können oder?

                              Im Gegenteil. Ich finde, es ist der eleganteste und beste Weg.

                              MfG Hopsel

                              --
                              "It's amazing I won. I was running against peace, prosperity, and incumbency."
                              George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
                              Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
                2. Hallo Jeena.

                  Man könnte auch vielleicht a:hover span { display: none; } probieren, aber ich glaube das wird der IE nicht verstehen, und ich weiß nicht mal ob es die anderen Browser verstehen würden.

                  Warum sollten sie das nicht verstehen?

                  Einen schönen Dienstag noch.

                  Gruß, Ashura

                  --
                  Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
                  30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
                  Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                  [Deshalb frei! - Argumente pro freie Software]
                  1. Hallo,

                    Warum sollten sie das nicht verstehen?

                    Ich weiß nicht warum sie das nicht verstehen sollten, ich wusste aber auch nicht ob sie das verstehen, da ich gerade am "vom Computer gehen" war und keine Zeit zum nachschlagen oder Testen hatte ;-)

                    Grüße
                    Jeena Paradies

                    --
                    Vlona Koorbash Grafiken - PDF-Magazin mit Grafiken meiner Frau erschienen | Jlog | Gourmetica Mentiri