ich mir jetz eine Funktion auf die hp gesetzt, die einen Fehler beinhaltet, den ich ohne hilfe nicht gelöst bekomme. Ich saß nun schon einige stunden daranm, aber ohne erfolg. nun erhoffe ich mir hier etwas Hilfe.
Zum Problem:
Ich habe eine funktion, die wenn man mit der Maus ein kleines Bild beührt, dass sich ein größeres öffnet. Nun ist meine Textseite aber recht lang. Wenn ich also nach unten scrolle und will diesen effect dort sehen, geht es nicht. Ok, es geht shon, aber es wird nur am anfang der seite angezeigt (ganz oben).
Nun zu meiner Frage:
Wie kann ich es hinbekommen, dass sich die größeren Bilder so in etwa neben den jeweiligen kleineren öffnen?
Wer eine Idee hat, für den lasse ich mal den css code da.
und hier mal die site, wo es nicht geht, bzw. wo ihr es euch ansehen könnt. „PatschWorks“
ich würde dir generell eine andere variante empfehlen. auf das bild klicken und dann öffnet sich das bild in groß.
das geht mit lightbox. einfach mal bei google suchen. wird von vielen seiten verwendet und sieht auch gut aus.
Moin,
[html]
.ienlarger a:hover span {
display:block;
top: 300; /*Positsion vom Fenster,Man kann es ändern */
left: 420px; z-index: 100;
}
[/html]
Die Lösung steht im Kommentar. Wenn Du den den z-/y-index änderst, kannst Du die Position der Grafiken ändern. Ich meine mich zu entsinnen, dass ich eine derartige (sehr schlanke) Lösung auf meiner Site hatte und die Hoverpics einzeln positioniert habe.
die „top 300;“ bewirkt leider nichts. Wenn ich auf meiner Textseite ganz oben bin,ist das bild 300 von oben entfernt. Und das scheint immer
so zu sein. wenn ich jetzt etwas herunter scrolle, wir das bild an der gleichen stelle dargestellt.
wie geht es denn richtig mit dem z-y-index einzustellen?
Sorry dass ich erst so spät wieder da bin, aber ich bin jetzt am richtigen Rechner. Auf meiner Seite habe ich es wie folgt gelöst:
HTML-Teil:
[html]
blabla bla Text bla blala bla
[/html]
Wenn Du „Text“ gegen das gewünschte kleine Image austauschst, sollte der gewünschte Effekt erreicht sein.
a.hoverpic:hover span
{ visibility: visible;
border:10px ridge green;
color: #000000;
background: #FFFFFF;
text-decoration: none; }
[/html]
Durch die absolute Positionierung bleibt das Bild auch tatsächlich da, wo man es haben will. Auch beim Scrollen. Erst wenn Du das Bild wieder verlässt, klapt es zu. Eigentlich habe ich meine Probs mit der absoluten Positionierung, aber diese Variante funzt wirklich erste Sahne.
Ich weiss leider nicht mehr, wie ich an den Code gekommen bin, aber ich denke, es war hier aus dem Forum.