nicht angemeldet
Grafik einblenden bei mouseover bzw. hover
1 0
0
Grafik einblenden bei mouseover bzw. hover
Hallo,
Ich möchte, wenn man mit der Maus ein Foto überfährt, das dann ein anderes Bild angezeigt wird.
z.B:
angezeigt wird Thomas_thumb.jpg
und bei wenn man mit der Maus drauf ist, soll Thomas.jpg (selbes Bild größere Auflösung) angezeigt werden, bis man die Maus eben wieder runterbewegt.
Ich hab auch schon ein wenig gesucht, aber wenn ich das Ganze mit css realisiere, dann - jedenfalls meine ich es so verstanden zu haben - werden immer beide Bilder beim Aufbau der Webseite geladen. Was ja bei mehreren Grafiken die dann auf jeweilige große jpg-Dateien verlinken, sehr unvorteilhaft ist.
Und das was ich noch gefunden habe, war javascript, jedoch ist es da ja so, dass relativ viele auch javascript abschalten, von daher wäre mir es lieber, wenn ich das irgendwie anders realisieren kann.
www.fdp-ottobrunn.de --> Kommunalwahl 2008 anklicken
Dort sollen eben die Passfotos bei mouseover/hover/...? durch die schon verlinkten Fotos (zur Zeit angezeigt in einem komplett neuen Fenster) ersetzt werden.
(Wenn möglich sogar so, dass sich das Tabellenformat nicht ändert, die eingeblendete Grafik sozusagen über die Tabelle gelegt wird.)
Ist das irgendwie zu realisieren?
Möglichst für alle gängigen neueren Browser!
-
Hi,
es gibt mehrere Möglichkeiten bei CSS um die Bilder zu laden.
Wenn du im CSS-Code beim Hovern ganz normal als Bildverweis den Pfad zum zweiten Bild angibst, wird dieses auch erst in dem Moment geladen, wo du mit der Maus über dein Thumbnail fährst.
Siehe z.B. hier: http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm#a4
Alternativ kann man - um eben ein Nachladen zu verhindern (weil das z.B. bei Grafiken in Menüs sonst unschöne Flackereffekte gibt) - beide Grafiken in einem Bild zusammenfassen. D.h. du hast nur eine einzige Grafik, auf der beide Bilder vorhanden sind. Z.B. in der linken Hälfte Bild #1 und rechts Bild #2.
Im Grundzustand siehst du dann nur die linke Hälfte vom Bild wo sich Abbildung #1 befindet (wäre in deinem Fall das Thumb), beim Hovern wird das Bild dann lediglich so verschoben, dass Abbildung #1 aus dem Blickfeld rückt, und Abbildung #2 zu sehen ist.
Sinnvoll ist das i.d.R. natürlich nur, wenn die beiden Bilder gleich groß sind.
Mit dem code aus obigem Link sähe das so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Rollover mit CSS - Beispiel 5</title> <style> a { display:block; background-image:url(button.gif); width:120px; height:30px } a:hover { background-image:url(button.gif); background-position: 0px -30px; } </style> </head> <body> <h1>Bild-Button mit CSS</h1> <p><a href="#"> </a></p> </body> </html> ~~~damit würde das Bild beim Hovern als um 30 Pixel nach unten geschoben (dazu brauchst du dann eben aber ein 60 Pixel großes Bild, wo in der unteren Hälfte das Standardbild ist und in der oberen das Hoverbild).-
[quote]Wenn du im CSS-Code beim Hovern ganz normal als Bildverweis den Pfad zum zweiten Bild angibst, wird dieses auch erst in dem Moment geladen, wo du mit der Maus über dein Thumbnail fährst.[/quote]
Hm, klappt nicht (ist bestimmt noch was falsch bei mir).
www.fdp-ottobrunn.de/1.html
Quelltext:
<style type="text/css"> a img {border : 0 none;} #Keller { display:block; background-image:url(/Bilder/Wahl08/Keller_Axel_kl.jpg);} #Keller:hover { background-image:url(/Bilder/Wahl08/Mc_Kie_Thomas_kl.jpg); </style> </script> </head> <body> <table border="0" cellspacing="10" cellpadding="0" width="100%" class="bg0" > <tr > <table style="table-layout:fixed" border="0" cellspacing="3px" cellpadding="3px" class="n09"> <td class="b11" colspan="5" align="center"> Kandidaten der FDP für die Kommunalwahlen </td> <tr> <th style="type:b11; width:80px;" class="infoh">Bild</th> <th style="type:b11" class="infoh">Name, Titel</th> <th style="type:b11" class="infoh">Vorname</th> <th style="type:b11" class="infoh">Beruf</th> <th style="type:b11; width:35px" class="infoh">Alter</th> </tr> <tr> <td> <a href="/Bilder/Wahl08/Keller_Axel.jpg" target="_blank"> <img src="/Bilder/Wahl08/Keller_Axel_kl.jpg" width="80px" name="Dr. Axel Keller" alt="Dr. Axel Keller" id="Keller"> </a> </td> <!-- Hier link für img --> <td class="info1">Keller, Dr.</td> <td class="info1">Axel</td> <td class="info1">Diplom-Informatiker</td> <td class="info1">55</td> </span> </tr> </table> </body> </html>Wenn ich die Maus drüber fahre, passiert gar nix.
Nochmal zur Erinnerung, es sind unterschiedlich große Bilder, also nicht wie im Beispiel ein Menü mit Grafikhintergrund sondern mehr was wie ein Fotoalbum.
Viele Grüße
Thomas Mc Kie
-
Liebe(r) Mc,
Hm, klappt nicht (ist bestimmt noch was falsch bei mir).
ja, nämlich
#Keller:hover { background-image:url(/Bilder/Wahl08/Mc_Kie_Thomas_kl.jpg);
hier:_____________________________________________________________________^^^^
</style>
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Danke an die Helfer!
Hab jetzt eine funktionierende Version
<style type="text/css">
a img {border : 0 none;}
#Keller { display:block;
background-image:url(/Bilder/Wahl08/Keller_Axel_kl.jpg); width:78px; height:105px;}
#Keller:hover {
background-image:url(/Bilder/Wahl08/Keller_Axel.jpg); width:241px; height:323px;}
</style>
</head>
<body>
<td id="Keller"></td>
</body>
</html>Gibt es noch irgendwie eine Möglichkeit, dass das große Bild nicht an den vorgegebenen Bereich gebunden ist, sozusagen über die restliche Tabelle einfach rauswächst?
Wie wenn es ein popupbildchen bei mouseover wäre, oder ist das mit css eben nicht möglich und ich muß mit der Tabellenverzerrung leben?-
Ein wenig unübersichtlich finde ich das Forum hier, hab meine eigene Nachfrage erstmal gar nicht gefunden:
Hallo,
jemand noch einen Tipp, wie ich es hinbekomme das die "aufpoppenden" Grafiken alles überlagern (also nimmer im Hintergrund sind, aber auch nicht das Tabellenlayout sprengen?)
So wie es auch komischerweise im unteren Bereich funktioniert! (Aber wieso weiß ich nicht! Und auch nicht, wie ich die Bilder dann in den Vordergrund bekomme, damit der Text nicht im Bild ist).
Viele Grüße
Thomas Mc Kie
-
-
-
-
-
Hallo,
jemand noch einen Tipp, wie ich es hinbekomme das die "aufpoppenden" Grafiken alles überlagern (also nimmer im Hintergrund sind, aber auch nicht das Tabellenlayout sprengen?)
So wie es auch komischerweise im unteren Bereich funktioniert! (Aber wieso weiß ich nicht! Und auch nicht, wie ich die Bilder dann in den Vordergrund bekomme, damit der Text nicht im Bild ist).
Viele Grüße
Thomas Mc Kie