Michael Rolli: Position eines IMG im Fenster

Hallo zusammen,

ich möchte mit folgendem Skript eine Ebene ein und ausblenden, welches sich exakt auf ein Bild legt. Ebene und Bild sind exakt gleich gross. Wie kann ich die Position in x,y des Bildes auf der Seite herausfinden? Das Bild ist nicht auf jeder Seite an der gleichen Stelle. Also ein Roll-Over-Effekt, wobei die Ebene nur Text enthalten wird (und eben kein Bild).

<html>
<head>
<title>show/hide test</title>

<script language='JavaScript'>
<!--

function changevis(ebene,aktion)
{
 if (document.getElementById) { x = document.getElementById(ebene).style };   // NN6,IE5
 if (document.all) { x = document.all[ebene].style };   //IE4
 if (document.layers) { x = document.layers[ebene] };   //NN4x
 if (aktion == "ein") { x.visibility = "visible"};   // einblenden
 if (aktion == "aus") { x.visibility = "hidden" };   // ausblenden
}

// -->
</script>

<link rel="stylesheet" href="style.css" type="text/css">

</head>

<body bgcolor="#ffffff" text="#000000" link="#ff0000" vlink="#800000" alink="#ff00ff">

<div id="content"><img src="text.gif" width="600px" height="500px"></div>

<p>
<img src="bild.jpg" width="600px" height="500px">
Link <a href="javascript:changevis('content','ein')">einblenden</a> oder <a href="javascript:changevis('content','aus')">ausblenden</a>.
</p>
</body>
</html>

Danke für die Hilfe.

Michael

  1. hi,

    wenn das bild _nicht_ in positionierbaren Elementen steckt:

    // ab js1.2
    function findPos(el) {

    var xPos    = 0;
        var yPos    = 0;

    if(document.layers) {
                xPos = el.x;
                yPos = el.y;
        }
        else {
            while(el){
                xPos += el.offsetLeft;
                yPos += el.offsetTop;
                el   =  el.offsetParent;
            }
        }
        return {xPos: xPos, yPos: yPos};
    }

    gib dem Bild einen Namen. Position findest Du dann so heraus

    var x = findPos('document.bildname').xPos;
    var y = findPos('document.bildname').yPos;

    hth

    Gruesse  Joachim

    1. Vielen Dank Joachim,

      ich werd's gleich mal probieren. Ich hoffe, es funzt sowohl in NN4+6 als auch IE4+5, sonst heisst's basteln.

      Nochmals Danke und bis denne

      Michael

    2. Hi Joachim,

      Dein Skript ist genau, was ich gsucht habe. Wusste gar nicht, dass ein <img> auch ein attribut offsetTop etc. hat. Bequem so.

      Zu Deinem Skript. Irgend etwas stimmt noch nicht und zwar in folgendem Teil:

      if(document.layers) {
               xPos = el.x;
                  yPos = el.y;
          }
          else {
              while(el){
                  xPos += el.offsetLeft;
                  yPos += el.offsetTop;
                  el   =  el.offsetParent;
              }

      wenn ich xPos = document.bild.x; versuche klappt's.
      wenn ich's mit xPos = el.x; versuche klappt's nicht (undefined resp. NaN)
      Übergabe an finPos:  x = findPos('document.bild').xPos;
      ein alert(el) im if(doc... offenbart aber korrekt: document.bild

      Woran das wohl liegt? Gleiches Problem für IE4+5 und NN6 Teil.

      Viele Grüsse
      Michael

      1. hi,

        Übergabe an finPos:  x = findPos('document.bild').xPos;

        ups, sorry, keinen String sondern ein object uebergeben, also

        x = findPos(document.bild).xPos;

        kleiner, feiner Unterschied ;-)

        hth

        Gruesse  Joachim