Mouseover effekt bei Bildergalerie (Problem)

[picturesworld]

Hallo liebe Community,

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"

Über Hilfe wäre ich sehr danbar.

LG

/** TESTGALERIE ANFANG **/



    <style type="text/css">



    /* Zomm Bild*/

    .ienlarger {
            float: left;
            clear: none;
            padding-bottom: 2px;
            padding-right: 2px;
    }

    .ienlarger a {
            display:block;
            text-decoration: none;
    }

    .ienlarger a:hover{
            position:static;
    }

    .ienlarger span img {
            border: 3px solid #FFFFFF;
              margin-bottom: 8px;
    }

    .ienlarger a span {
            position: absolute;
            display:none;
            color: black;
                text-decoration: none;
            font-family: Arial,
            Helvetica, sans-serif;
            font-size:18px;
             background-color: #735220;
            font-weight:normal;
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 30px;
            padding-left: 10px;   /*angaben  zum den großen Fenster*/
    }

    .ienlarger img {
    border-width: 0;
    }

    .ienlarger a:hover span {
            display:block;
            top: 300; /*Positsion vom Fenster,Man kann es ändern */
            left: 420px;        z-index: 100;



    }

    .resize_thumb {
            width: 150px;  /* Große vom Kleinen Bilder*/
            height : auto;
    }

    /*Ende Galerie*/


    




/** TESTGALERIE ENDE **/

 

[mustang]

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.

 

[picturesworld]

Hallo Mustang,

vielen Dank für deine reaktion und deiner Empfehlung.
Dennoch möchte ich gerne die jetztige variante nutzen.
Sie muss nur noch funktionieren :-).

LG

 

[lowsaxonian]

Moin,

.ienlarger a:hover span {
            display:block;
            top: 300; /*Positsion vom Fenster,Man kann es ändern */
            left: 420px;        z-index: 100;
}

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.

Grüße
low

 

[picturesworld]

huhu,

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?

LG

 

[lowsaxonian]

Moin nochmal,

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:

blabla bla <a class="hoverpic" href="#Vorschau">Text<span><img src="pics/bla2.JPG" title="Bild vom bla" alt="Bild vom bla" width="408" height="306"></span></a> bla blala bla

Wenn Du "Text" gegen das gewünschte kleine Image austauschst, sollte der gewünschte Effekt erreicht sein.

CSS-Teil:

a.hoverpic:hover    { background: #FFFFFF;
                           text-decoration: none; }

a.hoverpic span     { visibility: hidden;
                          position: absolute;
                          left: 20em;
                          margin-top: -4em;
                          padding: 0.5em;
                          text-decoration: none; }

a.hoverpic:hover span
                    { visibility: visible;
                      border:10px ridge green;
                      color: #000000;
                      background: #FFFFFF;
                      text-decoration: none; }

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.

Grüße
low

 

[picturesworld]

Hallo low,

ersteinmal musst du dich doch nicht entschuldigen, weils länger gedauert hat......

Wir machen es doch alle aus spaß an der freude :-).

Und nun mal für einsteiger *lach*
Der obere kleine code kommt in eine textseite und der untere in die css datei?
Kann ich das 1 zu 1 übernehmen?

In den oberen kleinen code mussich insgesamt 3 bilddateien angeben. sind dass
alles die gleichen?

Ich blicke da irgendwie überhaupt nicht durch......

Kann ich dir meine daten der hp geben, du machst mir ein beispiel rein, damit
ich das alles sehen kann? Das wäre für mich das leichteste....

Wenn du das nicht magst, kann ich auch verstehen!

LG

 

[lowsaxonian]

Moin,

den HTML-Schnipsel solltest Du eigentlich so wie er ist übernehmen können.

<p><a class="hoverpic" href="#Vorschau"><img src="http://i56.tinypic.com/fdwsgo.gif" title="black-Flowers 001" alt="black-Flowers 001" width="100" height="75"><span><img src="http://i56.tinypic.com/fdwsgo.gif" title="black-Flowers 001" alt="black- Flowers 001" width="400" height="300"></span></a></p>

Ich hab den anker-tag mal in ein <p> gesetzt, wenn Dir ein <div> lieber ist, spielt das keine Rolle.

Aus dem CSS hab ich mal noch den Rahmen aus dem Pic genommen:

a.hoverpic:hover    { background: #FFFFFF;
                           text-decoration: none; }
 
a.hoverpic span     { visibility: hidden;
                          position: absolute;
                          left: 20em;
                          margin-top: -4em;
                          padding: 0.5em;
                          text-decoration: none; }
 
a.hoverpic:hover span
                    { visibility: visible;
                      background: #FFFFFF;
                      text-decoration: none; }

Ich hab´s kurz getestet, sollte eigentlich, vorbehaltlich besagter Änderungen, soweit funktionieren; nur die Pics hat er mir nicht angezeigt(?).

Grüße
low

P.s.: wieso funzt das einfügen für HTML schon wieder nicht, nur Code war möglich ?!