Webstatt.org - Community seit 2006 - 2012 (2024?)

Bei Text hover Bild einblenden.

Avatar user-118
21.08.2006 04:52
Guten Morgen,

Es ist sicher Etwas ganz banales aber ich kriege einfach keine zufriedenstellende Lösung.

Also folgendes Szenario:

Ich habe mehrere Textlinks und daneben eine Box. In dieser Box soll je nachdem über welchen Textlink ich fahre ein anderes Bild angezeigt werden.
Die Position des Bildes ist immer die gleiche, es ändert sich lediglich das Bild.

Ist das irgenwie mit CSS zu realisieren ? Ich kriegs einfach nicht hin.

mfg Alex
Ich brauche keine Signatur
Avatar user-255
21.08.2006 10:03
Nope. Dazu müsste man mit CSS auf Elternelemente zugreifen können.. :-\
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
Avatar user-118
21.08.2006 13:37
Original von user-255
Nope. Dazu müsste man mit CSS auf Elternelemente zugreifen können.. :-\


Hilft also nur Javascript?
Ich brauche keine Signatur
Avatar user-294
21.08.2006 14:21
Naja, das würde ich nicht sagen. Man könnte beispielsweise einfach 2 Grafiken machen, einmal Textlink mit weißer Fläche und einmal mit Grafik daneben. Nachteil: Es sind keine Textlinks mehr.

Oder man macht eine Unordered List und formatiert die Aufzählungspunkte mit Grafiken bei hover.
user-332
21.08.2006 16:44
hi,

suchst du vll. sowas:
Beispiel #2

Hier der Link zu Erklärung: selfhtml


cu
bobby
Avatar user-118
21.08.2006 16:53
Jaein... Habe das auch schon vorher gefunden aber das sagt mir auch nicht zu.

Ich habe ein feste Position von einem Bild , darum verteilt sind Links. Bei einem Linkhover soll dann das dem Link entsprechende Bild angezeigt werden..

mfg Alex
Ich brauche keine Signatur
Avatar user-255
21.08.2006 19:11
Hab's nu doch fertig gebracht -- overflow ist das Zauberwort! lächeln

<html>

	<head>

		<style type="text/css">

			ul{padding-left:250px}

			ul li{height:2em;overflow:visible}

			ul img{display:none}

			ul a:hover+img{display:block}

			#li1 a:hover+img{margin:-2em 0 0 -250px}

			#li2 a:hover+img{margin:-4em 0 0 -250px}

		</style>

		<link rel="stylesheet" href="style.css" />

	</head>

	<body>

		<ul>

			<li id="li1">

				<a href="#">#li1</a>

				<img src="bild1" />

			</li>

			<li id="li2">

				<a href="#">#li2</a>

				<img src="bild2" />

			</li>

		</ul>

	</body>

</html>
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm