Hallo Experten,
ich wende mich etwas verzweifelt an Euch, in der Hoffnung das jemand den Fehler findet.
Ich habe auf unserer Seite vom Weingut, die Weinflaschen als kleine Grafik dargestellt. Diese möchte ich beim Überfahren mit der Maus, gerne per Hoover-Effekt vergrößtert darstellen.
Hierzu bin ich innerhalb der HTML-Datei wie folgt vorgegangen:
<div id="content">
<h2><img src="images/ill_title.jpg" alt="Weingut Kurth" width="63" height="20" />Unsere Weinkarte </h2>
<p>
Unser Angebot umfasst derzeit vier trockene Rotweine. Jeder mit seiner besonderen Note und dem eigenen Geschmack. Unsere Preisliste steht auch als PDF-Download zur Verfügung. <a href="preisliste.pdf" target="_blank">Zur Preisliste</a><br> <font size="-2">(kostenloser PDF-Reader notwendig)</font>.
</p>
<p>
<table width="100%">
<tr>
#-- hier geht es dann los, mit dem Anzeigen des Bilder --
<th rowspan="2" height="150px" valign="top"><li><a href="#"><img src="images/parat_fl.jpg" class="left" alt="Weingut Kurth, 53474 Ahrweiler"><img scr="images/parat_big.jpg" alt"Parat jemaat" class="gross"></a></li> </th>
<td><img src="images/parat.jpg"></td>
</tr>
<tr>
<td valign="top">2007er Rotwein<br>
Cuvèe <br>
Qualitätswein b. A. </td>
</tr>
Und innerhalb der css habe ich den „content“ container wie folgt definiert:
#content {
margin: 0em 160px 20px 160px;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}
#content li {
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
position: realtive;
}
#content img {
width: 150px;
height: 300px;
display: block;
}
#content a .gross {
display: none;
}
#content a:hover .gross{
width: 250px;
height: 300px;
display: block;
position: absolute;
top: -50px;
left: -50px;
z-index: 1;
background: #fff;
}
#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}
Dennoch wird mir beim Überfahren mit der Maus, nur ein großes, weißes Kästchen angezeigt. Das vergrößterte Bild ist nicht zu sehen.
Danke für die Hilfe!