XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Bildwechsel an anderer Stelle (http://xhtmlforum.de/showthread.php?t=50223)

joekuelue 05.02.2008 12:06

Bildwechsel an anderer Stelle
 
Hallo.

Als Newbie habe ich eine für euch wahrscheinlich einfache Frage.

Ich möchte in der Navigationsleiste beim hover eines Text-Links oder auch eines Grafik-Links an einer anderen Stelle auf der Seite ein Bild/Foto erscheinen lassen. Wie bekomme ich das mit CSS hin?

Danke schon mal für eure Mühe.

joekuelue

banane234 05.02.2008 13:02

Als erstes musst du das Foto im HTML-Quelltext innerhalb des Verweises plazieren:

<div id="bild">
<a class="verweismitbild" href="irgendwas.html"><img src="bild.jpg" alt="Schönes Bild" /></a>
</div>

Dann notierst du im Stylesheet:

#bild a img {
display:none;
}

#bild a:hover img {
display:block;
position:fixed;
}


Dann wird das Bild immer angezeigt, wenn du mit dem Mauszeiger über das Bild fährst. Du must im Stylesheet allerdings noch die Position des Bildes angeben.

paracelsus 05.02.2008 13:31

Zitat:

Zitat von joekuelue (Beitrag 370372)
Hallo.

Als Newbie habe ich eine für euch wahrscheinlich einfache Frage.

Ich möchte in der Navigationsleiste beim hover eines Text-Links oder auch eines Grafik-Links an einer anderen Stelle auf der Seite ein Bild/Foto erscheinen lassen. Wie bekomme ich das mit CSS hin?

Danke schon mal für eure Mühe.

joekuelue

Wenn das Bild an ganz anderer Stelle erscheinen soll, wirst Du Javascript benötigen.
Ansonsten informiere Dich über Nachbarselektoren.

heiko_rs 05.02.2008 13:43

Nein, wenn das Bild innerhalb von a steht, ist es kein Problem, es per position: absolute; überall erscheinen zu lassen (position: fixed; hat nicht viel Sinn, da es der IE < 7 nicht versteht).

paracelsus 05.02.2008 14:04

Stimmt, ich musste es allerdings erst nachbauen, um es zu glauben...
Danke.


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:15 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019