Problem mit Mouseover-Effekt und fixierter Menuleiste

abacaxi3000 schrieb am 30.10.2014 um 21:57 Uhr

Hallo zusammen,

die Website an der ich gerade arbeite, soll eine fixierte Menuleiste haben. Diese Leiste ist mit einem Transparenzeffekt versehen. Funktioniert auch alles soweit sehr gut. Wenn ich scrolle bleibt die Leiste stehen und man sieht die Bilder drunter durch schimmern.

Auf den Bildern, bzw. unter den Bildern liegen andere für einen Mouseover-Effekt. Wenn ich dann die Maus auf eins der Bilder bewege, scheint das "Mouseover-Bild" über der fixierten Leiste zu liegen und nich drunter.

Ich habe hier mal Bilder vom Problem. So wie es jetzt ist, solls nämlich nicht bleiben! Ach ja, gearbeitet habe ich mit dem Web Designer 9.

 

 

 

 

Ich danke schonmal herzlich für die Hilfe!

 

Marcus

Kommentare

BeRo schrieb am 30.10.2014 um 23:49 Uhr

[...] scheint das "Mouseover-Bild" über der fixierten Leiste zu liegen [...]

So, wie Du die MouseOver Bilder angeordnet hast, ist das normal...

Du hast die Bilder alle in die MouseOver Ebene gelegt und die (korrekte) MouseOff Ebene leer gelassen:

 

Die "MouseOver" Bilder gehören in eine separate, neu anzulegende popup Ebene und die "Standard Bilder" in die MouseOff Ebene. Dann verlinkst Du die Standard Bilder auf die dazu gehörende popup Ebene. Im u. a. Beispiel ist das die Ebene "foto":


Wenn Du alles richtig gemacht hast, kann das etwa so aussehen:

Die "!FixedTab" Ebene ist die oberste in der Hierarchie. Dann folgt (darunter) die popup Ebene (hier "foto", blau markiert) und darunter die anderen "normalen" Ebenen, z. B. die MouseOff Ebene, oben gelb markiert.

Viel Erfolg beim Nachbau

Zuletzt geändert von BeRo am 30.10.2014, 23:49, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

abacaxi3000 schrieb am 31.10.2014 um 00:21 Uhr

Hi BeRo und danke für die Antwort,

 

wenn ich deiner Anleitung folge sieht der Effekt folgendermaßen aus. Ich muss auf das Standardbild klicken, damit das MouseOver Bild erscheint und auf dieses kann ich dann den eigentlichn Link legen. War es so von dir gedacht?

Zudem ändert es nichts daran, dass das MouseOver Bild die fixierte und transparente Leiste überdeckt.

So wie ich den Effekt hatte (mit Ausnahme des Überdeckens) war es auch gedacht. Also dass ich nur den Zeiger über das Standardbild halte und dann ersceint darunter das MouseOver Bild.

 

Grüße und gute Nacht

MArcus

BeRo schrieb am 31.10.2014 um 00:29 Uhr

[...] Ich muss auf das Standardbild klicken, damit das MouseOver Bild erscheint [...] War es so von dir gedacht? [...]

Sorry, natürlich war das so nicht gedacht...

Man sollte halt so spät nicht mehr "arbeiten".

So sollte es aussehen, dann klappt's auch mit dem MouseOver Effekt.


Viel Erfolg

Zuletzt geändert von BeRo am 31.10.2014, 00:29, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

abacaxi3000 schrieb am 31.10.2014 um 12:49 Uhr

Nochmals Danke, BeRo! Leider hat dein Tip noch nicht den gewünschten Effekt. So wie ich es nun eingestellt habe, ändern sich alle Bilder auf die MouseOver Motive. Und die fixierte Leiste wird dadurch auch nach wie vor überdeckt.

Der MouseOver Effekt an für sich hat ja mit meiner ursprünglichen Einstellung schon geklappt... Nur das Problem mit dem Überdecken der MouseOver Bilder und der fixierten Leiste will nicht verschwinden

 

Trotzdem schonmal tausend Dank!

Marcus

BeRo schrieb am 31.10.2014 um 13:20 Uhr

[...] das Problem mit dem Überdecken der MouseOver Bilder und der fixierten Leiste will nicht verschwinden [...]

Höchstwahrscheinlich ist das Problem in der Positionierung/Verteilung der Objekte auf den Ebenen zu suchen, bzw. in der Position der Ebenen.

So sollte die Struktur Deiner Seite in der Seiten- & Ebenen-Galerie aussehen:


Wenn das geschafft ist, sieht das Ergebnis im Normalzustand (MouseOff) so aus:

Verschiebst Du jetzt den Mauszeiger auf das Bild, siehst Du zusätzlich den Inhalt der popup Ebene "foto" auf dem Bild, aber hinter der NavBar, die mit dem !FixedTab Tweak fixiert wurde.


Das müsstest Du einfach nachbauen können.

Probier's nochmal...

Zuletzt geändert von BeRo am 31.10.2014, 13:20, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

abacaxi3000 schrieb am 31.10.2014 um 17:21 Uhr

Ich hab das nochmal versucht anhand deiner Beschreibung nachzubauen. Alle "Effekt-Bilder" liegen in der Ebene "foto". Die MouseOver Ebene ist leer und in der MouseOff liegt alles für die normale Seite.

Wenn ich alles so lasse und in die Vorschau gehe passiert gar nichts. Sprich in kann scrollen, die Bilder fahren "hinter" die fixierte, transparente Menuleiste. Jedoch gibt es keinen MouseOver Effekt.

Wenn ich bei den Webeigenschaften der Seite beim MouseOver Reiter die PopUp Ebene verlinke, dann kommt der Effekt, dass alle MouseOver Bilder auf einmal angezeigt werden.

So siehts bei mir aus:

Ich habe, soweit ich das sehe, eigentlich genau deine Anweisung befolgt. Nur leider kommt nicht das was ich mir vorstelle. Wie gesagt. Der MouseOver Effekt den ich mir vorstelle, hatte ich ja schon. Nämlich das nur jedes einzelne Bild wechselt, wenn der Mauszeiger drüber fährt.

Ich verstehe nur nicht, wo das Problem mit der fixierten Leiste angegangen werden muss...

abacaxi3000 schrieb am 31.10.2014 um 17:49 Uhr

Update und Frage an BeRo:

Warum sollen die Bilder für den MouseOver Effekt eigentlich nicht in die MouseOver Ebene? Hatte ich ja vorher und bis auf das geschilderte Problem hats ja auch funktioniert.

Wenn ich die Bilder auf der MouseOver Ebene übrigens mit einem Transparenzeffekt versehe, dann schimmert die fixierte Leiste auch durch. Also wirkt es so, als würde die Mouseover Ebene falsch angeordnet sein, aber ist sie ja eigentlich nicht?

Ich bin ratlos...

BeRo schrieb am 31.10.2014 um 17:52 Uhr

[...] Ich habe, soweit ich das sehe, eigentlich genau deine Anweisung befolgt [...]

Aber nur "eigentlich"

[...] Wenn ich bei den Webeigenschaften der Seite beim MouseOver Reiter die PopUp Ebene verlinke, [...]

Wenn Du der kompletten Seite einen MouseOver Effekt verpasst, dann passiert natürlich genau das, was Du gesehen hast.

Richtig wäre es, wenn Du jedem Bild, das Du für den Effekt vorgesehen hast, in der MouseOff Ebene einen separaten MouseOver Effekt zuweisen würdest.

Damit das Ergebnis so aussieht, wie Du es Dir vorstellst, muss jeder MouseOver Effekt in einer eigenen, separaten Ebene liegen. Jedem zugehörigen Bild in der MouseOff Ebene weist Du dann eine MouseOver Eigenschaft zu, mit der die entsprechende popup Ebene angezeigt wird. Wie das geht, das hatte ich hier schon erklärt.

[...] Ich verstehe nur nicht, wo das Problem mit der fixierten Leiste angegangen werden muss. [...]

Ganz einfach, in den Ebenen...

Lade Dir mal hier die Demo Projektdatei herunter, die ich für die Beispiele in den Screenshots benutzt habe. In Verbindung mit den Kommentaren im Thread siehst du sicher sehr schnell, wie alles zusammenhängt...

Viel Erfolg

Zuletzt geändert von BeRo am 31.10.2014, 17:52, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

BeRo schrieb am 31.10.2014 um 18:20 Uhr

[...] Warum sollen die Bilder für den MouseOver Effekt eigentlich nicht in die MouseOver Ebene [...]

Das geht auch, es hat aber den Nachteil, dass der MouseOver Effekt nur dann funktioniert, wenn den zugehörigen Bildern in der MouseOff Ebene die popup Eigenschaft zugewiesen wird und die MouseOver Bilder müssen innerhalb der MouseOIff Bilder angezeigt werden, zumindest müssen sie sie berühren.
Als popup Bild wird das entsprechende Bild nach einem Klick vergrößert angezeigt und gleichzeitig verschwindet das MouseOver Bild...

Das ist vermutlich nicht die Lösung, die Du Dir vorgestellt hast

Zuletzt geändert von BeRo am 31.10.2014, 18:20, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

abacaxi3000 schrieb am 31.10.2014 um 21:07 Uhr

Ich habe mir mal deine Demo angeschaut. Alles soweit verständlich. Aber jetzt kommt der Witz: Wenn ich die Datei in der Vorschau betrachte, finde ich hier exakt das gleiche Problem vor! Der Schmetterling liegt über den Buttons! Stimmt was mit dem Web Designer oder dem Rechner nicht?

 

Grüße, Marcus

BeRo schrieb am 31.10.2014 um 21:40 Uhr

[...] Stimmt was mit dem Web Designer oder dem Rechner nicht? [...]

Ich bin sicher, dass da alles in Ordnung ist.

Offenbar händelt der WD9 das !FixedTab Tweak anders, als der WD10. Das Problem ist scheinbar die hierarchische Einordnung des fixierten Objekts in die umgebenden Objekte.

Mit einer kleinen Codeergänzung kannst Du das aber korrigieren.

Öffne dazu die Webeigenschaften des !FixedTab HTML Platzhalters und ergänze den HTML Code um den Eintrag "z-index:100;"


Damit zwingst Du den WD, das fixierte Objekt in der Ebenen Hierarchie höher anzusiedeln, als die direkten Nachbarn.

Der komplette Code sieht jetzt so aus:

--------------------------
</div></a></div></div>
<div style="position:fixed;top:0px;z-index:100;">
<div><a><div>

--------------------------

Kleine Ursache, große Wirkung...

Viel Erfolg

Zuletzt geändert von BeRo am 31.10.2014, 21:40, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

abacaxi3000 schrieb am 31.10.2014 um 21:47 Uhr

YEAH! Das war das Problem! Ich kann dir gar nicht genug für deine hartnäckige Hilfe danken, BeRo!!! :)

Das Wochenende ist damit gerettet :)

 

Viele Grüße

Marcus