title image


Smiley Re: Probleme mit Positionierung
Hi,



ich hab' da gerade was zusammengeschustert, ist das das Richtige (Online-Demo,Download)?



Du brauchst nur die index.html anpassen, und zwar wie gewünscht Grafikverweise anpassen und Kartengrafik positionieren (Marker-Grafik muss nicht positioniert werden, sie wird zu Beginn automatisch in der oberen linken Ecke über der Kartengrafik platziert).



index.html







<html>

<head>

<meta name="MSSmartTagsPreventParsing" content="TRUE">

<meta http-equiv="imagetoolbar" content="false">

<script language="JavaScript" src="browsers.js"></script>

<script language="JavaScript" src="drag_and_drop_map_area.js"></script>

</head>

<body onLoad="dhtml_init(); init();">

<img id="marker" src="marker.gif" style="position:absolute; left:0px; top:0px; z-index:1; cursor:pointer;">

<img id="map" src="map.jpg">

</body>

</html>







browsers.js (angepasste Version der DHTML-Biblitohek von SELFHTML)







//Funktion aus SELFHTML's allgemeiner DHTML-Biblitohek

function dhtml_init()

{

if(window.opera)

{

OP = 1;

}

if(document.getElementById)

{

DHTML = 1;

DOM = 1;

}

if(document.all && !OP)

{

DHTML = 1;

MS = 1;

}



if(window.netscape && window.screen && !DOM && !OP)

{

DHTML = 1;

NS = 1;

}

}



//Angepasste Funktion aus SELFHTML's allgemeiner DHTML-Biblitohek

//(d.h. nur Objektzugriff auf HTML-Elementobjekten mit ID-Attribut)

function getElem(p1)

{

var obj;



if(DOM)

{

if (typeof document.getElementById(p1) == "object")

{

obj = document.getElementById(p1);

}

else

{

obj = void(0);

}



return(obj);

}

else if(MS)

{

if (typeof document.all[p1] == "object")

{

obj = document.all[p1];

}

else

{

obj = void(0);

}



return(obj);

}

else if(NS)

{

if (typeof document[p1] == "object")

{

obj = document[p1];

}

else

{

obj = void(0);

}



return(obj);

}

}







drag_and_drop_map_area.js (modifizierte Version des DHTML-Layers Skript von Francisco Charrua)







function mouseDown(e)

{

if ((navigator.appName == 'Netscape' && e.which!=1) || (navigator.appName == 'Microsoft Internet Explorer' && event.button!=1))

{

return true;

}



var x = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;

var y = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;



if (navigator.appName == 'Netscape' && e.target!=document)

{

routeEvent(e);

}



ClickedLayer = -1;



if(Selected(x, y, marker.id) && ClickedLayer == -1)

{

marker.ClickedX = x - GetX(marker.id);

marker.ClickedY = y - GetY(marker.id);

ClickedLayer = 1;

}



if(ClickedLayer == -1)

{

return true;

}

else

{



return false;

}

}



function mouseMove(e)

{

var x = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;

var y = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;



if (navigator.appName == 'Netscape' && e.target!=document)

{

routeEvent(e);

}



if(ClickedLayer != -1)

{

Move('marker',x - marker.ClickedX,y - marker.ClickedY);

}



if(ClickedLayer == -1)

{

return true;

}

else

{

return false;

}

}



function mouseUp(e)

{

var x = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;

var y = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;



if (navigator.appName == 'Netscape' && e.target!=document)

{

routeEvent(e);

}



ClickedLayer = -1;



return true;

}



function Layer(layer, x, y)

{

this.id = getElem(layer);

Move('marker',x,y);

this.ClickedX = 0;

this.ClickedY = 0;

}



function Move(layer,x,y)

{

var status1 = false;

var status2 = false;



var layer2 = getElem(layer);



if(x >= GetX(map) &&

x <= (GetX(map) + GetW(map))-GetW(layer2))

{

status1 = true;

}



if(y >= GetY(map) &&

y <= (GetY(map) + GetH(map))-GetH(layer2))

{

status2 = true;

}



if(NS)

{

if(status1)

{

getElem(layer).left = x;

}



if(status2)

{

getElem(layer).top = y;

}

}

else

{

if(status1)

{

getElem(layer).style.left = x;

}



if(status2)

{

getElem(layer).style.top = y;

}

}

}



function Selected(x, y, layer)

{

if(navigator.appName == 'Netscape')

{

if(parseInt(navigator.appVersion) == 5)

{

if(x > parseInt(layer.offsetLeft) && x < parseInt(layer.offsetLeft) + parseInt(layer.scrollWidth) &&

y > parseInt(layer.offsetTop) && y < parseInt(layer.offsetTop) + parseInt(layer.scrollHeight))

{

return(true);

}

}



if(parseInt(navigator.appVersion) == 4)

{

if(x > layer.left && x < layer.left + layer.clip.width &&

y > layer.top && y < layer.top + layer.clip.height)

{

return(true);

}

}

}

else

{

if(navigator.appVersion.indexOf('MSIE 4') > 0)

{

if(x > layer.style.pixelLeft && x < layer.style.pixelLeft + layer.offsetWidth &&

y > layer.style.pixelTop && y < layer.style.pixelTop + layer.offsetHeight)

{

return(true);

}

}

else

{

if(x > layer.style.pixelLeft && x < layer.style.pixelLeft + layer.offsetWidth &&

y > layer.style.pixelTop && y < layer.style.pixelTop + layer.offsetHeight)

{

return(true);

}

}

}



return(false);

}



function GetX(layer)

{

if(navigator.appName == 'Netscape')

{

if(parseInt(navigator.appVersion) == 5)

{

return(parseInt(layer.offsetLeft));

}

if(parseInt(navigator.appVersion) == 4)

{

return(layer.left);

}

}

else

{

if(navigator.appVersion.indexOf('MSIE 4') > 0)

{

return(layer.style.pixelLeft);

}

else

{

return layer.offsetLeft;

}

}

}



function GetY(layer)

{

if(navigator.appName == 'Netscape')

{

if(parseInt(navigator.appVersion) == 5)

{

return(parseInt(layer.offsetTop));

}



if(parseInt(navigator.appVersion) == 4)

{

return(layer.top);

}

}

else

{

if(navigator.appVersion.indexOf('MSIE 4') > 0)

{

return(layer.style.pixelTop);

}

else

{

return layer.offsetTop;

}

}

}



function GetW(layer)

{

if(navigator.appName == 'Netscape')

{

if(parseInt(navigator.appVersion) == 5)

{

//return(parseInt(layer.style.width));

return(parseInt(layer.scrollWidth));

}



if(parseInt(navigator.appVersion) == 4)

{

return(layer.clip.width);

}

}

else

{

if(navigator.appVersion.indexOf('MSIE 4') > 0)

{

return(layer.style.pixelWidth);

}

else

{

return(layer.offsetWidth);

}

}

}



function GetH(layer)

{

if(navigator.appName == 'Netscape')

{

if(parseInt(navigator.appVersion) == 5)

{

return(parseInt(layer.scrollHeight));

}



if(parseInt(navigator.appVersion) == 4)

{

return(layer.clip.height);

}

}

else

{

if(navigator.appVersion.indexOf('MSIE 4') > 0)

{

return(layer.style.pixelHeight);

}

else

{

return(layer.offsetHeight);

}

}

}



function init()

{

ClickedLayer = -1;



map = getElem('map');



marker = new Layer('marker', GetX(map), GetY(map));



document.onmousedown = mouseDown;

document.onmousemove = mouseMove;

document.onmouseup = mouseUp;



if(navigator.appName == 'Netscape')

{

document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

}

}



var DHTML = 0, DOM = 0, MS = 0, NS = 0, OP = 0;



var marker = null;

var map = null;







MfG Murdoch!

aktuelle Winamp Playlist                Hörgewohnheiten (Last.fm)



geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: