[JavaScript] Bild fix positionieren unabhängig von Bildschirmauflösung?

[Callisto]

Hi,
für unser Forum haben wir im banner ein bewegliches "Auge" eingebaut, dass immer dem Mauszeiger folgt. Nun haben wir das Problem, dass die Position des Auges von der Bildschirmauflösung und von der Fenstergröße abhängig ist.

Meine Frage also: Wie kann man in JavaScript ein Objekt fix positionieren ohne dass es sich beim Ändern der Fenstergröße verschiebt?

Damit klar wird wo das Problem liegt hier der Link zu unserem Testforum. Das Auge sollte im Banner fix eingebettet werden.

Im Anhang findet ihr den Code mit dem wir die Bewegung des Auges realisiert haben.

Ein großes Dankeschön an alle die uns helfen!

mfg
callisto

 

[Enigma]

AW: [JavaScript]Bild fix positionieren unabhängig von Bildschirmauflösung? HELP?!

Ich würde das nicht unbedingt fix positionieren, sondern relativ zum Hintergrund:
Es gibt das Hintergrundbild ({imagelogo}):

<img src="images/logo.gif" border="0">

Diesem Bild gibst du eine Id (z.B: logooben) und holst es dir die Koodinaten. Hierzu empfehle ich dir eine Funktion aus dem Yahoo YUI Toolkit:

   this.getXY = function(el) {
      el = this.get(el);

      // has to be part of document to have pageXY
      if (el.parentNode === null || this.getStyle(el, 'display') == 'none') {
         return false;
      }

      /**
       * Position of the html element (x, y)
       * @private
       * @type Array
       */
      var parent = null;
      var pos = [];
      var box;

      if (el.getBoundingClientRect) { // IE
         box = el.getBoundingClientRect();
         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
         var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

         return [box.left + scrollLeft, box.top + scrollTop];
      }
      else if (document.getBoxObjectFor) { // gecko
         box = document.getBoxObjectFor(el);
         pos = [box.x, box.y];
      }
      else { // safari/opera
         pos = [el.offsetLeft, el.offsetTop];
         parent = el.offsetParent;
         if (parent != el) {
            while (parent) {
               pos[0] += parent.offsetLeft;
               pos[1] += parent.offsetTop;
               parent = parent.offsetParent;
            }
         }

         // opera & (safari absolute) incorrectly account for body offsetTop
         var ua = navigator.userAgent.toLowerCase();
         if (
            ua.indexOf('opera') != -1
            || ( ua.indexOf('safari') != -1 && this.getStyle(el, 'position') == 'absolute' )
         ) {
            pos[1] -= document.body.offsetTop;
         }
      }

      if (el.parentNode) { parent = el.parentNode; }
      else { parent = null; }
      while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') {
         pos[0] -= parent.scrollLeft;
         pos[1] -= parent.scrollTop;

         if (parent.parentNode) { parent = parent.parentNode; }
         else { parent = null; }
      }

      return pos;
   };

Dann mit dem X/Y-Koordinaten positionierst du dein Auge - z.b. so:

logo =document.getElementById('logooben');
auge = document.getElementById('auge');
xylogo = getXY(logo);
auge.style.left = xylogo[0] + 44;
auge.style.top = xylogo[1] + 10;
auge.style.position="absolute";

Dann müsstest du dir noch einen Event-Handler einbaun, der bei einer Fenstergrößenänderung das Auge neu positioniert.


Edit: Viel zu kompliziert - einfachere Idee:

<div id="logoWrapper" style="background-image:url(<die url zum logo>;height:<logo hoehe>px")>
  <img id="auge" style="position:relative;top:<ausprobieren>px;left:<ausprobieren>px" ... />
</div>

 

[Callisto]

thx 4 help, wir haben es nun geschafft.

Wen es interessiert, hier das Ergebniss: http://www.headshot-clan.com/forum/