WD10 Premium: Mehrere PopUp Effekte (über Ebenen) verbinden?

Spieluhr schrieb am 09.03.2015 um 13:54 Uhr

Und wieder einmal ein fröhliches "Hallo" in die Runde der kreativen Köpfe gegrüßt..

So, nachdem BeRo mir gestern so wunderbar bei meinen Menü Animationsproblem geholfen hat wollte ich diesen Effekt gerne noch etwas steigern und daher meine "neue" Frage:

Ist es möglich einen MouseOver mit mehreren PopUp Ebenen unterschiedlicher Animationseffekte zu verbinden?

Leider beschränkt sich ja das Optionsmenü des WD10 (Reiter: MouseOver -> PopUp Ebene anzeigen) auf 1 wählbare Ebene und Animationseffekt. Ziel ist aber bei MouseOver eines definierten Objekts mehrere (in meinen Fall 2-3) PopUp Ebenen synchron (vieleicht sogar untereinander zeitversetzt?) mit unterschiedlichen Animationeffekten aufzurufen.

Ich weiß, ich werde langsam unverschämt mit den Aufgabenstellungen - sehts sportlich als Herausforderung an euer Talent.

So schauts bisher aus: www.fa-test.de

schönen Gruß

Spieluhr

Kommentare

BeRo schrieb am 09.03.2015 um 23:21 Uhr

[...] Ziel ist aber bei MouseOver eines definierten Objekts mehrere (in meinen Fall 2-3) PopUp Ebenen synchron (vieleicht sogar untereinander zeitversetzt?) mit unterschiedlichen Animationeffekten aufzurufen. [...]

Schon fast klar, dass das mit dem Bordwerkzeug des WD nicht zu machen ist.
Das heißt aber nicht, dass es nicht auf eine andere Art gemacht werden kann.

Lies Dir mal diesen Kommentar durch, den ich in einem anderen Zusammenhang gepostet habe. Da werden auch 2 unterschiedliche popup Ebenen mit unterschiedlichen Effekten gestartet.

Die grundsätzliche Vorgehensweise ist identisch mit den Vorgaben, die Du erfüllen musst um zum Ziel zu kommen. Du musst also...

Die (popup) Ebenen anlegen und mit Inhalt füllen.
Dummy Linkbuttons anlegen, in denen jeweils auf eine separate popup Ebene verlinkt wird.
Die vom WD als Index benutzen Werte für den Aufruf der Ebenen feststellen.
Mit dem WD, im HTML Head der Seite den JS Code für die Timersteuerung anlegen.

-------------------------------
<script type="text/javascript">
function Timer(){
{setTimeout("xr_cpu(7)", 1000);} /* öffnet popup nach 1 Sek. */
{setTimeout("xr_ppc('xr_xp7')", 6000);} /* schließt popup nach 5 Sek. (6-1=5)*/
}
</script>
-------------------------------
Projekt lokal exportieren.
Die HTML Seite, die die popup Effekte zeigen soll, mit einem Texteditor öffnen.
Den HTML Code der DIV Box des "page background", die am Anfang des Body Bereichs steht, ergänzen um den Aufruf der JS Funktionen "xr_ppc()", mit denen die später zu öffnenden popup Ebenen geschlossen werden, wenn der "page background" ein MouseOver feststellt.
Das ist z. B. dann der Fall, wenn der Mauzeiger von dem popup auslösenden Objekt weggezogen wird.

------------------------------
onmouseover="xr_ppc('xr_xp7'), xr_ppc('xr_xp6')"
------------------------------
Im HTML Code der Seite das Bild (o. anderes Linkobjekt) suchen, das als Auslöser das normalen MouseOver Effekts dient. Hier ist das z. B. das Bild "280.png" (Zahnrad Symbol).
Das gefundene IMG Tag ergänzen um den Aufruf der zusätzlichen popup Funktionen. Im Beispiel die direkte Anzeige einer popup Ebene und die zeitversetzte Anzeige der 2. popup Ebene.

------------------------------
onmouseover="xr_cpu(6), Timer()"
------------------------------
Die geänderte Seite separat speichern und später, nach dem Upload der Seiten durch den WD, manuell auf dem Webspace ablegen.
Fertig

Die in den Codeschnipseln gelb markierten Indexwerte sind natürlich nur für die Demo zutreffend. Sie werden in Deinem Projekt andere Werte haben, die Du vorab über die oben verlinkte Methode feststellen musst.

Wenn alles geklappt hat, kann das Ergebnis so aussehen:

Bei einem MouseOver des Zahnrad Symbols wird zunächst der Infotext (1) eingeblendet und zeitgleich gleitet das Bild (1) von links in die Seite hinein.
Bleibt die Maus auf dem Symbol stehen, gleitet nach 1 Sekunde Wartezeit zusätzlich das Bild (2) von rechts in die Seite hinein.
Bleibt die Maus weiter auf dem Symbol stehen, wird das Bild (2) nach 5 Sekunden wieder ausgeblendet. Alternativ werden alle eingeblendeten Objekte sofort ausgeblendet, wenn die Maus vom Zahnradsymbol weggezogen wird.

Hier kann das '"Kunstwerk" online getestet werden.

Viel Erfolg

Spieluhr schrieb am 10.03.2015 um 02:33 Uhr

Danke für die Antwort BeRo!

1te Frage: Was meinst du mit Index Werte für Aufruf der Ebenen?

2te Frage: Ich müsste also dann auf JEDER Seite (Index + die 5 späteren Unterseiten) dann jeweils 6 Dummys mit Link zu den jeweiligen von rechts eingleitenden Vorschaubild Ebenen setzen und den js-script quasi 6fach im Header, da ja jeder Icon auf jeder Seite überfahren/angeklickt werden kann und dementsprechend diese Animationen zeigen soll?

Also mir reicht doch EIN zusätzlicher Animationseffekt zu der schon bestehenden PopUp Animation je Icon.

Ergo:

Effekt 1: Wie schon vorhanden, Texteinblendung bei überfahren des Icon (das klappt echt super)

Effekt 2: Vorschaubild eingleiten von rechts (hierfür habe ich die Ebenen angelegt und sinnigerweise Vorschaubild 1 bis 6 genannt)

Mit den bearbeiten der Indexseite versuche ich wenn du mir schreibst was du genau mit Index Wert der Ebenen meinst.

..schon einmal vielen Dank im voraus für deine bisherige Arbeit. Denke mal, auch dieses mal werde ich Murphys Law nicht siegen lassen.

ps: So schaut das bisher aus: http://www.fa-test.de (das Rechteck im rechten Bereich nicht beachten, soll nur die Endposition des jeweiligen Vorschaubildes im Menübalken anzeigen!)

BeRo schrieb am 10.03.2015 um 18:00 Uhr

[...] Was meinst du mit Index Werte für Aufruf der Ebenen? [...]

Damit sind die Zahlenwerte gemeint, die der WD benutzt um die mit JS programmierten Funktionen den richtigen Objekten zuordnen zu können. Zum Beispiel öffnet die JS Funktion "xr_cpu(4)", die popup Ebene mit dem Index Wert "4"
Ich hatte Dir dazu einen Link zu einem Kommentar gegeben, in dem ich das erklärt habe...

[...] Ich müsste also dann auf JEDER Seite [...] 6 Dummys mit Link zu den jeweiligen von rechts eingleitenden Vorschaubild Ebenen setzen [...]

Auf den einzelnen Seiten müssen nur so viele Dummy Buttons angelegt werden, wie benutzte popup Ebenen vorhanden sind. Lässt Du auf einer bestimmten Seite nur eine popup Ebene "einfliegen", brauchst Du auf der Seite auch nur einen Dummy Button.

[...] mir reicht doch EIN zusätzlicher Animationseffekt zu der schon bestehenden PopUp Animation je Icon [...]

Wie gesagt, für jede popup Ebene, die Du als Animation "einfliegen" lässt benötigst Du den dazu passenden Indexwert, damit Du sie per JS Code ansprechen kannst. Bei 6 verschiedenen Animationen sind das 6 Indexwerte und 6 JS Codes für den Aufruf.
Das kann nur funktionieren, wenn Du auf jeder Seite, die die Icons enthält, auch alle popup Ebenen zur Verfügung hast und demnach auch alle JS Codeschnipsel.

Einfacher wäre es, wenn Du nur eine Seite als Hauptseite anlegst, auf der alle Icons- und die zugehörigen popup Ebnen für die animierte Navigation liegen.
Auf der Hauptseite legst Du unterhalb der Icon Liste einen ausreichend großen Platzhalter an, in dem die jeweiligen Unterseiten per iframe eingebunden- und angezeigt werden. Damit sparst Du den Aufwand der 6-fachen Implementierung.
Ein Besucher Deiner Site bemerkt nichts davon, wenn Du die Unterseiten in vergleichbarer Seitenlänge anlegst. Andernfalls könnte entweder Leerraum entstehen oder ein vertikaler Scrollbalken eingeblendet werden.

Wie eine Website aussehen kann, die mit einer einzigen Navigationsleiste auf der Hauptseite auskommt und trotzdem die diversen Unterseiten anzeigt, das kannst Du Dir hier ansehen.
Die Seite enthält zwar keine zusätzlichen Animationen, aber das war im Thread nicht das Thema.

Probier's mal...

Viel Erfolg

Spieluhr schrieb am 10.03.2015 um 19:02 Uhr

Ahja, alles klar. Jetzt habe ich das verstanden.

Die Ebenen über MouseOver beginnen ja mit Ebene 5.

6 Ebenen waren ja schon über die Icon PopUp Texte indexiert, also Ebene 5-10, ergo gehen Die Vorschaubilder ab Ebene 11 - ergo cpu (11) los.

Das hatte ich zuerst nicht verstanden. Danke für die Erklärung.

ps: Mit iframes möchte ich nur sehr ungerne arbeiten, weil das wird eine Firmen-HP und sollte ein Ranking freundlichesVerhalten aufweisen. iFrames sind da nicht unbedingt hilfreich.

edit: Jetzt ist mir gerade noch was aufgefallen bei den Text PopUps. Diese sieht man ja nur wenn die Maus über den Icon ist bzw. angeklickt wurde. Wenn die jeweilige Seite aber geöffnet wurde sollte auch der Text zum Icon dauerhaft stehen bleiben. Das erreiche ich im WD zwar über die Option "Mouseover -> Effekt -> Haken bei "Popup automatisch schließen" entfernen" allerdings steht dann direkt neben den jeweiligen Textfeld ein schwarzes Close Kreuz und kann demzufolge manuell geschlossen werden.

Gibt es eine Möglichkeit dieses zu unterbinden? Also das der PopUp Text stehen bleibt (bis aufruf der nächsten Seite) und NICHT manuell geschlossen werden kann.

BeRo schrieb am 11.03.2015 um 00:28 Uhr

[...] Gibt es eine Möglichkeit dieses zu unterbinden? Also das der PopUp Text stehen bleibt (bis aufruf der nächsten Seite) und NICHT manuell geschlossen werden kann.[...]

Ja, die gibt es.
Wenn Du dem Namen der Ebene den Zusatz " (lock)" verpasst, bist Du am Ziel.
Den Haken bei "Popup automatisch schließen" musst Du in dem Fall aber drin lassen.

Das Schließen solcher Ebenen mit dem JS Funktionsaufruf "xr_ppc('xr_xp#')" hast Du ja in meinem ersten Antwort Kommentar schon kennengelernt.

Aber ich glaube, dass Du mit der LOCK Methode Dein Problem nur verlagerst.
Da die einzelnen Ebenen mit dem Infotext hierarchisch übereinander angeordnet sind, wirst Du auf einer Unterseite immer den da unerwünschten Infotext der hierarchisch höchsten Seite sehen.

Dein Problem kannst Du IMHO besser lösen, wenn Du in jeder Unterseite in der MouseOff Ebene eine Kopie des Infotextes ablegst, der dann permanent angezeigt wird, wenn die Seite aktiv ist.

Z.B., so:

Probier's mal so.

Viel Erfolg