Flying DIV geht nur im IE9

frambo88 · 17. Nov. 2015

Hallo liebe Gemeinde,

ich möchte auf einer Seite ein Bild einbinden, beim überfahren mit der Maus sollen die Koordinaten (später noch Umrechnung in Geokoordinaten) on-the-fly in einem "schwebenden Fenster" angezeigt werden. Dazu folgender Codeschnipsel:

Code:

<script type="text/javascript">

function showPosition(evt) {
	
    xy = getEventOffsetXY(evt);
        
    document.getElementById("myDiv").innerHTML="x: "+xy[0]+" / y: "+xy[1];
    var d = document.getElementById("myDiv");
    d.style.left = xy[0];
    d.style.top = xy[1];    
 
};
  
function getEventOffsetXY(evt) {
    
	if (evt.offsetX != null)
        return [ evt.offsetX , evt.offsetY ];
       
};
 
 
function clearInfo(evt) {
    document.getElementById("myDiv").innerHTML = "";
}

</script>

 
<div align="center" id="myDiv" style="width:200px; height:50px; border: solid 1px grey; z-index: 100; position: absolute; font-family: Arial;" ></div>

<img id="myImage" style="position: absolute;" hspace="0" vspace="0" onmousemove="showPosition(event)" src="image.png" height="840" width="1200" border="1" onmouseout="clearInfo(event)">

Das ist ja eigentlich zu überschauen und auf dem IE9 funktioniert das auch. Mit Chrome oder Firefox wird mir das Info-Fenster aber immer statisch oben links angezeigt und bewegt sich nicht mit der Maus mit. Die im div angezeigten Werte (x/y) ändern sich zwar, aber das div rückt nicht von der Stelle. Was läuft da falsch?

- - - Aktualisiert - - -

Warum findet man selbst erst eine Lösung, wenn man irgendwo fragt :grin:

Offenbar mag Chrome und Firefox es nicht, wenn ihnen nur die Werte zur Positionierung vorgeworfen werden.

Code:

d.style.left = xy[0] + "px";
d.style.top = xy[1] + "px";

bringt die Lösung. Erstaunlich finde ich nur, dass der IE9 das Fenster besser darstellt als Chrome und Firefox. Dort werden die Werte nur selten mal angezeigt, im IE9 kontinuierlich.

kkapsner · 17. Nov. 2015

frambo88 schrieb:
Offenbar mag Chrome und Firefox es nicht, wenn ihnen nur die Werte zur Positionierung vorgeworfen werden.

Das ist so im CSS-Standard festgelegt und ergibt ja auch Sinn. Es gibt in CSS ja viele verschiedene Einheiten (%, em, pt, etc.). Und der IE will auch Einheiten, wenn man nicht im Quirksmodus arbeitet (was ich dir dringend empfehle - genau solche Browserunterschiede werden dabei vermieden).

frambo88 schrieb:
Erstaunlich finde ich nur, dass der IE9 das Fenster besser darstellt als Chrome und Firefox. Dort werden die Werte nur selten mal angezeigt, im IE9 kontinuierlich.

Wenn du die Events in einem <div>, das sowohl das <img> als auch die Anzeige enthält, registrierst, sollten die beiden anderen Browser auch kontinuierlich anzeigen.

Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>

<style type="text/css">
#myDiv {
	width: 200px;
	height: 50px;
	border: solid 1px grey;
	z-index: 100;
	position: absolute;
	font-family: Arial;
	text-align: center;
}
#myImage {
	margin: 0;
	position: absolute;
	border: 1px solid black;
}
</style>
</head>
<body>
<script>
function showPosition(evt) {
    xy = getEventOffsetXY(evt);
    document.getElementById("myDiv").innerHTML="x: "+xy[0]+" / y: "+xy[1];
    var d = document.getElementById("myDiv");
    d.style.left = xy[0] + "px";
    d.style.top = xy[1] + 50 + "px";
};
  
function getEventOffsetXY(evt) {
	if (evt.offsetX != null)
	return [ evt.offsetX , evt.offsetY ];
}
 
 
function clearInfo(evt) {
    document.getElementById("myDiv").innerHTML = "";
}

</script>

<div onmousemove="showPosition(event)" onmouseleave="clearInfo(event)">
	<div id="myDiv"></div>
	<img id="myImage" src="/1.jpg" height="840" width="1200">
</div>
</body>
</html>

PS: Wenn du das #myDiv wirklich direkt unter dem Cursor anzeigen willst, wirst du mit dem offsetX/offsetY nicht glücklich werden, da du dich ja dann eigentlich über dem #myDiv befindest und somit der Offset zu diesem angezeigt wird. Deswegen in meinem Code oben das +50.

Flying DIV geht nur im IE9

frambo88

New member

kkapsner

Super Moderator