Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
hehe
Threadersteller
Dabei seit: 07.04.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 28.07.2007 16:32
Titel Moveable Map |
|
|
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...?
|
|
|
|
|
schachbrett
Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Sa 28.07.2007 17:44
Titel
|
|
|
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>
|
|
|
|
|
|
Anzeige
|
|
|
|
|
|
Ähnliche Themen |
[Moveable Type] Monatsarchiv per Scrolldownmenü
|
|
|
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.
|
|