|
|
hallo!!!
habe ein Problem, habe die Aufgabe ein Bild durch ein script verändern zu können.
Ich muss das bild durch die maus auf allen seiten und ecken langziehen können.
Hier ist das script das ich bi 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);
richtung=htmlElem.id.substr(4)-0;
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;
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==6) {
diffX=newMouseX-lastMouseX;0
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==2) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['top']=htmlImg.style['top'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['top'];
}
if (richtung==8) {
diffX=newMouseX-lastMouseX;
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==4) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['left']=htmlImg.style['left'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['left'];
}
if (richtung==3) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['top; width']=htmlImg.style['top; width'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['top; width'];
}
if (richtung==1) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['left; top']=htmlImg.style['left; top'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['left; top'];
}
if (richtung==7) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['left; heigth']=htmlImg.style['left; height'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['left; height'];
}
if (richtung==9) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['height; width']=htmlImg.style['height; width'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['height; width'];
}
if (richtung==5) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['width; top; left; height']=htmlImg.style['width; top; left; height'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['width; top; left; height'];
}
lastMouseX=newMouseX;
lastMouseY=newMouseY;
}
}
</script>
</head>
<body width="800px" height="800px" onMouseDown="mouseDownBody(event)" onMouseUp="mouseUpBody(event)" onMouseMove="mouseMoveBody(event)">
<map name="sizeChangeMap">
<area id=area1 shape="rect" coords="0,0,100,75" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: nw-resize;">
<area id=area2 shape="rect" coords="100,0,300,75" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: n-resize;">
<area id=area3 shape="rect" coords="300,0,400,75" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: ne-resize;">
<area id=area4 shape="rect" coords="0,75,100,225" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: nw-resize;">
<area id=area5 shape="rect" coords="100,75,300,225" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: n-resize;">
<area id=area6 shape="rect" coords="300,75,400,225" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: ne-resize;">
<area id=area7 shape="rect" coords="0,225,100,300" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: nw-resize;">
<area id=area8 shape="rect" coords="100,225,300,300" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: n-resize;">
<area id=area9 shape="rect" coords="300,225,400,300" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: ne-resize;">
</map>
<img id="img_sizeChange" src="sizeChange.gif" usemap="sizeChangeMap" style="position:absolute; left:200px; top:150px; width:400px; height:300px; cursor:crosshair">
</body>
</html>
danke im voraus
|
|
| 03.08.2005 13:41:08 |
|
|
|
jokl schrieb:
hallo!!!
habe ein Problem, habe die Aufgabe ein Bild durch ein script verändern zu können.
Ich muss das bild durch die maus auf allen seiten und ecken langziehen können.
Hier ist das script das ich bi 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);
richtung=htmlElem.id.substr(4)-0;
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;
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==6) {
diffX=newMouseX-lastMouseX;0
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==2) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['top']=htmlImg.style['top'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['top'];
}
if (richtung==8) {
diffX=newMouseX-lastMouseX;
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==4) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['left']=htmlImg.style['left'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['left'];
}
if (richtung==3) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['top; width']=htmlImg.style['top; width'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['top; width'];
}
if (richtung==1) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['left; top']=htmlImg.style['left; top'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['left; top'];
}
if (richtung==7) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['left; heigth']=htmlImg.style['left; height'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['left; height'];
}
if (richtung==9) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['height; width']=htmlImg.style['height; width'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['height; width'];
}
if (richtung==5) {
diffX=newMouseX-lastMouseX;
htmlImg=document.getElementById('img_sizeChange');
window.status='schiebe: ' + diffX;
htmlImg.style['width; top; left; height']=htmlImg.style['width; top; left; height'].replace(re,'')-0 + diffX;
window.status=htmlImg.style['width; top; left; height'];
}
lastMouseX=newMouseX;
lastMouseY=newMouseY;
}
}
</script>
</head>
<body width="800px" height="800px" onMouseDown="mouseDownBody(event)" onMouseUp="mouseUpBody(event)" onMouseMove="mouseMoveBody(event)">
<map name="sizeChangeMap">
<area id=area1 shape="rect" coords="0,0,100,75" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: nw-resize;">
<area id=area2 shape="rect" coords="100,0,300,75" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: n-resize;">
<area id=area3 shape="rect" coords="300,0,400,75" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: ne-resize;">
<area id=area4 shape="rect" coords="0,75,100,225" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: nw-resize;">
<area id=area5 shape="rect" coords="100,75,300,225" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: n-resize;">
<area id=area6 shape="rect" coords="300,75,400,225" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: ne-resize;">
<area id=area7 shape="rect" coords="0,225,100,300" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: nw-resize;">
<area id=area8 shape="rect" coords="100,225,300,300" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: n-resize;">
<area id=area9 shape="rect" coords="300,225,400,300" onMouseDown="changeSizeStart(event)" onMouseUp="changeSizeEnd(event)" style="cursor: ne-resize;">
</map>
<img id="img_sizeChange" src="sizeChange.gif" usemap="sizeChangeMap" style="position:absolute; left:200px; top:150px; width:400px; height:300px; cursor:crosshair">
</body>
</html>
danke im voraus |
Ganz einfach!
|
|
| 21.08.2007 23:20:30 |
|
Wechsel zu
Die letzten Beiträge aus diesen Forum
|
|
