✔ OnMouseover Koordinaten einer Grafik

N

NTDY

Erfahrenes Mitglied
Für ein Programm, dass den Nachhall in Konzertsälen berechnet würde ich gern folgende Javscript Funktionalität haben.

Man besitzt ein Bild einer Aufsicht eines Konzertsaales. Wenn man mit der Mouse über diese Grafik geht, soll das Programm die Koordinaten x und y nur von dem Bild zeigen. Die meisten Lösungen, die ich gefunden habe, beziehen sich leider immer auf die gesamte Webseite. Die Grafik ist aber verschieden groß und demnach immer verschieden auf der Webseite positioniert.
 
Hi.

Würde es dich stören das prototype javascript framework zu verwenden?

Wenn nein, könntest es so lösen:

HTML: 
<div id="info">#(0/0)</div>
<img id="image" src="..." />

<script type="text/javascript">
	$('image').observe("mousemove", function(ev)
	{
		var pos = ev.element().positionedOffset();
		$('info').update("(" + (ev.pointerX() - pos.left) + "/" + (ev.pointerY() - pos.top) + ")");
	});		
</script>

(Testweise mal die Koordinaten in einen Div ausgegeben. Damits klappt nur noch in ein HTML Gerüst stecken, Bildurl hinzufügen, und noch das Prototypescript einbinden.)

lg,..
 
Leider ist dies immer noch nicht perfekt. Ich habe nun einige Tests damit gemacht und bin immer noch am probieren wie folgende Punkte funktionieren.

1. Ich wollte die Position, die angezeigt wird umgerechnet haben in einen Verhältniswert.
Bsp. Das Bild zeigt eine Konzertsaalaufsicht einer Raumgröße von 20m x 15m. Und das Bild ist bspw. 640x480 Pixel groß und man fährt mit der Mouse auf der Position auf die Position 400 für X und 200 für Y, dann sind die Werte, die angezeigt werden müssten in Meter 12,5m für X und 6,25m für Y. In meinem Code, funktioniert die allerdings nicht.

2. Ich möchte, dass der User mit der Mouse auf eine Bildposition klickt und diese Werte dann einfrieren und in ein Formular eingefügt werden, damit man dann auf Absenden drücken kann und die Werte dann vom Formular ausgewertet werden. Allerdings scheint es, dass nur div akzeptiert wird.
 
Zuletzt bearbeitet:
Hier noch der Code.

Code: 
<html>
<head>
	<script type="text/javascript" src="prototype-1.6.0.2.js"></script>
</head>
<body>
	<img id="image" src="bild.jpg" width="640" height="480" />
	<script type="text/javascript">
		var raum_breite = 20;
		var bild_breite =640;
		var raum_hoehe =  15;
		var bild_hoehe = 480;		
		
        $('image').observe("mousemove",function(ev){	var pos = ev.element().positionedOffset();		var position_x = $('info').update(ev.pointerX() - pos.left*raum_breite/bild_breite)});
        $('image').observe("mousemove",function(ev){	var pos = ev.element().positionedOffset();		var position_x = $('info2').update(ev.pointerY() - pos.top*raum_hoehe/bild_hoehe)});
    </script>
    <form action="#" method="post">
        <div id="info" title="PosX" value="position_x;" />
        <div id="info2" title="PosY" value="position_y;" />
        <input type="submit" value="Berechnen" />
    </form>
</body>
</html>
 
Lange gesucht und dann endlich etwas gefunden. Verändert, angepasst und exklusiv nun hier:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
<!--
function showPosition(evt)
{
	xy = getEventOffsetXY( evt );
	document.getElementById("myDiv").innerHTML="x: "+xy[0]+" / y: "+xy[1];

};

function ooclick(evt,width,height){
	var w = width;
	var h = height;	
	xy = getEventOffsetXY( evt );
	document.Form.elements['zwei'].value=Math.round(xy[0]/w*15*100)/100;	
	document.Form.elements['eins'].value=Math.round(xy[1]/h*10*100)/100;
}

function getEventOffsetXY( evt )
{
	if (evt.offsetX != null)
		return [ evt.offsetX , evt.offsetY ];
		
    var obj = evt.target || evt.srcElement;
   	setPageTopLeft( obj );
    return [ ( evt.clientX - obj.pageLeft ) , ( evt.clientY - obj.pageTop ) ];
};

function setPageTopLeft( o )
{
    var top = 0,
    left = 0,
    obj = o;

    while ( o.offsetParent )
     {
         left += o.offsetLeft ;
         top += o.offsetTop ;
         o = o.offsetParent ;
    };

    obj.pageTop = top;
    obj.pageLeft = left;

};

function clearInfo( evt )
{
	document.getElementById( "myDiv" ).innerHTML = "";
}
-->
</script>

<style type="text/css">
* { padding: 0px; margin: 0px }
</style>
</head>

<body>
<br>
<script language="javascript">
var width=640;
var height=480;
</script>
<div align="center"><img id="myImage" hspace="0" vspace="0" onmousemove="showPosition(event)" src="bild.jpg" height="480" width="640" border="1" onmouseout="clearInfo(event)" onClick="javascript:ooclick(event,width,height);"></div>

<div align="center" id="myDiv" style="width:400px; height:100px;"></div>
<form action="#" method="post" name="Form" >    
        X Koordinate: <input size="100" type="text" name="zwei" value="1">  
		Y Koordinate: <input size="100" type="text" name="eins" value="1" id="info"> <br />        
</form>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück