nicht angemeldet
CSS-Hover: Grössenänderung bei Bildern?
Hallo, ich hab da ein kleines Experiment gebastelt, welches aber nur im IE funktioniert -Mozilla, Firefox und Opera lässt das Beispiel völlig kalt. Gegeben ist ein JPEG-Bild mit den Dimensionen 256x256, welches aber zunächst nur mit der Grösse 128x128 angezeigt wird. Fährt man nun über das Bild, soll es sich im DIV auf 256x256 aufblasen, idealerweise soll sich Text, der den Container umfliesst, dynamisch mitändern.
Ich hab das so gelöst, daß ich dem Container erst einmal die 128x128 Grösse verpasse und dem Bild 100% zuweise, welches sich beim Mouseover entsprechend ändert, da der Container dann doppelt so gross wird. Klappt aber wie gesagt nur im IE, der Code:
<HTML>
<HEAD>
<STYLE>
.imgover {width:128px;height:128px;text-align:center;}
.imgover img {width:100%;height:100%;border:1px solid #000000;}
.imgover a:hover {width:256px;height:256px;}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="imgover">
<A HREF="#"><IMG SRC="bild.jpg" ALT=""></A>
<SMALL>© Copyright</SMALL>
</DIV>
</BODY>
</HTML>
Was mache ich verkehrt oder geht es am Ende gar nur im IE? Ich möchte das nämlich ohne Javascript realisieren...
Gruß Christian
PS: der Text unterm Bild scheint beim Mouseover im IE nicht korrekt zu zentrieren, woran könnte das liegen?
-
Hallo Christian,
Was mache ich verkehrt oder geht es am Ende gar nur im IE? Ich möchte das nämlich ohne Javascript realisieren...
Erstmal solltest du valide(r) schreiben. Das hier:
<STYLE>
.imgover {width:128px;height:128px;text-align:center;}
.imgover img {width:100%;height:100%;border:1px solid #000000;}
.imgover a:hover {width:256px;height:256px;}
</STYLE>Ist kein korrektes HTML. Erst recht nicht ohne DOCTYPE.
Zweitens bringt es nichts, wenn du nur die Größe des Ankers veränderst. Wenn du dem Bild per CSS die Größenangabe zugewiesen hast, reicht es, sie mit
.imgover a:hover img { width:256px; height:256px; }
zu ändern.
Liebe Grüße,
David-
Hallo David,
danke für den Tip, ja ich hab den Doctype und den Style-Typ vergessen, habs nur schnell hingebastelt. Aber wenn ich das so mache wie Du schreibst, geht es nun im Mozilla, Firefox und Opera, aber nicht mehr im IE... *lol*
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">
.imgover {text-align:center;}
.imgover img {width:128px;height:128px;border:1px solid #000000;}
.imgover a:hover img {width:256px;height:256px;}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="imgover">
<A HREF="#"><IMG SRC="bild.jpg" ALT=""></A><BR />
<SMALL>© Copyright</SMALL>
</DIV>
</BODY>
</HTML>Wie bringen wir das dem IE nun wieder bei?
Gruß Christian
-
Haha, ich habs doch noch gelöst, beim IE muss man andersherum denken. Man muss zusätzlich die Grösse des DIV-Containers ändern :-p Danke für die Hilfe!
Gruß Christian
Der Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<STYLE TYPE="text/css">
body {font-size:0.8em;font-family:Tahoma;}
.text {width:60%;text-align:justify;}
.imgover {float:left;margin-right:10px;text-align:center;background-color:#000000;border:1px solid #000000;}
.imgover a {text-decoration:none;color:#FFFFFF;}
.imgover a:hover {width:256px;height:256px;}
.imgover img {width:128px;height:128px;border:0;}
.imgover a:hover img {width:256px;height:256px;}</STYLE>
</HEAD>
<BODY>
<DIV CLASS="text">
<DIV CLASS="imgover">
<A HREF="#"><IMG SRC="bild.jpg" ALT=""><BR /><SMALL>© Copyright</SMALL></A>
</DIV><P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer placerat. Pellentesque sed ipsum vitae nibh venenatis dignissim. Nulla sed velit ut quam hendrerit fermentum. Cras lobortis egestas lacus. Fusce imperdiet pretium pede. Phasellus posuere. Aliquam quis leo at odio auctor iaculis. Aliquam quis dui. Aenean in erat. Integer mi risus, egestas ut, facilisis at, aliquet vitae, odio. Phasellus quam sem, convallis eget, porttitor ac, molestie vel, magna.</P>
<P>Vestibulum interdum, risus vitae sollicitudin molestie, orci urna ultricies nulla, vel euismod nulla eros sodales libero. Donec tortor lectus, rhoncus lacinia, sollicitudin ac, mattis at, ipsum. Donec cursus ullamcorper est. Nunc velit massa, vulputate non, tempor facilisis, auctor eget, massa. Donec suscipit malesuada dolor. Vivamus eget lorem. Suspendisse tellus lacus, mollis in, interdum eu, pulvinar non, pede. Sed eget lacus. Maecenas consectetuer condimentum nibh. Suspendisse urna turpis, dictum quis, commodo et, blandit sit amet, turpis. Nulla facilisi. Sed nibh ligula, ultricies id, tristique sed, posuere et, erat. Morbi pede wisi, varius vitae, aliquet quis, varius aliquet, metus. Integer ut dolor. Fusce laoreet. Curabitur eros libero, sollicitudin a, consequat in, tempus tempus, enim. Phasellus condimentum sollicitudin magna.</P></DIV>
</BODY>
</HTML>
-
Hi,
body {font-size:0.8em;font-family:Tahoma;}
.text {width:60%;text-align:justify;}
.imgover {float:left;margin-right:10px;text-align:center;background-color:#000000;border:1px solid #000000;}Auch wenn molily gleich wieder meckert: float erfordert zwingend die Angabe einer expliziten Breite.
.imgover a {text-decoration:none;color:#FFFFFF;}
.imgover a:hover {width:256px;height:256px;}a ist (wenn man die display-Eigenschaft nicht ändert) ein non-replaced-inline-Element. Non-replaced-inline Elemente sind immer so groß wie es ihr Inhalt erfordert. width und height müssen für diese ignoriert werden.
<P>Lorem ipsum dolor [zig Zeilen Blindtext]
Wozu postest Du hier massenweise Blindtext? Insbesondere wo die Absätze überhaupt nichts mit dem Problem zu tun haben.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-