Saskia: größe des divs element mit maus position

SELF-Forum

größe des divs element mit maus position

Saskia
– Informationen zu den Bewertungsregeln

Hallo!

Ich möchte gerne einen Rahmen über ein Bild zeichnen um letztendlich einen Zoomfaktor zu bestimmen.

Nun habe ich versucht diesen Rahmen als DIV-Element zu realisieren. Das klappt an sich auch, nur habe ich ein Problem mit den Mouseevents.

Ich möchte folgends: Ich klicke mit der linken Maustaste und halte diese gedrückt (mousedown). Dann bewege ich die Maus um den Rahmen zu ziehen (mousemove). Wenn ich die Maustaste wieder loslasse, soll der Rahmen verschwinden.

Der Rahmen wird bei mir aber erst gezogen, wenn ich einen Klick ausführe, also mousedown und mouseup. Dann kann ich einen Rahmen zeichnen ohen dass die Maustaste weiter gedrückt sein muss. Wenn ich dann noch mal einen Klick mache, verschwindet zwar der Rahmen aber der Modus beginnt von vorn.

Hier mal mein Code, ich hoffe jemand kann mir helfen:

<HTML>  
<HEAD>  
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=WINDOWS-1252">  
  <META NAME="GENERATOR" CONTENT="Oracle9i JDeveloper">  
    <TITLE>Infomgt Client Example</TITLE>  
    <!-- ExtJs -->  
	<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> 	  
	<script type="text/javascript" src="extjs/ext-all.js"></script>  
 	<script type="text/javascript">  
  
	browser = window.navigator.userAgent;  
	is_ie  = ( (browser.indexOf('MSIE') != -1) && (browser.indexOf('Opera') == -1) );  
  
	dragStartX = null; // X-Position des Mauszeigers bei Mousedown  
	dragStartY = null; // Y-Position des Mauszeigers bei Mousedown  
 	  
 	Ext.onReady(function() {  
 		// Eventhandler  
 		document.topimage.onmousedown = mouse_down;  
 		document.topimage.onmousemove = mouse_move;  
 		document.topimage.onmouseup = mouse_up;  
 	});  
  	  
	function mouse_down(e) {  
	  
			if (is_ie) {  
            	// IE  
                dragStartX = window.event.clientX; // Klickposition der Maus speichern  
                dragStartY = window.event.clientY; // Klickposition der Maus speichern  
            } else {  
            	// FF, Opera, Safari..  
            	dragStartX = e.pageX;				// Klickposition der Maus speichern  
                dragStartY = e.pageY;				// Klickposition der Maus speichern  
            }  
  
           	zoomlayer = document.getElementById("zoomlayerdiv");  
           	zoomlayer.style.width = '1px';  
           	zoomlayer.style.height = '1px';  
           	zoomlayer.style.border = '2px solid #ff3300';  
           	zoomlayer.style.overflow = 'hidden';		    			  
	};  
	  
	function mouse_move(e) {  
		actPosX = null;  // aktuelle X-Position der Maus  
        actPosY = null;  // aktuelle Y-Position der Maus  
  
        zoomlayer = document.getElementById("zoomlayerdiv");  
		  
		    if (is_ie) {  
        	   	// IE  
                actPosX = window.event.clientX;		// aktuelle Klickposition der Maus speichern  
              	actPosY = window.event.clientY;		  
            } else {  
              	// FF, Opera, Safari..  
               	actPosX = e.pageX;					// aktuelle Klickposition der Maus speichern  
                actPosY = e.pageY;  
            }  
  
            // Startposition des DIVs setzen (linke obere Ecke)  
            if (is_ie == true) {  
           		zoomlayer.style.pixelLeft = dragStartX;  
           		zoomlayer.style.pixelTop = dragStartY;  
           	} else {  
           		zoomlayer.style.left = dragStartX;  
           		zoomlayer.style.top = dragStartY;  
           	}  
  
            // Neue H&ouml;he und Breite des DIVs beim Mausbewegen berechnen  
            var newDivWidth = actPosX - dragStartX;  
            var newDivHeight = actPosY - dragStartY;  
		  
			zoomlayer.style.width = newDivWidth;  
			zoomlayer.style.height = newDivHeight;  
			zoomlayer.style.overflow = 'hidden';  
	   	  
	   		zoomlayer.style.visibility = 'visible';  
		  
	};  
	  
	function mouse_up() {  
		zoomlayer.style.visibility = 'hidden';  
	};  
   </script>  
</HEAD>  
<BODY>  
  
<div id="alllayers">  
	  
	<div id="imagelayerdiv" style="position:absolute; width:100%; height:100%; z-index:10; visibility: visible">  
		<img id="bild" name="bild" src="images/blindbild.gif" align="center" />  
	</div>	  
	<div id="zoomlayerdiv" style="position:absolute; left:0px; top:0px; z-index:30; visibility: hidden">  
		<img id="zoomlayer" name="zoomlayer" src="images/transparent.gif" width="3px" height="3px" align="middle" />  
	</div>  
	<div id="toplayer" style="position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:99; visibility: visible">  
		<img name="topimage" id="topimage" src="images/transparent.gif" width="100%" height="100%" border="0">  
	</div>  
</div> <!-- alllayers -->  
  
</BODY>  
</HTML>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. größe des divs element mit maus position

    Deus Figendi
    – Informationen zu den Bewertungsregeln

    Hallo!

    Hallo!

    Der Rahmen wird bei mir aber erst gezogen, wenn ich einen Klick ausführe, also mousedown und mouseup. Dann kann ich einen Rahmen zeichnen ohen dass die Maustaste weiter gedrückt sein muss. Wenn ich dann noch mal einen Klick mache, verschwindet zwar der Rahmen aber der Modus beginnt von vorn.

    (...)

    Ext.onReady(function() {
    // Eventhandler
    document.topimage.onmousedown = mouse_down;
    document.topimage.onmousemove = mouse_move;
    document.topimage.onmouseup = mouse_up;
    });

    Ich hab gerade einen Mittagsschlaf gemacht und da kam mir so die Idee, dass das mouseup-Event vielleicht nicht auf topimage feuert, sondern auf deinem zoomlayer. Zumal die im DOM nebeneinander und nicht ineinander liegen. (Optisch liegen sie wohl übereinander ^^)

-- 
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ\_de:] zu:) fl:( ss:| ls:[ js:(
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln