kostenloser Webspace werbefrei: lima-city


javascript: warum geht mein onmouseenter nicht?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    simuliertes

    Kostenloser Webspace von simuliertes

    simuliertes hat kostenlosen Webspace.

    Hallo :wave:

    Ich erstelle mit js mehrere DIV's(tiles) in denen ein css-hintergrund-bild ist.
    Ich möchte wissen in welchem element sich gerade die maus befindet.
    Ich komme nicht dahinter warum mein onmouseenter nicht funktioniert....

    Der entsprechende ausschnitt vom tag/code">code:
    var oImg=document.createElement("div");
    				//oImg.setAttribute('src', 'img/test/tile31x31.png');
    				
    				oImg.className = 'tile'+' '+x+' '+y;
    				oImg.style.top  = ypos+'px';
    				oImg.style.left = xpos+'px';
    				oImg.style.width = tileWidth + 'px';
    				oImg.style.height =tileHeight+ 'px';
    				//oImg.style.background = "url('img/test/tile31x31.png') -"+xpos+"px -"+ypos+"px";
    				
    				oImg.style.background = "url('img/test/licht2_all.png') -"+xpos+"px -"+ypos+"px";
    				
    				oImg.onmouseenter=function () {
    				document.getElementById('debug').innerHTML =	'blip';
    				//tilemouseinTop=this.style.offsetTop;
    				//tilemouseinLeft=this.style.offsetLeft;
    				//document.getElementById('debug').innerHTML =	tilemouseinTop+','+tilemouseinLeft;	
         };
    				
    				document.getElementById('debug').setAttribute("style","left: "+(tileWidth*mapWidth+10)+"px; top: 10;");
    				
    				document.getElementById('debug').innerHTML='debugtext';
    				document.getElementById('mapwindow').appendChild(oImg);


    Die ganze html-seite:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>LICHT!</title>
    	<style type="text/css">
    		div {position: absolute;}
    	</style>
        <script src="js/jquery-1.12.3.min.js" type="text/javascript"></script>
        <script type="text/javascript">
     
     var mousePos;
     document.onmousemove = handleMouseMove;
    
     function handleMouseMove(event) {
     var dot, eventDoc, doc, body, pageX, pageY;
    
     event = event || window.event; // IE-ism
    
     // If pageX/Y aren't available and clientX/Y are,
     // calculate pageX/Y - logic taken from jQuery.
     // (This is to support old IE)
     if (event.pageX == null && event.clientX != null) {
     eventDoc = (event.target && event.target.ownerDocument) || document;
     doc = eventDoc.documentElement;
     body = eventDoc.body;
    
     event.pageX = event.clientX +
     (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
     (doc && doc.clientLeft || body && body.clientLeft || 0);
     event.pageY = event.clientY +
     (doc && doc.scrollTop || body && body.scrollTop || 0) -
     (doc && doc.clientTop || body && body.clientTop || 0 );
     }
    
     mousePos = {
     x: event.pageX,
     y: event.pageY
     };
     }
    
       function lineDistance( p1x, p1y, p2x, p2y )
        {
          var xs = 0;
          var ys = 0;
    		     
         
          xs = (p1x < p2x)?p2x - p1x: p1x - p2x;
          xs = xs * xs;
         
          ys = (p1y < p2y)?p2y - p1y: p1y - p2y;
          ys = ys * ys;
         
          return Math.sqrt( xs + ys );
        }
        
        
        
        var tileWidth = 31;
        var tileHeight= 31;
        var  mapWidth   = 32;
        var  mapHeight = 32;
        var tilemouseinLeft=0
        var tilemouseinTop=0
        
        $( document ).ready(function() {
            document.getElementById('mapwindow').style.width =(mapWidth*tileWidth)  +'px';
            document.getElementById('mapwindow').style.height=(mapHeight*tileHeight)+'px';
            document.getElementById('mapwindow').style.backgroundColor='#000';
            
            var mouselight=document.createElement("img");
    				mouselight.setAttribute('src', 'img/test/lichtmouse.png');
    				mouselight.setAttribute('id', 'mouselight');
    				mouselight.style.visibility = 'hidden';
    				mouselight.style.position = 'absolute';
    				document.body.appendChild(mouselight);
            
            
            for(var y=0;y <= mapHeight;y++){
            	for(var x=0;x <= mapWidth;x++){
            		var xpos= x*tileWidth;
            		var ypos= y*tileHeight;
            		var oImg=document.createElement("div");
    				//oImg.setAttribute('src', 'img/test/tile31x31.png');
    				
    				oImg.className = 'tile'+' '+x+' '+y;
    				oImg.style.top  = ypos+'px';
    				oImg.style.left = xpos+'px';
    				oImg.style.width = tileWidth + 'px';
    				oImg.style.height =tileHeight+ 'px';
    				//oImg.style.background = "url('img/test/tile31x31.png') -"+xpos+"px -"+ypos+"px";
    				
    				oImg.style.background = "url('img/test/licht2_all.png') -"+xpos+"px -"+ypos+"px";
    				
    				oImg.onmouseenter=function () {
    				document.getElementById('debug').innerHTML =	'blip';
    				//tilemouseinTop=this.style.offsetTop;
    				//tilemouseinLeft=this.style.offsetLeft;
    				//document.getElementById('debug').innerHTML =	tilemouseinTop+','+tilemouseinLeft;	
         };
    				
    				document.getElementById('debug').setAttribute("style","left: "+(tileWidth*mapWidth+10)+"px; top: 10;");
    				
    				document.getElementById('debug').innerHTML='debugtext';
    				document.getElementById('mapwindow').appendChild(oImg);
    				//oImg.style.visibility="hidden";
    				
    				var lightLeft= oImg.cloneNode();
    				lightLeft.style.background = "url('img/test/licht2_left.png') -"+xpos+"px -"+ypos+"px";
    				lightLeft.className = 'tile lightLeft'+' '+x+' '+y;
    				document.getElementById('mapwindow').appendChild(lightLeft);
    				
    				var lightRight= oImg.cloneNode(false);
    				lightRight.style.background = "url('img/test/licht2_right.png') -"+xpos+"px -"+ypos+"px";
    				lightRight.className = 'tile lightRight'+' '+x+' '+y;
    				document.getElementById('mapwindow').appendChild(lightRight);
    				
    				var lightTop= oImg.cloneNode(false);
    				lightTop.style.background = "url('img/test/licht2_top.png') -"+xpos+"px -"+ypos+"px";
    				lightTop.className = 'tile lightTop'+' '+x+' '+y;
    				document.getElementById('mapwindow').appendChild(lightTop);
    				
    				var lighBottom= oImg.cloneNode(false);
    				lighBottom.style.background = "url('img/test/licht2_bottom.png') -"+xpos+"px -"+ypos+"px";
    				lighBottom.className = 'tile lightBottom'+' '+x+' '+y;
    				document.getElementById('mapwindow').appendChild(lighBottom);
    				
    				
    				
      				}
    			  				
      					
      			}
    		document.getElementById('mapwindow').onmousemove=function(e){
    		   var mx= mousePos.x;
       		var my= mousePos.y;
    			var tiles= document.getElementById('mapwindow').getElementsByTagName('DIV');
    			for(var i=0;i < tiles.length; i++){
    
    						
    				//
    				var lt=tiles[i].offsetLeft;
    				var tt=tiles[i].offsetTop;
    				var maxDist=300;
    				var distLeft=(lt >= mx)?lt-mx:mx-lt;
    				var distTop =(tt >= my)?tt-my:my-tt;
    				if (distLeft <= maxDist && distTop <= maxDist){
    					var dist = lineDistance(lt, tt, mx,my);
    					if(dist <= maxDist){
    						var op= 1-(distLeft/maxDist);
    						tiles[i].style.opacity = op;
    						//tiles[i].setAttribute("style","opacity:"+op+"; -moz-opacity:"+op+"; filter:alpha(opacity="+(op*100)+")");
    						
    						if(tiles[i].className.includes('lightBottom') && tt >= my)
    							tiles[i].style.visibility='hidden';						
    						if(tiles[i].className.includes('lightBottom') && tt <= my)
    							tiles[i].style.visibility='visible';
    						if(tiles[i].className.includes('lightTop') && tt <= my)
    							tiles[i].style.visibility='hidden';						
    						if(tiles[i].className.includes('lightTop') && tt >= my)
    							tiles[i].style.visibility='visible';
    						if(tiles[i].className.includes('lightLeft') && lt <= mx)
    							tiles[i].style.visibility='hidden';						
    						if(tiles[i].className.includes('lightLeft') && lt >= mx)
    							tiles[i].style.visibility='visible';
    						if(tiles[i].className.includes('lightRight') && lt >= mx)
    							tiles[i].style.visibility='hidden';						
    						if(tiles[i].className.includes('lightRight') && lt <= mx)
    							tiles[i].style.visibility='visible';								
    						//*/
    					}
    					
    				}else{
    					tiles[i].style.visibility='hidden';				
    				}			
    			}
    			mouselight.style.visibility = 'visible';
    			 
    			mouselight.style.top = (my-150)+'px';
    			mouselight.style.left= (mx-150)+'px';
    			
    			//p.offset();
    		//document.getElementById('mapwindow').style.backgroundColor='#a00';
    		};
        });
    
        </script>
    </head>
    <body>
    <div id="mapwindow"></div>
    <div id="debug"></div>
    </body>
    </html>


    Die Seite zum ausprobieren:
    http://simuliertes.lima-city.de/spielplatz/licht/licht2.html
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Drück mal F12 in deinem Browser und geh auf Konsole... solltest du dir angewöhnen, dann würde dein Browser dich mit der Nase in diesen Kot stecken, den du da fabriziert hast... oder eben Mistig zusammenkopiert hast.

    Dort wirst du sehr viele Fehler sehen, die bei mir dazu geführt haben, dass mein Browser abgestürzt ist... und was ich mehr hasse als Browserabstürze am Morgen, wurde noch nicht erfunden...

    Du hast einen total widerlichen Programmierstil aus den 90ern, das ist übelster Spaghetti-Code, formatierung nicht vollständig, also schlampig dahingerotzt...

    Dann bindest du die jquery lib ein und nutzt sie nicht... mit jquery könntest du den ganzen schnodder da locker auf 1/3 reduzieren...

    Ich würd sagen, schmeiß weg, schreib neu... da es Eh aussieht, wie ein Lernprojekt ohne Sinn, wäre es auch das sinnvollste. Diesmal fängst du jedoch mit einem Konzept an, malst dir einen Prototypen auf Papier, 1-2 hilfreiche UML-Diagramme und dann arbeitest du das ab, ohne Codeblöcke von 1995 zu kopieren... vielleicht ein paar Kommentare zu Sinnabschnitten und vielleicht schon etwas OOP orientiert... bschäftige dich mit jquery... und vielleicht wirds dann was...


    ------------------------------------
    Notiz an mich selbst: Nie wieder früh versuchen wem zu helfen... Verursacht hohen Blutdruck und versaut einem den Tag...
  4. TypeError: tiles[i].className.includes is not a function

    Ich weiß nicht, woher du includes hast, aber wenn du es nirgends im Code hast, kannst du es auch nicht nutzen.
    Abhilfe:
    tiles[i].className.includes('lightRight')
    wird zu
    tiles[i].className.indexOf('lightRight')>=0
  5. test42test schrieb:
    TypeError: tiles[i].className.includes is not a function

    Ich weiß nicht, woher du includes hast, aber wenn du es nirgends im Code hast, kannst du es auch nicht nutzen.
    Abhilfe:
    tiles[i].className.includes('lightRight')
    wird zu
    tiles[i].className.indexOf('lightRight')>=0


    https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/includes

    daher...

    und wenn man sich die Browsercompatibilität anschaut, wird auch klar, wo die Fehler liegen... mein Maxthon hat eine etwas ältere Version von WebKit, von daher kann der das nicht... aber oben extra mit kommentar was für ältere IE-Browser... total bescheuert...

    Ach ja, was noch witzig ist: das onmouseenter-Event wurde bei Chrome zum beispiel erst sehr spät implementiert... ich würde auf onmouseover und onmouseout als gegenevent dazu plädieren....

    http://www.w3schools.com/jsref/event_onmouseover.asp

    Also auch bezüglich browserkompatibilität kein Konzept, alles nur zusammenkopiert^^
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!