Hover bei Text Link soll Bild in Div anzeigen

G

gnuisnotunix

Mitglied
Hi zusammen,

ich möchte folgendes berwerkstelligen:

Ich habe 2 nebeneinander liegende Div Boxen. In der linken ist lediglich Fließtext, welcher jedoch 2,3 Links enthält. Überfährt ein Besucher einer dieser Links, soll im rechten Container ein Bild angezeigt werden.

Bei Link A soll natürlich Bild A, bei Link B Bild B angezeigt werden usw.

Ich hab leider keine Idee wie das funktionieren könnte. Mit JS will ichs nicht lösen.

Hoffe ihr könnt mir helfen.

Hier mal mein HTML Code:

HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

#fliesstext
	{
	width:300px;
	float:left;
	border:2px solid #000000;
	padding:5px;
	margin:5px;
	}
#bild
	{
	width:225px;
	height:120px;
	border:3px solid #FF0000;
	float:left;
	margin-top:40px;
	}
</style>
</head>

<body>
<div id="fliesstext">
Lorem Ipsum is simply dummy text of the printing and typesetting <a href="#nogo" class="linkA">industry</a>. Lorem Ipsum has been the industry's standard dummy 
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into <a href="#nogo" class="linkB">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of <a href="#nogo" class="linkC">Letraset</a> sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker 
</div>
<div id="bild">

</div>


</body>
</html>
 
Zuletzt bearbeitet:
@queicherius: Grundsätzlich schon, aber schau dir bitte mal den HTML-Code an, wo sich der Link befindet, und wo das Bild angezeigt werden soll, und nenn mir mal dazu einen gebrauchsfähigen CSS-Selektor.

Dein Selektor erwartet ein Nachfolgeelement innerhalb des Links.

mfg Maik
 
Hallo zusammen,

an der Struktur kann ich gerne noch etwas ändern, sollte dies den Einsatz von CSS ermöglichen, was mir deutlich lieber wäre...
 
Mit der richtigen Struktur funktioniert das so:
Code: 
<a href="#nogo" class="linkA">industry<span><img src="pfad/zur/grafik.jpg"></span></a>
CSS: 
a.linkA span { display:none; }
a.linkA:hover span { display:block; }
a span img { border:none; }

Desweiteren hast du die Möglichkeit, das Bild an einer bestimmten Position anzuzeigen:
CSS: 
a.linkA span { 
display:none; 
position:absolute;
top:10px;
right:10px;
}

mfg Maik
 
prima, das ist das was ich gesucht habe! Danke schonmal.

Ein kleines Problem tut sich jetzt aber auf:

Ich hab den rechten Container schon mit einem Bild vorausgestattet und auch mit einem Hintergundbild versehen. Wenn ich nun über einen Link fahre, wird das neu darzustellende Bild hinter den Container gesetzt. Es muss aber "vor" den Container.

Geht das mit Z-Index? Wenn ja ts bei mir nicht bzw ich mache etwas falsch.

@ MAIK vielen vielen Dank schonmal für deine Hifle!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück