Martin Weber: JavaScript: Quelle von onmouseover

Beitrag lesen

SELF-Forum

JavaScript: Quelle von onmouseover

Martin Weber
– Informationen zu den Bewertungsregeln

Hallo Mathias,

ich möchte damit einen bestimmten Bereich markieren. Es geht hierbei um ein Browsergame wo ich einem Spieler einer Mannschaft einen Wirkungsbereich zuordne, welchen man frei auswählen können soll.
Habs jetz bissl anders gelöst:

  
<html>  
    <head>  
        <script type="text/javascript" >  
[code lang=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>

[/code]

Beitrag melden
–
Informationen zu den Bewertungsregeln