Bereich fixieren

S

Schneider

New member
hallo!! ja ich bins schon wieder

ich habe die aufgabe ein bild mit der maus langziehen zu können. Ich kann das Bild in fast alle Richtungen langziehen, nur nicht in die Richtung wo ich top und left fixiert habe, also zb mit left:200px.

Nun muss ich es so machen das wenn ich nach links ziehe soll die rechte seite fixiert sein und die linke lang gezogen werden!!

Ich hoffe ich bin nicht zu undeutlich sonst sagt es einfach!!
 
Wenn du Links "ziehst" (ziehen ist ja nur ein Effekt den du simulierst) dann soll das Bild breiter werden, also muss du die Breite ändern und nciht die Position rechts.

und nach wie vor Frage ich micht, warum du eine perfekte Bibliothek nicht einsetzt und stattdessen X Tage die rumplagst
 
komm ich jetzt nicht ganz mit was du meinst!!

und die bibliothek hilf mir auch nicht

wie kann ich die breite verändern?? mit width ändert sich wieder der rechte rand und der linke bleibt, ich will ja das wenn ich links ziehe auch links breiter wird und nicht rechts
 
Das wirst du entsprechend berechnen müssen.

Es gibt kein links oder rechts breiter, das Bild wird insgesamt breiter, dann musst du die Postion so berechnen wie du es haben willst
 
ich bin ferialer bei einer firma und der chef hat mir diese aufgabe gegeben, ich habe noch nie javascript programmiert und habe eigentlich keine ahnung von dem dreck. Der chef ist jetzt auch noch im krankenstand und keiner kann mir helfen, kannst du mir nicht ein beispiel für diese berechnung geben!!! pls ;)
 
deine Bild hat die Eigenschaften:
top, left
width, height

Du ziehst nach Links, also wird left kleiner, folglich muss width vergrößer werden, um die Breite zu erreichen das das Bild rechts an der gleichen Stelle wie vorher ist.

Der Pseudocode:
function ziehenachlinks()
[obj].left -= 1;
[obj].width += 1;
 
danke für deine Antwort nur wie binde ich das jetzt in mein script ein??

hier mal mein script was ich bis jetzt habe

<html>
<head>
<title> Bild verändern </title>
<script language="javascript">
lastActionState='';
lastMouseX=0;
lastMouseY=0;
richtung=0;


function changeSizeStart(ev) {
lastActionState='move';
htmlElem=((ev.target) ? ev.target : ev.srcElement);
window.status=richtung;
}

function changeSizeEnd(ev) {
lastActionState='';
}

function mouseDownBody(ev) {
if (lastActionState=='move') {
lastMouseX=((ev.screenX) ? ev.screenX : ev.clientX) + document.body.offsetLeft;
lastMouseY=((ev.screenY) ? ev.screenY : ev.clientY) + document.body.offsetTop;
}
}

function mouseUpBody(ev) {
lastActionState='';
}

function mouseMoveBody(ev) {
var htmlImg;
var re=/px/g;
var re1=/pt/g;
if (lastActionState=='') {
// berechne Cursor-Type;
htmlImg=((ev.target) ? ev.target : ev.srcElement);
if (htmlImg.id!='img_sizeChange') return;
posX=((ev.layerX) ? ev.layerX : ev.offsetX);
posY=((ev.layerY) ? ev.layerY : ev.offsetY);
window.status= posX + '/' + posY;
imgWidth=htmlImg.style['width'].replace(re,'')-0;
imgHeight=htmlImg.style['height'].replace(re,'')-0;
drittelX=Math.floor((posX*3)/imgWidth);
drittelY=Math.floor((posY*3)/imgHeight);
if ((drittelY==0) && (drittelX==0)) htmlImg.style['cursor']='nw-resize';
if ((drittelY==0) && (drittelX==1)) htmlImg.style['cursor']='n-resize';
if ((drittelY==0) && (drittelX==2)) htmlImg.style['cursor']='ne-resize';
if ((drittelY==1) && (drittelX==0)) htmlImg.style['cursor']='w-resize';
if ((drittelY==1) && (drittelX==1)) htmlImg.style['cursor']='move';
if ((drittelY==1) && (drittelX==2)) htmlImg.style['cursor']='e-resize';
if ((drittelY==2) && (drittelX==0)) htmlImg.style['cursor']='sw-resize';
if ((drittelY==2) && (drittelX==1)) htmlImg.style['cursor']='s-resize';
if ((drittelY==2) && (drittelX==2)) htmlImg.style['cursor']='se-resize';
richtung=drittelY*3+drittelX+1;
window.status= posX + '/' + posY + ':' + imgWidth + '/' + imgHeight + ':' + drittelX + '/' + drittelY + ':' + richtung;
}

if (lastActionState=='move') {
newMouseX=((ev.screenX) ? ev.screenX : ev.clientX) + document.body.offsetLeft;
newMouseY=((ev.screenY) ? ev.screenY : ev.clientY) + document.body.offsetTop;
window.status=newMouseX + '/' + newMouseY;
if (richtung==1) {
diffX=newMouseY-lastMouseY;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' - diffX;
htmlImg.style['top']=htmlImg.style['top'].replace(re,'').replace(re1,'')-0 + diffX;
window.status=htmlImg.style['top'];
}
if (richtung==1) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['left']=htmlImg.style['left'].replace(re,'').replace(re1,'')-0 + diffX;
window.status=htmlImg.style['left'];
}
if (richtung==2) {
diffX=newMouseY-lastMouseY;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['height']=htmlImg.style['height'].replace(re,'').replace(re1,'')-0 + diffX;
window.status=htmlImg.style['height'];
}
if (richtung==3) {
diffX=newMouseY-lastMouseY;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['height']=htmlImg.style['height'].replace(re,'').replace(re1,'')-0 - diffX;
window.status=htmlImg.style['height'];
}
if (richtung==3) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['width']=htmlImg.style['width'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['width'];
}
if (richtung==4) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['left']=htmlImg.style['left'].replace(re,'').replace(re1,'')-0 - diffX;
window.status=htmlImg.style['left'];
ziehenachlinks(event)
}
if (richtung==5) {
diffX=newMouseY-lastMouseY;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['top']=htmlImg.style['top'].replace(re,'').replace(re1,'')-0 + diffX;
window.status=htmlImg.style['top'];
}
if (richtung==5) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['left']=htmlImg.style['left'].replace(re,'').replace(re1,'')-0 + diffX;
window.status=htmlImg.style['left'];
}
if (richtung==6) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['width']=htmlImg.style['width'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['width'];
}
if (richtung==7) {
diffX=newMouseY-lastMouseY;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['height']=htmlImg.style['height'].replace(re,'').replace(re1,'')-0 + diffX;
window.status=htmlImg.style['height'];
}
if (richtung==7) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['width']=htmlImg.style['width'].replace(re,'')-0 - diffX;
window.status=htmlImg.style['width'];
}
if (richtung==8) {
diffX=newMouseY-lastMouseY;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['height']=htmlImg.style['height'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['height'];
}
if (richtung==9) {
diffX=newMouseY-lastMouseY;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['height']=htmlImg.style['height'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['height'];
}
if (richtung==9) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['width']=htmlImg.style['width'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['width'];
}
lastMouseX=newMouseX;
lastMouseY=newMouseY;
}
}

</script>
</head>

<body width="800px" height="800px" onMouseDown="mouseDownBody(event)" onMouseUp="mouseUpBody(event)" onMouseMove="mouseMoveBody(event)">

<img id="img_sizeChange" src="sizeChange.gif" onmouseDown="changeSizeStart(event)" onmouseUp="changeSizeEnd(event)" style="position:relative; left:200px; top:150px; width:400px; height:300px; cursor:move">

</body>
</html>
 
Funktioniert das bei dir?
Bei mir nicht. Im FF ändert sich nur der Mauszeiger, im IE passiert irgendwas, aber nicht das was ich erwarte.
 
das kann bei dir ja nicht gehen, du hast das bild was ich habe nicht und im ie gehts bei mir auch nicht aber beim ff schon.

must vllt ein bild von dir ins script tun dann gehts wahrscheinlich
 
Jaja, hab ich natürlich gemacht.

Das Problem ist dein Skript funktioniert so nur im Quirksmodus, ich hatte noch einen DOCTYPE eingefügt.
 
Zuletzt bearbeitet:
ein schlauer schrieb:
Jaja, hab ich natürlich gemacht.

Das Problem ist dein Skript funktioniert so nur im Quirksmodus, ich hatte noch einen DOCTYPE eingefügt.
Zum Vergrößern anklicken....

was ist ein quirksmodus und ein doctype?? ich hab keine ahnung von dem zeug

:) pls help
 
ich guck mir grad das Skript an. Das stimmt nicht viel, dass muss komplett umgeschrieben werden. Ich hab grad Urlaub mal schauen wie weit ich komme, jetzt muss ich erst mal Frühstücken.

Ach, wegen DOCTYPE usw. du kennst google? Man kann das nicht mit 2 Sätzen erklären.
 
Das Skript ist im Dokument.

Das Problem im Standard mode tritt dort auch nicht mehr auf (das Dokument ist im Standardmode).

Wie gesagt such mal nach DOCTYPE
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben