Positionierung von Bildern

viking

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

HTML

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

Alles anzeigen

Bleistift

Code

div#box_1 img:hover {
    width: größerebreite;
    height: größerehöhe;
    top...
}

Oder du gibst deinen Divs eine Position und Größe an und stellst das Bild auf width="100%" und height="100%" somit passt sich das Image dann automatisch an.

Das Ding ist das das echt unsauber aussehen kann
Ich würde dafür JavaScript nehmen, das Bild einem onmouseover oder onclick zuweisen und dementsprechend über JS ein neues Element erstellen was du in den Vordergrund stellst
Wenn absolute nicht funzt, versuch es mal mit relative

Friedel

Hallo.

Du hast das ganze imho recht umständlich mit vielen Divs aufgebaut. Das wäre bestimmt auch einfacher gegangen. Außerdem verschachteslst du unnötigerweise auch noch Textabsätze in deine Divs. Aber darum geht es ja nicht.

Außerdem hast du ein paar Fehler in deinem Quellcode. Laut Doctype soll das Html4.1 sein.

HTML

<img ... alt="bild"/>

Aber in allen Bildern benutzt du einen schließenden Slash nach XHtml-Syntax. Das darf man in Html nicht.

Dass dein großes Bild vor dem kleinen ist, erreichst du mit z-index. Das große Bild muss einen höheren z-index bekommen, als das kleine.

Ich empfehle als Lektüre http://www.ohne-css.gehts-gar.net/0012.php. Da geht es zwar nicht speziell um Fotos, aber natürlich kann man in die Tooltips auch Fotos machen und als Trägerelement ein verkleinertes Bild benutzen.

Tags