Christian S.: Lupeneffekt mit JavaScript (IE-Filter) möglich?

Hallo,

ist es möglich eine Art Lupeneffekt in JavaScript zu programmieren??

Also ich möchte dass sich einen transparenten Bereich (zB div) habe, unter dem sich der Hintergrund anders verhält wie normal, d.h. wie unter einer Lupe / Linse... also die schrift soll sich vergrößern bzw. nach vorne wölben...

Habe so was schon mal als Java Applet gesehen, aber geht das auch in JavaScript?

Gibt es da einen IE Filter, der so was kann? Es soll nur ein kleiner Effekt am Rande sein.

Oder kann man PNG Bilder irgendwie solche Eigenschaften zuweisen?

Gruß
Christian

  1. hi,

    ist es möglich eine Art Lupeneffekt in JavaScript zu programmieren??

    Also ich möchte dass sich einen transparenten Bereich (zB div) habe, unter dem sich der Hintergrund anders verhält wie normal, d.h. wie unter einer Lupe / Linse... also die schrift soll sich vergrößern bzw. nach vorne wölben...

    Habe so was schon mal als Java Applet gesehen, aber geht das auch in JavaScript?

    Schrift/Inhalt in einem rechteckigen Rahmen vergrößert darzustellen, wäre möglich.
    Aber "gewölbt" - das glaube ich nicht, dass sich das per Javascript realisieren lässt.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hi,

      Schrift/Inhalt in einem rechteckigen Rahmen vergrößert darzustellen, wäre möglich.
      Aber "gewölbt" - das glaube ich nicht, dass sich das per Javascript realisieren lässt.

      und wie dachtest du geht das??

      also was ich haben will ist hoffentlich klar... etwa so:

      <body>

      Inhalt

      <div style="position:absolute;opacity:0.5;width:100px; height:100px" id="Lupe"></div>

      </body>

      [...]

      function moveLupe(e)
      {
      document.getElementById("Lupe").style.left = e.clientX + "px";
      // selbes für height.

      // der Inhalt unterhalb des DIVs soll sich hervorheben.
      }

      document.onmousemove = moveLupe;

      1. hi,

        Schrift/Inhalt in einem rechteckigen Rahmen vergrößert darzustellen, wäre möglich.

        und wie dachtest du geht das??

        Welche Gedanken hast du dir darüber gemacht, wie es gehen könnte ...?

        Ich würde das fragliche Element clonen, Schriftgröße heraufsetzen und Bildmaße anpassen (oder größere Bildversionen hineinladen); und dann mittels absoluter Positionierung und Clipping dafür sorgen, dass jeweils nur ein Ausschnitt dieser größeren Version sichtbar gemacht wird.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Hi.

          Welche Gedanken hast du dir darüber gemacht, wie es gehen könnte ...?

          ich hab eigentlich nur gehofft, dass es einen IE Filter gibt, ansonstent hab ich keine Idee gehabt.

          Ich würde das fragliche Element clonen, Schriftgröße heraufsetzen und Bildmaße anpassen (oder größere Bildversionen hineinladen); und dann mittels absoluter Positionierung und Clipping dafür sorgen, dass jeweils nur ein Ausschnitt dieser größeren Version sichtbar gemacht wird.

          das fragliche Element ist ja der gesamte Inhalt der Seite, also alles was innerhalb von <body> ist.

          ich glaube das wird mir alles zu aufwändig, wenn ich das richtig überblicke. Ich müsste ja erkennen über welchen Elementen meine Lupe., dann jedes Element clonen und unterhalb der Lupe positionieren...

          und ich will ja eigentlich alles vergrößern, nicht nur die schrift, also auch rahmendicken, background-images....

          Gruß
          Christian

          1. hi,

            das fragliche Element ist ja der gesamte Inhalt der Seite, also alles was innerhalb von <body> ist.

            ich glaube das wird mir alles zu aufwändig, wenn ich das richtig überblicke. Ich müsste ja erkennen über welchen Elementen meine Lupe., dann jedes Element clonen und unterhalb der Lupe positionieren...

            Man könnte ja auch gleich "alles" klonen - dann muss man nur noch anhand der Mausposition entscheiden, welchen "Ausschnitt" davon man anzeigt, und wo.

            und ich will ja eigentlich alles vergrößern, nicht nur die schrift, also auch rahmendicken, background-images....

            Könnte im IE evtl. über die Pseudo-CSS-Eigenschaft zoom gehen.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
        2. Hallo,

          so in etwa sähe das dann aus (keine Ahnung, in welchem Browser das noch funktioniert, ist uralt)

          Aber in der Tat: recht aufwendig für eine ganze Seite....

          Chräcker

          --
          Erinnerungen?
          zu:]
  2. Hi there,

    ist es möglich eine Art Lupeneffekt in JavaScript zu programmieren??

    theoretisch auch mit "Wölbung", wobei es mit Schrift noch relativ einfach ginge indem Du das Maß der Schriftvergrößerung vom Zentrum Deiner "Lupe" abhängig machst. Bei Bildern evt. mit Clipping und Cloning, wäre aber sehr mühsam und wenn es in praktikabler Zeit erfolgen sollte ziemlich pixelig...