Ebene immer an Mauszeigerposition anzeigen lassen - Webdesigner 19

info827 escrito el 03.04.AM a las 09:10 horas

Guten Morgen,

ich habe hier jetzt lange gesucht, bin aber nicht fündig geworden. Ich arbeite mit dem Webdesigner Premium 19 und möchte folgendes bewerkstelligen:

Auf einer langen Seite gibt es immer wieder Hinweise, die mit einer Popup-Ebene verlinkt werden sollen. Wie man Ebenen erstellt und einblendet weiß ich. Wie bekomme ich es hin, dass wenn ein Link auf der Seite angeklickt oder mit der Maus angefahren wird, immer die Popup-Ebene im sichtbaren Bereich angezeigt wird?

Ich hoffe das war einigermaßen verständlich ausgedrückt und es ist überhaupt möglich.

Vielen Dank für Eure Hilfe und einen schönen Sonntag noch

Comentarios

marboe escrito el 03.04.AM a las 11:39 horas

Also so was hier zum Beispiel:

zu ...

Der Text fährt rein bzw wird eingeblendet bei Klick auf das Symbol. Das schwarze Rechteck ist schon vorgesehen bei Seitenaufruf. Aber es geht natürlich auch einfahren eines Textes mit entsprechendem Rechteck als Hintergrund, der alles darunter auf der Seite überdeckt.

Was soll passieren wenn die Einblendung nicht mehr gebraucht wird?

Wenn es das ist, was du suchst, sag bescheid. Gruß marboe

info827 escrito el 06.04.AM a las 06:52 horas

Hallo Marboe,

ja, genau so soll es sein. Ich bekomme das auch hin, habe aber einen Knoten im Kopf. Die LINKS gibt es an verschiedenen Stellen der Seite, es soll dann, wenn ein Text oder eine Ebene "eingeflogen" wird, immer im Sichtbaren Bereich passieren. Das ist es, was ich nicht hinbekomme.

Vielen Dank für deine Hilfe :)

marboe escrito el 06.04.AM a las 07:04 horas

immer im Sichtbaren Bereich passieren.

Das geht aus meinem Tipp schon hervor.
Aber hier gern noch genauer:


Wenn der Text auf diversen neuen Ebenen verteilt wird, kann er in der Projektdatei frei positioniert werden. Und genau da wird er auch aufgerufen. Mein zweiten Foto oben ist im gescrollten Bereich aufgenommen.
Verlinkt wird er so:

Auf welche Art und Weise er "eingeflogen" wird, ist ebenfalls frei wählbar. Mit Klick auf ändern kommt man zu diesen Einstellungen.
Der Aufruf mit diesen extra gestalteten Ebenen ist übrigens für jede Variante frei wählbar. Gruß Marboe

Robbin escrito el 06.04.PM a las 16:16 horas

Wenn ich dich, @info827, richtig verstanden habe, dann hast du auf einer langen Seite mehrere Links im Text angelegt, die alle eine Info einblenden sollen, die in einer einzigen popup Ebene angelegt wurde.

In dem Fall ist es mit den im WD verfügbaren Mitteln tatsächlich nicht möglich, den Inhalt der Ebene immer an der jeweiligen Cursor Position anzuzeigen. Es sei denn, du legst für jeden Link eine separate Ebene mit identischem Inhalt an.

Wenn man ein kleines CSS Script einbindet und dem Inhalt der popup Ebene eine ID gibt, damit das Script die Ebene an der gewünschten Position einblenden kann, dann geht es aber auch ganz bequem mit einer Ebene.
Wie das funktioniert, das kannst du dir in der online Demo ansehen. Da sind alle Bildunterschriften als Textlink angelegt, der jeweils auf die einzige Info popup Ebene zeigt. Der Inhalt der Ebene (hier ein HTML Platzhalter, der über ein iframe eine Infobox einblendet) wird immer mittig im sichtbaren Bereich des Browser Fensters angezeigt, egal auf welcher Position der Seite man sich befindet und klickt...

Sollte das die Lösung des Problems "Ebene immer an Mauszeigerposition anzeigen lassen" sein, verrate ich gerne die Details dazu... 😉

info827 escrito el 22.04.AM a las 06:43 horas

immer im Sichtbaren Bereich passieren.

Das geht aus meinem Tipp schon hervor.
Aber hier gern noch genauer:


Wenn der Text auf diversen neuen Ebenen verteilt wird, kann er in der Projektdatei frei positioniert werden. Und genau da wird er auch aufgerufen. Mein zweiten Foto oben ist im gescrollten Bereich aufgenommen.
Verlinkt wird er so:

Auf welche Art und Weise er "eingeflogen" wird, ist ebenfalls frei wählbar. Mit Klick auf ändern kommt man zu diesen Einstellungen.
Der Aufruf mit diesen extra gestalteten Ebenen ist übrigens für jede Variante frei wählbar. Gruß Marboe

Vielen Dank Marboe. Mein Problem ist das "einfliegen" einer Ebene immer an aktueller Position, wenn der Link an verschiedenen Stellen der Seite zu finden ist. Ich möchte diese Ebene nur ein mal erstellen und dann immer da wo sie gebraucht wird, anzeigen lassen ohne die Ebene zu duplizieren.

 

info827 escrito el 22.04.AM a las 06:45 horas

Wenn ich dich, @info827, richtig verstanden habe, dann hast du auf einer langen Seite mehrere Links im Text angelegt, die alle eine Info einblenden sollen, die in einer einzigen popup Ebene angelegt wurde.

Sollte das die Lösung des Problems "Ebene immer an Mauszeigerposition anzeigen lassen" sein, verrate ich gerne die Details dazu... 😉

 

Jaaaaaaaaa, genau das wäre die Lösung für mein Problem :) - Ich würde mich freuen, wenn du mir die Details dazu erklärst <3

 

Robbin escrito el 22.04.PM a las 22:15 horas

@info827 s

genau das wäre die Lösung für mein Problem

ok, dann leg' mal los...

Der iframe Code muss in ein DIV Tag eingepackt werden, damit du der popup Ebene eine ID geben kannst, die später im CSS Steuercode verwendet wird.
Den kompletten HTML Code für den Platzhalter (s. u.) kannst Du per copy & paste übernehmen.
Solltest du auch eine (oder mehrere) Varianten anlegen, z. B. für Smartphones-, Tablets-, etc. dann musst du für jede Variante die ID des Codes anpassen. Für die Smartphone Variante könnte die ID dann z. B. so aussehen
<div id="Info_popup-M">
Das "M" in der ID steht sinngemäß für "Mobil"

<div id="Info_popup">
<iframe src="./info.htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="xara_iframe" >
<p>Your browser does not support iframes.</p>
</iframe>
</div>

Den Namen der popup Ebene kannst du frei wählen. In der Demo habe ich den Namen "pu-info" als Synonym für "popup Info" gewählt.
Die Ergänzung " (fade-in1) (fade-out1) " sorgt dafür, dass die popup Ebene weich ein- und ausgeblendet wird. Der Zahlenwert (1...5) steht für die Geschwindigkeit des Effekts. 1 = langsam, 5 = schnell. Zwischenwerte 2...4 sind möglich.

Die o. a. fade-in/-out Anweisung ist nötig, wenn die popup Info nicht schlagartig erscheinen/verschwinden soll.
Das "einfliegen" der popup Ebene oder andere Effekte, die der WD anbietet, können hier nicht verwendet werden, weil der dazu vom WD erzeugte Script Code sich nicht mit den CSS Anweisungen verträgt, die wir nachher noch einbauen.

Um die gerade angelegte popup Ebene immer mittig im Sichtfeld (Browserfenster) anzeigen zu können, legst du jetzt noch ein CSS Script im HTML Head der Seite an, in der die Info Box eingeblendet werden soll.
Der Scriptcode gilt automatisch für alle eventuell angelegten Varianten, er enthält in unserem Beispiel also auch die ID für eine Smartphone Variante (#Info_popup-M).

Das u. a. Script kannst du ohne Änderungen wieder mit copy & paste übernehmen, wenn du die IDs "#Info_popup, #Info_popup-M" so in deiner Site verwenden willst. Andernfalls musst du sie hier und in den DIV Tag für die Desktop-/Mobile Variante anpassen.
Die im Script verwendeten Größenangaben für width und height sowie die Abstände im Parameter margin musst du natürlich auf die Größe deiner Info Box anpassen.

<style>
  #Info_popup, #Info_popup-M {
    width:309px !important;
    height:129px !important;
    position:fixed;
    top:50% !important;
    left:50% !important;
    margin:-65px 0 0 -155px; /* [-(height/2)px 0 0 -(width/2)px] */
    display:block;
  }
</style>

Jetzt fehlt dir nur noch die Info, die in der Info Box der popup Ebene angezeigt werden soll.
Dazu legst du eine neue, absolut leere Seite an, die nicht größer sein darf, als der Platzhalter, den du im 1. Schritt angelegt hast.
In unserem Beispiel hat der die Größe von 309 x 129 Px, die auch die neue Seite hat...

Die Seite sollte den Namen "info" bekommen, damit sie mit dem oben als Beispiel gezeigten iframe Code harmoniert.
Den Inhalt der Seite für die Info Box kannst du frei festlegen. Im Beispiel habe ich eine Telefon Nr. eingebaut, die über einen Link "tel:0800455123456789" direkt eine Tel. Verbindung zum Hotel aufbaut, um eine Reservierung vornehmen zu können. 😉

Schlussendlich kannst du beliebig viele Links auf der Seite anlegen, die alle auf die neue popup Ebene zeigen. Die Info Box wird in jedem Fall mittig im gerade sichtbaren Seitenbereich eingeblendet.

Ich denke, dass du mit der o. a. Anleitung klar kommst, wenn nicht, schau dir nochmal die online Demo an, oder frage einfach hier nochmal...

info827 escrito el 23.04.AM a las 09:40 horas

Wow, 1.000 Dank für diese ausführliche Erklärung. Ich bin begeistert und hoffe es irgendwann gut machen zu können.