tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
2979
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 16.11.08 15:30 #1
    NTDY NTDY ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    no-comment
    Beiträge
    136
    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.
     
    Zitieren Zitieren
  2. 16.11.08 15:57 #2
    Avatar von Alexander Schuc
    Alexander Schuc Alexander Schuc ist offline admin | crazy-weasel
    tutorials.de Administrator
    Registriert seit
    Aug 2001
    Ort
    Österreich, Stmk, Graz
    Beiträge
    2.783
    Hi.

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

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

    HTML-Code:
    <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,..
     
    With the first link the chain is forged. The first speech censored, the first thought forbidden, the first freedom denied, chains us all irrevocably.
    Aaron Satie

    Legends... are the spice of the universe, Mr. Data, because they have a way of sometimes coming true.
    Captain Jean-Luc Picard, Stardate ~41294.5

    Tutorials.de chattet. Hier gibts auch .net Support ^^
    Klickt auf chattet und nutzt den Webchat, oder verbindet euch zu irc.tutorials.de - Channel #Tutorials.de

    (moo)blog furred.net // SiteInfo für WP7 // Pastebin für WP7 // BlogEngine.net Extensions
    Zitieren Zitieren
  3. 16.11.08 19:04 #3
    NTDY NTDY ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    no-comment
    Beiträge
    136
    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.
    Geändert von NTDY (19.11.08 um 18:09 Uhr) Grund: Rechtschreibfehler.
     
    Zitieren Zitieren
  4. 19.11.08 18:09 #4
    NTDY NTDY ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    no-comment
    Beiträge
    136
    Hier noch der Code.

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    <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>
     
    Zitieren Zitieren
  5. 20.11.08 14:49 #5
    NTDY NTDY ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    no-comment
    Beiträge
    136
    Lange gesucht und dann endlich etwas gefunden. Verändert, angepasst und exklusiv nun hier:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

    <!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>
     
    Zitieren Zitieren
« Das richtige Escape | Mouseover im container »

Ähnliche Themen

  1. map area - Grafik auf Koordinaten
    Von Dustin84 im Forum CSS
    Antworten: 3
    Letzter Beitrag: 23.07.09, 12:25
  2. Grafik über einer anderen Grafik mit sensitiven verweisen bewegen
    Von matthoz im Forum Javascript & Ajax
    Antworten: 12
    Letzter Beitrag: 20.06.06, 19:28
  3. Koordinaten-Gitter in Grafik zeichnen
    Von Fleck06 im Forum PHP
    Antworten: 4
    Letzter Beitrag: 17.04.06, 20:23
  4. Problem: Grafik-OnMouseOver-Effekt mit Hotspots
    Von JavaNewb im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 16.08.04, 18:06
  5. koordinaten - grafik - progi
    Von BluntStream im Forum Photoshop
    Antworten: 8
    Letzter Beitrag: 14.04.02, 22:22

Stichworte