✔ mehrer Bilder (mit Layer) genau positionieren

N

NTDY

Erfahrenes Mitglied
mehrere Bilder (mit Layer) genau positionieren

Ich habe eine Mini-Bildergallery.

Wenn der Benutzer sie anklickt sollen diese auf der Seite größer dargestellt werden. Ich möchte aber, dass alle Bilder die man anklickt auch erscheinen. Zudem sollen diese genau positioniert werden, d.h. geklicktes Bild_1 auf Position (30;34), Bild_2 auf Position (80;190), usw.
 
Zuletzt bearbeitet:
Re: mehrere Bilder (mit Layer) genau positionieren

Weise ihnen per CSS das Attribut "position:absolute" zu.

Per JS weise dann die position zu:
Code: 
document.Bild_1.style.left='30px';
document.Bild_1.style.top='34px';
//usw.
 
Kannst Du vielleicht mir ein Beispiel mit 2 Bildern vorgeben? Es sollen ja Bilder sein, die auf der gleichen Seite erscheinen und ich weiß nicht wie man JS neue Bilder auf der gleichen Seite übereinanderlegt.

Vielen Dank im Vorraus.
 
Gehe ich recht in der Annahme, dass immer nur 1 Bild gross dargestellt werden soll?
Und wenn ja... wann soll ein Bild wieder verschwinden.
Und die Positionen... sind du zufällig, oder folgen die einem Schema(beziehen sie sich bspw. auf die Position des Vorschaubildes?)
 
Also ich stelle mir die Vorgehensweise in etwa so vor:

index.html mit Links
Code: 
<a href="javascript:showwindow('map_big1.gif',30,41);">Bild1</a>
<a href="javascript:showwindow('map_big2.gif',140,310);">Bild2</a>
<a href="javascript:showwindow('map_big3.gif',330,123);">Bild3</a>

Dabei ist der Funktionsaufbau folgend:
Code: 
showwindow(Bilddatei,x-Position,y-Position);">

Wenn man auf die Bilder klickt, dann sollen keines der vorher gehenden sich schließen. Jedes geklickte Bild soll stehen bleiben.

Erst wenn man eine andere Seite oder "Aktualisieren" drückt, sind die Bilder weg.
 
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function showImg(strSrc,intX,intY)
{
objImg=document.createElement('img');
objImg.setAttribute('src',strSrc);
objImg.style.position="absolute";
objImg.style.left=intX+'px';
objImg.style.top=intY+'px';
document.getElementsByTagName('body')[0].appendChild(objImg);
}
//-->
</script>
</head>
<body>
<a onclick="showImg('map_big1.gif',30,41);">Bild1</a>
<a onclick="showImg('map_big2.gif',140,310);">Bild2</a>
<a onclick="showImg('map_big3.gif',330,123);">Bild3</a>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück