Homepage

Einführung

Teil 1

Teil 2

Teil 3

Teil 4

Panoramabilder, Teil 5

In dieser letzten Folge will ich nur noch beschreiben, wie die Steuerung meiner Panoramaprogramme aussieht. Hierbei muss ich leider gestehen, dass ich von JavaScript, das ich dabei einsetze, keine Ahnung habe. Immerhin konnte ich aber im Internet die erforderlichen Scriptfragmente finden und für den anspruchsvolleren Teil, nämlich die "Tooltips" habe ich auf die frei erhältliche JavaScript-Bibliothek von Walter Zorn zurückgreifen können.

Das Codefragment für den Teil, der die X-Y-Koordinaten des Mauszeigers und die daraus berechnete Richtung (Azimut) ganz oben links anzeigt, sieht so aus:

<script type="text/javascript">
<!--
var x, y;
document.onmousemove=holKoordinaten;

function runde(x, n) {
if (n < 1 || n > 14) return false;
var e = Math.pow(10, n);
var k = (Math.round(x * e) / e).toString();
if (k.indexOf('.') == -1) k += '.';
k += e.toString().substring(1);
return k.substring(0, k.indexOf('.') + n+1);
}

function holKoordinaten(e){
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY)
{
posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop;
}

var Az=168.5196 + 0.0037805689*(posx-9);

document.form1.mc.value ='X: '+(posx-9)+' Y: '+(posy-9)+' Der Mauspfeil zeigt in Richtung '+runde(Az,2)+" Grad";
}
//-->
</script>

Sie erkennen die beiden rot hervorgehobenen Zahlenwerte. Es sind dies die über die Linearregression berechneten Werte q und m, die natürlich für jedes neue Panoramabild wieder neu zu berechnen sind und jeweils anders lauten.

Im Abschnitt "head" findet sich noch folgender Code

<head>

.....

form, input{
padding:0;
margin:0;
top:0;
left:0;
z-index:1;
position:fixed;
}

....

</head>

Im HTML-Abschnitt "body" folgt dann noch

<body>

.....

<form name="form1" action="">
<input name="mc" SIZE = "61" style="position: absolute;">
</form>

<p><img src="T2_0116_0136CL.jpg" width="27380" height="2217" border="0" usemap="#Map">

<map name="Map">

Nun folgt der arbeitsintensive Teil des Codes, der die Informationen für die mit der Maus berührten Bildteile in einem kleinen Fenster darstellt:

....

<area onmouseover="this.T_WIDTH=200;return escape('<strong><center>Katharinenberg, Kaiserstuhl<br> 205.70 Grad<br> 28.5 km<br>48.11683° Nord, 7.68912° Ost<br>h = 492 m<br></strong></center>')" shape="rect" coords="9805,239,9869,264">

....

Und am Schluss steht noch das Einbeziehen der Tooltip JavaScript-Datei von Walter Zorn an:

<script language="javascript" src="wz_tooltip.js"></script>

</body>

Und das ist dann auch schon alles gewesen.

 

 

Die Seite wurde erstellt am 23.06.2006

Letzte Aktualisierung: 23.06.2006