# Hover bei Text Link soll Bild in Div anzeigen



## gnuisnotunix (4. August 2009)

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 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>
```


----------



## Maik (4. August 2009)

Hi.





gnuisnotunix hat gesagt.:


> Mit JS will ichs nicht lösen.


Mit CSS ist es in dieser Konstellation technisch aber nicht möglich.

Javascript basierte Bildergalerie dürfte dir hier weiterhelfen.

mfg Maik


----------



## queicherius (4. August 2009)

Maik hat gesagt.:


> Hi.Mit CSS ist es in dieser Konstellation technisch aber nicht möglich.
> 
> mfg Maik



Geht das nicht so:


```
#navi1 a .showcase {
display: none;
}

#navi1 a:hover .showcase {
display: block;
}
```

Dann musst du aber für jedes Bild eine eigenes Div erstellen und das mit "postition" an die richtige Stelle machen.


----------



## Maik (4. August 2009)

@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


----------



## gnuisnotunix (4. August 2009)

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...


----------



## Maik (4. August 2009)

Mit der richtigen Struktur funktioniert das  so:

```
<a href="#nogo" class="linkA">industry<span><img src="pfad/zur/grafik.jpg"></span></a>
```


```
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:

```
a.linkA span { 
display:none; 
position:absolute;
top:10px;
right:10px;
}
```

mfg Maik


----------



## gnuisnotunix (4. August 2009)

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!


----------



## Maik (4. August 2009)

gnuisnotunix hat gesagt.:


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


Zeig mal bitte deinen aktuellen HTML- und CSS-Code.

mfg Maik


----------

