Stoppe layer før det går utenfor bildets kant

[simenss]

Jeg har funnet et "beskjæringsprogram", skrevet i PHP og JavaScript. PHP går helt fint, men jeg kan ikke noe særlig om JavaScript. Bildet under viser hvordan "beskjæringsprogrammet" mitt ser ut:

 

Bilde

 

Den blå rammen inneholder alt som skal være med og kan flyttes med musen Men jeg vil at layer'et skal stoppe hvis det går utenfor bildets kant. Altså at layer'et ikke kan dras utenfor bildet. Noen som kan hjelpe?

 

Koden er:

 

<script LANGUAGE="javascript">
<!--

var dO=new Object();

dO.currID=null;
dO.z=0;
dO.xo=0;
dO.yo=0;
dO.ns4=(document.layers)?true:false;
dO.ns6=(document.getElementById&&!document.all)?true:false;
dO.ie4=(document.all&&!document.getElementById)?true:false;
dO.ie5=(document.all&&document.getElementById)?true:false;
dO.w3c=(document.getElementById)?true:false;
dO.resize = 0;

function findnestedlayer(name,doc) {
var i,layer;
for (i=0;i<doc.layers.length;i++) {
 layer=doc.layers[i];
 if (layer.name==name) return layer;
 if (layer.document.layers.length>0) {
 	if((layer=findlayer(name,layer.document))!=null) return layer;
 }
}
return null;
}

function trckM(e) {
if(dO.currID!=null) {
 var x=(dO.ie4||dO.ie5)?event.clientX+document.body.scrollLeft:e.pageX;
 var y=(dO.ie4||dO.ie5)?event.clientY+document.body.scrollTop:e.pageY;
 if (dO.ns4) {
 	dO.currID.moveTo(x-dO.xo, y-dO.yo);
 } else {
 	if (dO.resize == 0) {
   dO.currID.style.top=y-dO.yo+'px';
   dO.currID.style.left=x-dO.xo+'px';    
 	} else {
   if (!document.pic2mobile.prop.checked) {
   	if ((th-y0+y) > 20) dO.currID.style.height=th-y0+y+'px';
   	if ((tw-x0+x) > 20) dO.currID.style.width=tw-x0+x+'px';  
   } else {
   	if ((tw-x0+x) > 20) {
     dO.currID.style.width=tw-x0+x+'px';
     var wh = document.pic2mobile.size.value.split('x');
     var factor = wh[0]/wh[1];
     dO.currID.style.height=parseInt(dO.currID.style.width)/factor+'px';
   	}    
   }
 	}
 }	
}
return false;
}

function drgI(e) {
if(dO.currID==null) {
 var tx=(dO.ns4)? this.left : parseInt(this.style.left);
 var ty=(dO.ns4)? this.top : parseInt(this.style.top);
 tw=(dO.ns4)? this.left : parseInt(this.style.width);
 th=(dO.ns4)? this.top : parseInt(this.style.height);
 dO.currID=this;
 if (dO.ns4) {
 	this.zIndex=document.images.length+(dO.z++);
 } else {
 	this.style.zIndex=document.images.length+(dO.z++);
 }
 dO.xo=((dO.ie4||dO.ie5)?event.clientX+document.body.scrollLeft:e.pageX)-tx;
 dO.yo=((dO.ie4||dO.ie5)?event.clientY+document.body.scrollTop:e.pageY)-ty;
 x0=(dO.ie4||dO.ie5)?event.clientX+document.body.scrollLeft:e.pageX;
 y0=(dO.ie4||dO.ie5)?event.clientY+document.body.scrollTop:e.pageY;
 
 if (x0 >= tx+tw-10 && x0 <= tx+tw && y0 >= ty+th-10 && y0 <= ty+th) {
 	dO.resize = 1;
 } else {
 	dO.resize = 0;
 }

 return false;
}
}

function dragElement(id) {
this.idRef=(dO.ns4)? findnestedlayer(id,document) : (dO.ie4)? document.all[id] : document.getElementById(id);
if(dO.ns4)this.idRef.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
this.idRef.onmousedown=drgI;
this.idRef.onmouseup=function(){dO.currID=null}
}

if (dO.ns4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=trckM;

window.onresize=function() {
if (dO.ns4) setTimeout('history.go(0)',300);
}

function setvalues() {
var titlewidth = parseInt(document.images['title'].width);
var imagewidth = parseInt(document.images['image'].width);
if ((imagewidth+42) >= titlewidth) {
 var x1 = parseInt(table.style.left)-(parseInt(picture.style.left)+1+20);  
} else {
 var x1 = parseInt(parseInt(table.style.left)-(parseInt(picture.style.left)+((titlewidth-imagewidth)/2)));	
}

var x2 = x1+parseInt(table.style.width);
var y1 = parseInt(table.style.top)-(parseInt(picture.style.top)+parseInt(document.images['title'].height)+60);
var y2 = y1+parseInt(table.style.height);

var size = document.pic2mobile.size.value;
document.location.href = 'slett.php?size='+size+'&x1='+x1+'&y1='+y1+'&x2='+x2+'&y2='+y2+'&bgid=<?php print($_GET['bgid']); ?>';	
}

function changesize() {
var wh = document.pic2mobile.size.value.split('x');
table.style.width = parseInt(wh[0]);
table.style.height = parseInt(wh[1]);
}

function resize() {
var titlewidth = parseInt(document.images['title'].width);
var imagewidth = parseInt(document.images['image'].width);
if (titlewidth > imagewidth) {
 window.resizeTo(titlewidth+60,document.images['image'].height+310);	
} else {
 window.resizeTo(imagewidth+60,document.images['image'].height+310);  
}	
}

-->
</SCRIPT>

Endret 27. januar 2005 av simenss

[Dahl]

Å legg alt i en iframe burde jo funke.

[simenss]

Å legg alt i en iframe burde jo funke.

Funker ikke på layers. De kan "gå i minus", og "forsvinne" ut av siden. Men løste det ved hjelp av PHP

[Dahl]

Da lærte jeg noe i dag og!