Bild frei verschiebbar machen

uwee

uwee

Erfahrenes Mitglied
Hallo an alle.

Ich arbeite daran, eine Übersichtskarte von einem großen Gebiet zu bearbeiten. Nun ist es leider so, dass diese Karte sehr sehr groß ist. Wenn ich diese im Gesamten anzeigen möchte, ist darauf kaum noch etwas zu erkennen.
Nun habe ich aber schon des öfteren gesehen, dass sich Bilder frei verschieben lassen, wie es auf dieser Seite der Fall ist:

http://www.kufi13.de/blackpearl/worldmap.html

Wie ist das möglich? Was brauche ich dafür und wo bekomm ich das her?

Danke

UweE
 
Hi,

Evt bringen dir onmousedown und onmousemove etwas.
Die Mauszeigerposition kannst du mit dem hier herausfinden (weiter oben gibt es noch pageX und pageY. brauchst du auch. Für Firefox, usw). Musst dann mit Javascript nur noch das Bild verschieben lassen, also eine Funktion schreiben, die dir die immer die passende Funktion ausließt. Hoffe das geht.

Ds Bild braucht dann übrigens die Eigenschaft position:absolute

EDIT:
Hier mal ein Beispiel um die Mausposition rauszufinden und Bild zu bewegen. Jedoch noch nicht perfekt, wie du sehen wirst: (Geht im IE, Opera, Safari, Konqueror. Für die anderen musst du page... nemhen)
HTML: 
<html>

<head>
<title>Neue Seite 2</title>
<script type="text/javascript">
var akt=0;
function bewege(img)
{
	if(akt == 1)
	{
		document.body.innerHTML += "X: "+window.event.x+" Y: "+window.event.y+"<br>";
		document.getElementById("bild").style.top = window.event.y;
		document.getElementById("bild").style.left = window.event.x;
	}
}

function aktivate_bewege(mode)
{
	akt = mode;
}
</script>
</head>

<body onmouseup="aktivate_bewege(0)" onmousemove="bewege(this)">
<img id="bild" style="position:absolute;" src="Ethereal.jpg" width="50" height="52" onmousedown="aktivate_bewege(1)">
</body>

</html>

Gruß fanste
 
Zuletzt bearbeitet:
Nochmal zu meinem Codebeispiel.
Wie kann ich herausfinden, an welcher Position IM Bild geklickt wurde?
 
Danke, genau das brauchte ich^^

Der Quellcode, der oben gepostet wurde, funktionierte bei mir auch nicht "wirklich perfekt", manchmal blieb das "Ding", das man verschieben können sollte, die ganze Zeit an der Maus und verfolgte sie. Wenn jemand dasselbe Problem hat, und man es nicht mehr "ablegen" kann, sollte man beim Code noch -10 hinzufügen, dass die Maus noch über dem Element ist. Wenn man nun ein zweites mal darauf klickt, legt man es wieder ab: (jedenfalls funktioniert es bei mir so..)

if(akt == 1)
{
document.getElementById("menuSelect").style.top = window.event.y - 10;
document.getElementById("menuSelect").style.left = window.event.x - 10;
}

Eine Zeile hab ich entfernt in meinem Code, wusste nicht wozu die nötig war-_- Der Hintergrund wurde dauernd aktualisiert oder so... Egal, nun gehts bei mir (tönt ja Egoistisch..), und wenn jemand auch das Problem hat, dass er es ned "loslassen kann", einfach -10 oder -20 oder sonst -irgendwas...


PS: bitte sagt nichts gegen meinen Beitrag, werde sowieso nichts mehr schreiben, aber nochmals:

danke für die Hilfe^^
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück