✔ Bild in Bild positionieren

Sturmrider

Sturmrider

Erfahrenes Mitglied
Hi @all
Ich bin verzweifelt auf der Suche nach einem JavaScript Beispiel oder einer Info, wie ich auf einem Bild ein anderes kleineres Bild, durch klicken immer wieder neu positionieren kann. In meinem Fall eine kleine Flagge auf einer Karte.

Am Ende möchte ich die Position der Flagge ermitteln und mittels PHP weiter verarbeiten. Diesen Teil habe ich auch schon soweit fertig.
Code: 
[...]
<script type="text/javascript">

function coords(Ereignis) {
	xx=-10; // defaults off image
	yy=-10;

	if (window.event) { //IE
	xx=window.event.offsetX;
	yy=window.event.offsetY;
	}else{
		if(Ereignis){
			if (Ereignis.target) { // mozilla
				xx=Ereignis.pageX-Ereignis.target.x;
				yy=Ereignis.pageY-Ereignis.target.y;
			}else{
				xx=Ereignis.pageX;
				yy=Ereignis.pageY;
			}
		}
	}
	document.test.x.value = xx;
	document.test.y.value = yy;
}

</script>
</head>
<body>
<img src="14650751.jpg" style="cursor:pointer;" onClick="coords(event);" border="0">
<form name="test">
x:<input type="text" name="x" size="4">
 x:<input type="text" name="y" size="4">
</form>
[...]
Ich weiß nur nicht, wie ich durch klicken ein Image, innerhalb eines anderen, auf ihm immer wieder neu positionieren kann :(
Danke schon einmal für eure Hilfe :)
 
Moin,

naja...wenn du die Klickkoordinaten hast, kannst du die Flagge dort (absolute) positionieren, indem du dem <img>-Element als Style-Eigenschaften top+left die Klickkoodinaten zuweist.
 
Habe es jetzt so gelöst:
PHP: 
[...]
<script language="Javascript">
<!--

function setCords(e) {
	x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
	y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;

	x -= document.getElementById("bild").offsetLeft;
	y -= document.getElementById("bild").offsetTop;

}

document.onmousemove = setCords;

function getCords() {
        /*-35 und -10 damit die Spitze der Flagge dort ist, wo die Mausspitze hinzeigt*/
	document.getElementById("springer").style.top = y-35+"px";
	document.getElementById("springer").style.left = x-10+"px";
	
	document.getElementById("x").value = x;
	document.getElementById("y").value = y;
}
[...]
<div class="box2" id="bild" onclick="getCords()">
<img src="marker.gif" border="0" class="marker4" id="springer">
<img src="14650751.jpg">
</div>
x:<input type="text" id="x" size="4" disabled>
y:<input type="text" id="y" size="4" disabled>
[...]
Allerdings funktioniert das leider bisher nur im Firefox :( da die anderen Browser nicht den 1. Pixel des Bildes als x=1 y=1 ansehen, sondern als die Position an der sich das Bild auf der Seite befindet...
Gibt es da eine Möglichkeit, dass alle Browser das so machen wie der FF?
 
Zuletzt bearbeitet:
Hi,

x und y sind im IE wegen der input-Felder mit den ID x und y als Objekte definiert. Aus diesem Grund läuft das Script nicht.

Abhilfe kannst du schaffen, indem du die Variablen explizit deklarierst. Ausserdem werden die x- und y-Koordinaten im IE über die Eigenschaften clientX und clientY ausgelesen.
Code: 
var x,y;

function setCords(e) {
    x = (document.all) ? window.event.clientX + document.body.scrollLeft : e.pageX;
    y = (document.all) ? window.event.clientY + document.body.scrollTop : e.pageY;

    x -= document.getElementById("bild").offsetLeft;
    y -= document.getElementById("bild").offsetTop;

}

function getCords() {
        /*-35 und -10 damit die Spitze der Flagge dort ist, wo die Mausspitze hinzeigt*/
    document.getElementById("springer").style.top = y-35+"px";
    document.getElementById("springer").style.left = x-10+"px";

    document.getElementById("x").value = x;
    document.getElementById("y").value = y;
}

window.onload = function(){
  document.onmousemove = setCords;
}
Weiterhin starte ich die Eventüberwachung erst im onload-Event, da hier gewährleistet ist, dass das Dokument und damit seine Elemente tatsächlich existieren.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück