Zigi: Frage bezüglich Layer, der sich beim onclick neu positionert

SELF-Forum

Frage bezüglich Layer, der sich beim onclick neu positionert

Zigi Homepage des Autors
– Informationen zu den Bewertungsregeln

Hi ihr Leutz im SelfForum!

Beim Bau meiner Webpage habe ich in Stefan Münz' "SelfHtml8.0" ein kleines Script gefunden, welches ein Layer erzeugt, über eine Javascript-Funktion die aktuelle Mausposition errechnet und bei einem onClick-Event dort, wo der User hinklickt, der Layer neu plaziert wird.

Hier das Script:

<html>
<head>
<script language="JScript">
<!--
 function SetPos()
 {
  document.all.Springer.style.left = window.event.x;
  document.all.Springer.style.top = window.event.y;
 }
// -->
</script>
</head>
<body onClick="SetPos()" bgcolor=#FFFFFF background="pics/backg01.jpg">
<div id="Springer" style="position:absolute; top:221px; left:28px; width:160px;
height:90px; font-size:16pt; background-color:#99FFFF; color;"> Klicken Sie mit
  der Maus irgendwohin! </div>
<div align="center"></div>
</body>
</html>

Das funktioniert im MSIE 5.0 auch einwandfrei. Nur, wenn ich umfangreicheren Text und Zeilenumbrüche in die Seite einfüge, sodaß sie länger wird, im Umfang also den Fensterinhalt übersteigt und der User scrollen muß, dann funktioniert es nicht mehr. Das heißt, der Layer folgt nicht mehr beim onClick in den neuen Fensterinhalt. Er taucht stattdessen nur immer im obersten Bereich der Seite auf...
Ich möchte dieses Script gerne als Grundgerüßt für ein kleines Navigations-Menu verwenden, das der User über einen Mouseclick- oder Doubleclick in jedem Fenster ständig zur Verfügung hat ("Floating Menu").
Wie kann ich 1. erreichen, daß der Layer auch tatsächlich in jeden neuen Fensterinhalt folgt, auch, wenn der Seiteninhalt LÄNGER ist und der User scrollt?
und 2., wie wäre es ohne allzu großen Scripttechnischen Aufwand möglich, den Layer auf Wunsch irgenwo im Fenster (z.b. per Mouseclick) fest eizurasten, sodaß er auch beim Scrollen ständig an einer Position bleibt, "floated"?

Ähem, ich möchte noch anmerken, daß ich ein echter Newbie im Webseiten erstellen bin. Habe auch brav das SelfHtml Doc und das Forum nach einer Lösung durchforstet, aber nix gefunden. Eigentlich bin ich ja Musiker, und wenn ich so an die ZEIT denke, die das Erstellen so einer Webseite frißt, wird mir schwindelig...:-)

Könnt Ihr mir weiterhelfen?

Zigi

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Frage bezüglich Layer, der sich beim onclick neu positionert

    Robert Bamler Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    Beim Bau meiner Webpage habe ich in Stefan Münz' "SelfHtml8.0" ein kleines Script gefunden, welches ein Layer erzeugt, über eine Javascript-Funktion die aktuelle Mausposition errechnet und bei einem onClick-Event dort, wo der User hinklickt, der Layer neu plaziert wird.

    Hier das Script:

    [...]
      document.all.Springer.style.left = window.event.x;

    ^^^
    Versuch's hier mal mit clientX statt x.

    document.all.Springer.style.top = window.event.y;

    ^^^
    entsprechend hier mit clientY.
    siehe: </selfhtml/javascript/objekte/event.htm#client_x_y>

    Ähem, ich möchte noch anmerken, daß ich ein echter Newbie im Webseiten erstellen bin. Habe auch brav das SelfHtml Doc und das Forum nach einer Lösung durchforstet, aber nix gefunden. Eigentlich bin ich ja Musiker, und wenn ich so an die ZEIT denke, die das Erstellen so einer Webseite frißt, wird mir schwindelig...:-)

    Das kann ich gut verstehen ;-)

    Robert

    http://www.designauswahl.here.de
    mit kostenlosem Webseiten-Generator ROBE.dit
    [more than a HTMLE.dit]

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Frage bezüglich Layer, der sich beim onclick neu positionert

      Zigi Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo!

      Erstmal vielen Dank für die schnelle Antwort! Leider funkioniert Dein Vorschlag nicht. Wenn ich einfach clientx (bzw. clienty) schreibe, erhalte ich vom MSIE eine Fehlermeldung:"Ungültiges Argument in Zeile 7, Zeichen 3".
      Habe das Script dann mal entsprechend des von Dir zitierten Beispiels "umfunktioniert" (so, wie's bei Stefan Münz steht):

      <html><head><title>Test</title>
      <script for=document event="onmousedown()" language="JScript">
       {
        document.all.Springer.style.left = window.event.clientX;
        document.all.Springer.style.top = window.event.clientY;
       }
      </script>
      </head><body>
      <div id="Springer" style="background-color:#FFE0FF; position:absolute;
      top:26px; left:48px; width:100px; height:100px;"></div>
      <p> </p>
      </body></html>

      ...und mußte feststellen, daß auch in diesem Beispiel mit der Folgebereitschaft des Layers/Pictures Schluß ist, sobald der Seiteninhalt eine Fenstergröße "nach unten hin" übersteigt und der User scrollen muß. Außerdem sind mir zwei Dinge aufgefallen:

      1. Sobald man auf die Scrolleiste clickt, ist das ganze Object WEG(!?)

      2. Je tiefer man mit der Maus im Fenster clickt, desto tiefer erscheint der Mauszeiger am Layer/Picture selber. Bis er schließlich den unteren Rand desselben erreicht und der Layer komplett verschwindet. Erst ein erneuter Click im oberen Bereich des Fensters läßt den Layer wieder auftauchen... spooky...

      Was nun?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Frage bezüglich Layer, der sich beim onclick neu positionert

        Robert Bamler Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo,

        [...]

        ...und mußte feststellen, daß auch in diesem Beispiel mit der Folgebereitschaft des Layers/Pictures Schluß ist, sobald der Seiteninhalt eine Fenstergröße "nach unten hin" übersteigt und der User scrollen muß.

        Ich hab' mir auch die entsprechende Beispielseite angeschaut. Stimmt, das funktioniert wirklich nicht. In offsetX bzw. offsetY werden anscheinend nur die Koordinaten von der linken oberen *angezeigten* Bilschirmecke gespeichert. Du musst also noch die Scrollposition dazuaddieren:

        document.all.Springer.style.left = (window.event.clientX + document.body.scrollTop) + "px";
        document.all.Springer.style.top = (window.event.clientY + document.body.scrollTop) + "px";

        So hat's bei mir dann funktioniert. Das angehängte "px" ist ein technisches Detail.
        Mir ist allerdings auf die Schnelle nichts eingefallen, das ganze auch NC-Tauglich zu gestalten, da dieser bei frei positionierten Layern keine Scrolleiste erzeugt, sobald ein Layer über den Fensterrand hinausgeht.

        Außerdem sind mir zwei Dinge aufgefallen:

        1. Sobald man auf die Scrolleiste clickt, ist das ganze Object WEG(!?)

        Das hat mich zuerst auch verwirrt. Es ist aber in Wirklichkeit nicht weg, sondern nur rechts außerhalb des Anzeigebereichs, daher entsteht auch eine horizontale Scrolleiste.
        Das kommt daher, dass durch den Klick auf die Scrollleiste das Objekt wieder verschoben wird, nämlich dorthin, wo geklickt wurde, also "hinter" die Scrolleiste. Das erklärt auch, warum beim drehen des Rädchens einer Intelli-Mouse nichts verschwindet - dabei wird ja nicht geklickt.

        Viel Erfolg noch und gutes Musizieren ;-)

        Robert

        http://www.designauswahl.here.de
        mit kostenlosem Webseiten-Generator ROBE.dit
        [more than a HTMLE.dit]

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln