javascript: warum geht mein onmouseenter nicht?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abhilfe
browser
code
diagramm
fehler
formatierung
http
kommentar
konzept
nase
not
nutzen
papier
reduzieren
spaghetti
spielplatz
tag
test
url
weben
-
Hallo
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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... -
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^^ -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
