✔ Bewegender Punkt auf Karte (Bild)

  • Themenstarter Themenstarter Dkl764
  • Beginndatum Beginndatum
D

Dkl764

Hallo Community,
ich suche ein Script mit dem ich auf einem Bild (Karte) einen Punkt an eine bestimmte Stelle platzieren kann der sich an eine bestimmte Stelle bewegt - Schrittweiße.
Außerdem läuft diese Bewegung nicht nur gerade, sondern auch schräg, so wie eben die Straßen gebaut sind.

Gibt es ein Script, mit dem man einen Punkt auf einer Karte bewegen kann?

Bis dann,
Tombi
 
Moin,

so ein Skript kenne ich nicht, aber bspw. mit JQuery.animate() kann man sowas schon machen....du müsstest halt für jeden "Schritt" eine neue Animation definieren.
Die Hauptarbeit liegt somit bei dir in Form des Festlegens der Route.


Hier mal nen Beispiel für den Einstieg ;)
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2009-05-11" />
<title>Test</title>
<style type="text/css">
<!--
body{
    margin:0;
    background:url(http://www.tutorials.de/forum/images_v6/misc/tuts_default.gif) 
               no-repeat;
}
#pointer{
    position:absolute;
    top:23px;
    left:90px;
}
-->
</style>
</head>
<body>
<img id="pointer" 
     src="http://www.tutorials.de/forum/images_v6/buttons/collapse_thead_collapsed.gif">

<script src="http://code.jquery.com/jquery-latest.js"
        type="text/javascript"></script>
<script type="text/javascript">
<!--
fx=function(obj,route,speed)
{
  while(route.length)
  {
    step=route.shift();
    obj.animate({ left: step[0],top:step[1] },speed);
  }
}
fx($('#pointer'),
  [[65,23],[50,57],[16,57],[27,23],[6,23],[11,6],[17,0],[90,0],[96,6],[87,23]],
  1000);
//-->
</script>
</body>
</html>

Das Erstellen der Route könnte man sicher über ein kleines Behelfsskript vereinfachen, wo du einfach auf "Eckpunkte" in deiner Karte klickst, und dir entsprechend per JS die Koordinaten liefern lässt.
 
Da habe ich jedoch ein Problem:
Das Bild soll nicht als Hintergrund vorhanden sein, sondern an einer beliebigen Stelle auf der Seite, welche sich eventuell je nach Bildschirmauflösung verschiebt. Wie kann ich nun diesen Punkt im Bild und nicht auf der Seite anzeigen?

Bis dann,
Tombi
 
Zuletzt bearbeitet von einem Moderator:
Hi,

indem du das Grafikelement und den Pointer in ein relativ positioniertes Elternelement einbettest :)

HTML: 
<body>
<span id="pointerWrapper">
      <img src="http://www.tutorials.de/forum/images_v6/misc/tuts_default.gif">
      <img id="pointer"
     src="http://www.tutorials.de/forum/images_v6/buttons/collapse_thead_collapsed.gif">

     <script src="http://code.jquery.com/jquery-latest.js"
        type="text/javascript"></script>
        <script type="text/javascript">
        <!--
        fx=function(obj,route,speed)
        {
        while(route.length)
        {
        step=route.shift();
        obj.animate({ left: step[0],top:step[1] },speed);
        }
        }
        fx($('#pointer'),
        [[65,23],[50,57],[16,57],[27,23],[6,23],[11,6],[17,0],[90,0],[96,6],[87,23]],
        1000);
        //-->
     </script>
</span>
</body>
CSS: 
#pointerWrapper {
    position:relative;
}
#pointerWrapper img {
    position:absolute;
}
#pointer{
    top:23px;
    left:90px;
}

mfg Maik
 
Hier werden ja 2 Bilder übereinander gelegt.
Nun habe ich das versucht auch noch mit etwas anderem zu nutzen. Ich habe eine "Feuerwache". Darüber möchte ich die animierten Sirenen legen.

Mein Problem: Die Sirenen werden nicht darüber gelegt, sondern einfach darunter angezeigt, nebeneinander.

Wo ist der Fehler?

CSS: 
#wrapper
{
position:relative;
}
#wrapper img
{
position:absolute;
}
#sirenen1
{
top:20px;left:10px;
}
#sirenen2
{
top:20px;left:60px;
}
#sirenen3
{
top:20px;left:110px;
}
HTML: 
<span id="Wrapper">
	<img src="http://www.tutorials.de/forum/images/fd1/fd1.png" height="100%" width="100%">
	<img id="sirenen1" src="http://www.tutorials.de/forum/images/fd1/sirenen.gif">
	<img id="sirenen2" src="http://www.tutorials.de/forum/images/fd1/sirenen.gif">
	<img id="sirenen3" src="http://www.tutorials.de/forum/images/fd1/sirenen.gif">
</span>
 
Funktioniert prima. Nur geht nun der komplette <span>-Inhalt über alle anderen Elemente auf der Seite. So das sich z.b. der Container in dem sich das ganze befindet sich nicht vergrößert, sondern die Karte einfach über die Seite geht.
Wie kann man das ändern?
 
Ja, hier:
www. funkspiel-ny .de .vu

Dort einfach mit folgenden Daten einloggen:
Name: tutorials
Passwort: demo

Gleich nach dem Login siehst du es.
Hoffe du kannst mir weiter helfen.


MFG Tombi

Edit: Aktueller Code:

HTML: 
<style type="text/css">
#wrapper
{
position:relative;
}
#wrapper img
{
position:absolute;
}
#sirenen1
{
top:235px;
left:24px;
}
#sirenen2
{
top:250px;
left:100px;
}
#sirenen3
{
top:250px;
left:300px;
}
</style>
<span id="wrapper">
	<img src="fd1.png">
	<img id="sirenen1" src="sirenen.gif">
	<img id="sirenen2" src="sirenen.gif">
	<img id="sirenen3" src="sirenen.gif">
</span>
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück