✔ Pics beim mouseOver in div laden

[Denniz]

Hallo Leute,

ich habe auf meiner Page auf der linken Seite ein kleine Gallerie mit einigen Vorschaupics.
Auf der rechten Seite habe ich ein Infotext stehen.
Dies sieht in etwas so aus: -link-

Jetzt zum Problem.
Ist es möglich das man per MouseOver (nicht beim klicken) auf eines der Vorschaupics das pic in groß auf die rechte Seite hineinladen kann, so das der Infotext verschwindet und das Pic an dieser stelle erscheint.
Die Vorschaubilder sowie der Text liegen in getrennten Div containern.

So soll das ganze beim MouseOver aussehen:
-link-

Hat jemand eine Idee was ich dabei machen muß?

 

[Maik]

Schau dir hierfür mal mal meinen Lösungsansatz in dem Thread MouseOver (Text u. Bild an unterschiedl. Position) an.

 

[Denniz]

Hallo,
danke für den Link allerdings ist es nicht das was ich vorhabe.

Ich habe auf der Page auf der linken seite kleine Vorschaubilder. Beim onmouseover über diese Bilder soll auf der rechten Seite in einem Div die Bilder in groß gewechselt werden. (Dazu könnte ich deine Syntax aus dem link benutzten).

Das Problem ist folgendes: in dem div in dem die Großen Bilder beim onmouseover gewechselt werden soll am Anfang ein Text steht. Dieser Text soll verschwinden wenn man über ein Vorschaubild mit der Maus geht. Dann wird das entsprechende Bild in groß in diesem Div angezeigt.

Ist mein Vorhaben überhaupt möglich das der Text durch ein Bild ersetzt werden kann?
Desweiteren soll der Infotext auf der rechten seite wieder erscheinen wenn man sich über keines der Vorschaubilder mit der Maus befindet.

 

[Maik]

Wenn du den Text in eine Grafik einbindest, wird sie beim Überfahren der Vorschaubilder gegen die großen Bilder ausgetauscht und erscheint wieder, wenn du die Vorschaubilder mit der Maus verläßt - denn das ist die Funktionsweise des empfohlenen Scripts.

 

[Dr Dau]

Hallo!

Wenn du den Text in eine Grafik einbindest, wird sie beim Überfahren der Vorschaubilder gegen die großen Bilder ausgetauscht und erscheint wieder, wenn du die Vorschaubilder mit der Maus verläßt - denn das ist die Funktionsweise des empfohlenen Scripts.

Geht auch mit normalen Text..... muss also nicht in einer Grafik stehen.
Nachdem ich mich durch Dein Link-wirrwar geklickt habe, habe ich dieses Beispiel gefunden.

Gruss Dr Dau

 

[Denniz]

Perfekt, das ist genau das was ich gesucht habe.
Ich habe mir die Gallery bislang aus der Page ausgebaut und müßte diese nur noch an meine Gallery anpassen.
Jetzt ist es aber so das wenn man über ein Vorschaubild geht und darüber dann die Maustaste drückt bleibt das Bild in groß stehen. Das soll aber nicht passieren.

Ist es möglich das man per onclick Event sagen kann das beim drücken der Maus nichts passieren soll?
Für Testzwecke hab ich hier die Gallery hochgeladen. -link-

 

[Maik]

Entferne einfach die letzten drei Selektoren im Stylesheet:

a.gallery:active, a.gallery:focus {border:1px solid #c00; z-index:10;}
a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}
a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}

Das Thema wandert dann mal rüber ins CSS-Board.

 

[Denniz]

Hallo Leute,

ich habe die Beispielgallerie aus dem Posting weiter oben nun etwas umgebaut.
In dieser Gallerie funktioniert alles einwandfrei, im FF sowie im IE.
Jetzt habe ich das Stylesheet etwas umgeändert so wie ich es haben möchte allerdings
werden meine Bilder beim Hover im IE falsch positioniert.
Diese wandern ständig um 1px wenn ich über das nächste Vorschaubild hover.
Im FF funktionierts dagegen.

Hier ist meine Gallerie: -link-

Hier ist die gallerie aus der ich die CSS habe und dort geht's auch im IE: --link-

Ich könnte meine css zwar per star hack für den IE anpassen aber in der BspGallerie klappt es auch ohne Anpassung für den IE.

Vielleicht weiß jemand was ich hierbei machen muß.

Beste Grüße
Denniz

 

[Maik]

Dem Dokument fehlt die Doctype-Deklaration, weshalb der IE im Quirksmodus läuft und daher das Boxmodell falsch interpretiert.

Füge einfach den verwendeten Doctype der index.php in die index2.php ein, und alles wird gut