Hallo liebe Forengemeinde,
ich versuche mich dezeit an einem simpelsten Beispiel von DHTML. Ich möchte eine grundlegende Galeriefunktion programmieren, soll heißen die einzelnen Bilder sind in einer Reihe angeordnet und jedes Einzelne kann vergrößert werden indem der User mit der Maus darüber fährt. Um diese Funktion zu testen habe ich folgendes geschrieben:
CSS-Code:
.imgNormal {width:50pt; height:50pt; z-index:1; } /* Bild ohne Vergrößerung */
.imgGroß {width:150pt; height:150pt; z-index:2;} /* Bild mit Vergrößerung */
JavaScript-Funktion:
function Lupe(imgObj) {
if (imgObj.className == "imgNormal") {
imgObj.className = "imgGroß";
} else {
imgObj.className = "imgNormal";
}
}
HTML-Code:
Wenn ich nun über eines der Bilder fahre wird das betreffende zwar vergrößert, jedoch "verdrängt" es dabei sämtliche Nachbarelemente, ich möchte aber dass es über alle anderen "drübergelegt" (z-index) wird und sämtliche elemente ihre Position beibehalten.
Bin für jede Hilfe dankbar.
Liebe Grüße,
Aguire