Guten Tag,
ich schlage mich schon länger mit einem CSS-Problem herum.
Ich möchte auf einer Seite kleine Vorschaubilder mit der hover-Funktion vergrößern.
Das ganze wäre auch kein Problem, wenn nicht die kleinen Bilder im dann grossen Bild sichtbar wären.
Ich möchte also, dass wenn ich über das kleine Bild mit der Maus fahre, daraus ein grosses Bild wird, und zwar im Vordergrund, ohne dass noch ein kleines Bild angezeigt wird. Die kleinen Bilder möchte ich nebeneinander und untereinander anordnen.
Mit der Positionierung: absolute klappt es eben nicht.
Gefallen würde mir, dass ich das grosse Bild in die Mitte der Seite platziere, immer an der gleichen Stelle – aber eben total im Vordergrund.
Kann mir da jemand helfen?
Zum besseren Verständnis habe ich den Code hier noch mal dargestellt.
Vielen Dank im voraus
Matthias
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL]http://www.w3.org/TR/html4/strict.dtd[/URL]">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>
Infobox</title><style type="text/css">
<!--img {
border:none;
}
#box_1{
position:fixed; top:20px;height:75px;width:100px;
}
#box_1 div{
display:none;
}
#box_1:hover div{
display:block;width:300px;position:absolute;top:20 px;left:20px;
}
#box_2{
position:fixed; top:20px;left:150px;height:75px;width:100px;
}
#box_2 div{
display:none;
}
#box_2:hover div{
display:block;width:300px;position:absolute;top:20 px;left:20px;
}
#box_3{
position:fixed; top:250px;height:75px;width:100px;
}
#box_3 div{
display:none;
}
#box_3:hover div{
display:block;width:300px;position:absolute;top:20 px;left:20px;
}
#box_4{
position:fixed; top:375px;height:100px;width:75px;
}
#box_4 div{
display:none;
}
#box_4:hover div{
display:block;width:300px;position:absolute;top:20 px;left:20px;
}-->
</style>
</head>
<body>
<div id="box_1"><a href="#"><img src="01klein.jpg" width="100" height="75" alt="bild"/></a>
<div><p><img src="01gross.jpg" width="1160" height="700" alt=""/></p></div></div>
<div id="box_2"><a href="#"><img src="03klein.jpg" width="100" height="75" alt="bild"/></a>
<div><p><img src="03gross.jpg" width="1160" height="700" alt=""/></p></div></div>
<div id="box_3"><a href="#"><img src="04klein.jpg" width="100" height="75" alt="bild"/></a>
<div><p><img src="Bilder/Test/04gross.jpg" width="1160" height="700" alt=""/></p></div></div>
<div id="box_4"><a href="#"><img src="05klein.jpg" width="75" height="100" alt="bild"/></a>
<div><p><img src="05gross.jpg" width="700" height="1160" alt=""/></p></div></div>
</body>
</html>