nicht angemeldet
a:hover img { Bildchen wachse... }
Hi,
Ich würde gern ein Bild beim Mit-der-Maus-Drüberfahren vergrößern lassen,
hiermit fkt. das auch einigermaßen:
a:hover img { width:3em; height:3em; }
Problem dabei, die Größenangaben (ursprünglich hatte ich hier 150%
verwendet) beziehen sich ja dummerweise nicht auf das Bildchen, sondern
auf den umgebenden Text, so daß die Skalierung nur für 50x30 Pixel große
Bilder einigermaßen aussieht (aber nur deswegen für jedes Bild eine
eigene Klasse anzulegen - nö!).
Kennt jemand eine Möglichkeit das besser zu machen (sprich: ohne
Javascript)??
MsF,
milky
-
eigene Klasse anzulegen - nö!).
Kennt jemand eine Möglichkeit das besser zu machen (sprich: ohne
Javascript)??Naja besser ist so eine Sache für sich ... mir fällt da erstmal nur Flash ein aber für jedes Bild ne eigene Datei willst du ja auch nicht ... ich empfehle dir trotzdem Javascript zu nehmen auch wenn du es nicht willst, es ist zwar nicht das "bessere" aber das einfachste ...
Thorsten Beuth
-
hi
Problem dabei, die Größenangaben (ursprünglich hatte ich hier 150%
verwendet) beziehen sich ja dummerweise nicht auf das Bildchen'em' bezieht sich auf die Scriftgröße der Umgebung, '%' auf die etsprechenden Werte der übergeordneten Elemente. Du wirst also nicht umhin kommen die neuen Werte jeweils einzeln anzugeben.
Grüße aus Bleckede
Kai
-
Hi,
'em' bezieht sich auf die Scriftgröße der Umgebung, '%' auf die etsprechenden Werte der übergeordneten Elemente. Du wirst also nicht umhin kommen die neuen Werte jeweils einzeln anzugeben.
Wenn sich % also auf das übergeordnete Element bezieht, könnte ich dann
schlichterweise einfach einen DIV-Layer herum basteln, der zunächst die
Original-Größe des Bildchens bekommt und per :hover dadurch dann richtig
skaliert würde?MsF,
milky-
Hallo,
Wenn sich % also auf das übergeordnete Element bezieht, könnte ich dann
schlichterweise einfach einen DIV-Layer herum basteln, der zunächst die
Original-Größe des Bildchens bekommt und per :hover dadurch dann richtig
skaliert würde?Nein. Und das nicht nur weil du im <a> kein <div> legen darfst.
Du muss mit absoluten Werten arbeiten:
a.bild img { width:70px; height:22px; }
a.bild:hover { border:none; }
a.bild:hover img { width:210px; height:66px; }
und dann <a class="bild"><img></a>
das extra "a.bild:hover { border:none; }" ist für den IE. So machen der IE und Mozilla (nicht aber Opera 6 ) mit.Grüße
Thomas-
hi
das extra "a.bild:hover { border:none; }" ist für den IE. So machen der IE und Mozilla (nicht aber Opera 6 ) mit.
border-width:0; verstehen afaik alle.
Grüße aus Bleckede
kai
-
Hallo Kai,
das extra "a.bild:hover { border:none; }" ist für den IE. So machen der IE und Mozilla (nicht aber Opera 6 ) mit.
border-width:0; verstehen afaik alle.
Ich meinte nicht, dass Opera border:none; nicht verstehen würde, sondern dass Opera die "a:hover img { ... }" Sache nicht mitmacht.
Grüße
Thomas
-
-
-
-