JavaScript: Quelle von onmouseover

**Angel4585**

Habs gelöst, etwas anderer Lösungsansatz, wen es interessiert:

Code:

			<html>

    <head>

        <script type="text/javascript" >

            var isDown = false;

            var posLeft = 0;

            var posTop = 0;

            var posRight = 0;

            var posBottom = 0;

            function setRoam(id,left,top,width,height){

                document.getElementById(id).style.left = left;

                document.getElementById(id).style.top = top;

                document.getElementById(id).style.width = width;

                document.getElementById(id).style.height = height;

            }

            function startRoam(evt,id){

                var sender = evt.target.id;

                var diffX = 0;

                var diffY = 0;

                if(sender == id){

                    var roamdiv = document.getElementById(sender);

                    diffX = roamdiv.offsetLeft;

                    diffY = roamdiv.offsetTop;                    

                }

                document.getElementById("ausgabe").textContent = sender+"|"+id+"|"+(sender==id)+"|"+(evt.x || evt.layerX)+"+"+diffX +"|"+(evt.y || evt.layerY)+"+"+diffY;

                startX=(evt.x || evt.layerX)+diffX;

                startY=(evt.y || evt.layerY)+diffY;

                posLeft = startX

                posRight= startX;

                posTop=startY;

                posBottom=startY;

                isDown = true;

                setRoam(id,posLeft,posTop,posRight-posLeft,posBottom-posTop);

            }

            function changeRoam(evt,id){

                var sender = evt.target.id;

                var diffX = 0;

                var diffY = 0;

                if(sender == id){

                    var roamdiv = document.getElementById(sender);

                    diffX = roamdiv.offsetLeft;

                    diffY = roamdiv.offsetTop;

                }

                document.getElementById("ausgabe").textContent = sender+"|"+id+"|"+(sender==id)+"|"+(evt.x || evt.layerX)+"+"+diffX +"|"+(evt.y || evt.layerY)+"+"+diffY;

                var tempX=(evt.x || evt.layerX)+diffX;

                var tempY=(evt.y || evt.layerY)+diffY;

                if(tempX>=startX){

                    posLeft = startX;

                    posRight= tempX;

                }else{

                    posLeft = tempX;

                    posRight = startX;

                }

                if(tempY>=startY){

                    posTop   =startY;

                    posBottom=tempY;

                }else{

                    posTop   =tempY;

                    posBottom=startY;

                }

                if(isDown){

                    setRoam(id,posLeft,posTop,posRight-posLeft,posBottom-posTop);

                }

            }

            function endRoam(evt,id){

                if(isDown){

                    setRoam(id,posLeft,posTop,posRight-posLeft,posBottom-posTop);

                }

                isDown=false;

            }

        </script>

    </head>

    <body>

        <table>

            <tr>

                <td>

                    <div id="ausgabe" style="position:absolute;top:100px;left:10px;width:200px;height:50px;"></div>

                    <div id="feld1"

                        style="

                        background-image:url(feld.jpg);

                        position:absolute;

                        left:200px;

                        top:200px;

                        width:400px;

                        height:300px;"

                        onmousedown="startRoam(event,'roam1');"

                        onmousemove="changeRoam(event,'roam1');"

                        onmouseup="endRoam(event,'roam1');">

                    <div

                        style="position:absolute; top:210px;left:210px;height:50px;width:40px;background:red"

                        id="roam1"

                        onmousedown="startRoam(event,'roam1');"

                        onmousemove="changeRoam(event,'roam1');"

                        onmouseup="endRoam(event,'roam1');"></div>

                    </div>

                </td>

                <td></td>

            </tr>

        </table>

    </body>

</html>

JavaScript: Quelle von onmouseover

Re: JavaScript: Quelle von onmouseover

Forumregeln