mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 02:39 Benutzername: Passwort: Auto-Login

Thema: Moveable Map vom 28.07.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Moveable Map
Autor Nachricht
hehe
Threadersteller

Dabei seit: 07.04.2007
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 28.07.2007 16:32
Titel

Moveable Map

Antworten mit Zitat Zum Seitenanfang

Hi,

zu aller erst bin ich nicht gerade sehr erfahren in js.
ich habe da ein problem und zwar würde ich gerne eine Map (jpg) welches
sich in einem Div befinden mit der maus verschieben. praktisch so wie es z.B.
map24 macht...
wichtig ich das sich das div nicht von der stelle bewegt, es soll also nur die map
verschoben werden und beim erreichen der kante sich nicht mehr in diese richtung
verschieben lassen..

es gibt da, so glaub ich, verschiedene möglichkeiten...

habt ihr da beispielcodes oder examples worin ich schlauer werde...?
  View user's profile Private Nachricht senden
schachbrett

Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Sa 28.07.2007 17:44
Titel

Antworten mit Zitat Zum Seitenanfang

Ist ja eigentlich nur eine simple Drag-Funktion...

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title>Map</title>
 
<style type="text/css">
.outer {
   position: absolute; overflow: hidden;
   width: 200px; height: 200px;
   border: 1px solid black;
   left: 50%; top: 50%; margin: -100px 0 0 -100px;
}   
#map {
   position: absolute;
   width: 600px; height: 588px;
   background: url(http://www.hoeckmann.de/imagesdeutsch/deutschland.gif);
}
</style>
 
<script type="text/javascript">
addEvent = function( el, name, f ) {
 
   if( document.all ) el.attachEvent( 'on' + name, f );
          else el.addEventListener( name, f, false );
}
 
Dragger = function( el ) {

   var obj = false;

   this.drag = function( e ) {

      if( obj = ( document.all ) ? event.srcElement : e.target ) {
 
          if( !document.all ) event = e;

         var sx = event.clientX;
         var sy = event.clientY;
 
         var _x = obj.style.left;
         var _y = obj.style.top;
 
         document.onmousemove = function( e ) {
 
            if( obj ) {
 
               if( !document.all ) event = e;
 
               obj.style.left = parseInt( _x ) + event.clientX - sx + "px";
               obj.style.top  = parseInt( _y ) + event.clientY - sy + "px";
             }
         }
      }
   }
 
   this.stop = function() { obj = false; }
 
   el.style.left = 0;
   el.style.top = 0;
   addEvent( el, "mousedown", this.drag );
   document.onmouseup = this.stop;
}
 
window.onload = function() {

   new Dragger( document.getElementById("map") );
}
</script>
 
</head>
 
 
<body>
   <div class="outer"><div id="map"></div></div>
</body>
</html>


  View user's profile Private Nachricht senden
Anzeige
Anzeige
 
Ähnliche Themen [Moveable Type] Monatsarchiv per Scrolldownmenü
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.