mit : hover ein bewegliches gif einspielen
carsten schlichting
- css
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
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
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
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
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
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
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
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
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
ok ich werds probieren.
was bedeutet denn:
no-repeat 0px -80px ?? vor allem 0px-80px
Vielen Dank und Grüße
carsten
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
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?
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ögerung. */
<a href="">blah</a>
Mit Beschreibung meinte Jeena die Kommentare.
MfG Hopsel
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
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
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
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
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