Position eines Bildes ermitteln

[barbapapa]

Morgen zusammen,

sorry, wenn dieses Thema schon 200 Mal behandelt wurde.
Hab trotzdem nichts passendes für mein Problem gefunden...

Habe Eine Seite, auf der der Content immer in der Mitte vom
Bildschirm ist. Position ist also abhängig von der Bildschirmauflösung.

Wie bekomme ich die Anfangs-Position (X-Koordinate) von
einem Bild heraus, welches sich immer abhängig von der Auflösung
auf dem Schirm verschieben kann?

Hintergrund ist der:
Ein Layer soll immer auf der gleichen Position (natürlich wieder abhängig von
der Auflösung) über dem Bild hängen.

Was ich schon versucht hätte war den <div> oder <span> mit relativer und absoluter
Position zu platzieren, aber da beginnt er nicht beim Bild, sondern am Bildschirmrand...

Zur Zeit habe ich es so gelöst:
<script language=javascript>
breite = screen.width;
if(breite==1680) breite = 820;
if(breite==1600) breite = 780;
if(breite==1280) breite = 640;
if(breite==1024) breite = 512;
if(breite==800) breite = 512;
document.write("<span style='position:absolute; left:"+breite+"px; top:1px'><img src=images/schild.gif></span>");
</script>

Aber so ganz sicher bin ich mir nicht, ob des wirklich (vorallem bei Mac und bei anderen Bildschirmen)


Also vielen Dank schon einmal

 

[Quaese]

Hi,

packe das Bild und den Schild-Container in ein umschliessendes DIV. Diesem weist Du die
CSS-Eigenschaft position: relative zu. Damit kann die Lage enthaltener absolut positionierter
Elemente relativ zum DIV-Container angegeben werden.

Beispiel-CSS:

.imgDiv{ border: 1px solid #c0c0c0;
         width: 130px;
         height: 130px;
         background: #f6f6f6;
         position: relative;
         margin-bottom: 20px;}
.imgDiv img{ margin: 5px;
             border: 0;}
.imgDiv .schild{ position: absolute;
                 border: 1px solid #c0c0c0;
                 background: #f6f6f6;
                 top: 10px;
                 left: 10px;
                 width: 110px;
                 height: 20px;
                 z-index: 2;}

Das Bild und das Schild werden in den Container mit der Klasse .imgDiv eingefügt.
Dieser kann beliebig auf der Seite positioniert werden, Bild und Schild behalten ihre Position
zueinander immer bei.

HTML-Code:

<div class="imgDiv">
    <img src="bild.gif" width="120" height="120" alt="" />
    <div class="schild">Abb: Bild 1</div>
</div>

Vielleicht hilft Dir das ja weiter.

Ciao
Quaese

 

[barbapapa]

Vielen Dank, werde das gleich mal ausprobieren

 

[Benzol]

Gibt es auch eine Möglichkeit direkt abzufragen, an welcher x und y Koordinate vom Screen sich das Bild befindet? Also das man diese beiden Werte vonner Funktion zurückbekommt?

 

[Sven Mintel]

Die entsprechenden Eigenschaften heissen "offsetLeft" und "offsetTop"

 

[Benzol]

Klasse Vielen dank...