Where is ?

Mit einem kleinen Javascript kann jede Stelle einer Bilddatei mit einem Pfeil markiert werden. Mit Scroll- und Zoomfunktion wählt der Internet-Explorer-Benutzer den Bildauschnitt. Eingesetzt wird "whereis" z.B. für Strassenverzeichnisse und Ersatzteil-Beschreibungen. STABsoft erstellt betriebsfertige Verzeichnisse oder unterstützt bei der Einrichtung. Fortgeschrittene Anwender mit Kenntnissen in den Grundlagen von HTML und Javascript sind nach kurzer Einweisung in der Lage selber Verzeichnisse zu erstellen. Ein Anwendungs-Beispiel ist zu sehen im Strassenverzeichnis von Gaiberg

Das Programm ist Freeware für den privaten Gebrauch. 

Funktionsweise:

In der Internetseite wird in einem LInk nach dem Namen der Java-Script-Funktion "anzeige" die Position des Markierungspfeils (Pixel) im Bild angegeben.

    <a href="javascript:anzeige(85,346);">Hauptstrasse</a>

Das Bild wird unter dem Namen "karte.jpg" gespeichert, der Markierungspfeil steht in "pfeil.gif".

Im Kopf der Seite ist das folgende Javascript:

<!--><script language="JavaScript">
function anzeige(a,b)
{ 
abx=b - 190;if (abx<0){abx=0;}
aby=a - 135;if (aby<0){aby=0;}
nav=navigator.appName;
if (nav=="Netscape")
{ MeinFenster = window.open("kartes.htm", "Zweitfenster", "width=740,height=560,dependent=yes,resizable=yes");

z="<html><head><title>roter Pfeil zeigt auf gesuchte Strasse</title>";
z= z + '<' + 'script language="JavaScript" src="karte.js" type="text/javascript"><' + '/script>' ;
z=z + "<" + "/head><" + "body>";
z=z + "<img src='karte.jpg' height=540 width=700 ><h3>&nbsp</h3>";
z=z + '<layer name="Marker">';
z=z + '<img src="pfeil.gif" height=20 width=20></layer>'; 
z=z + "<" + "script language='JavaScript'>document.Marker.pageX=" + b
z=z + ";document.Marker.pageY=" + a + ";<" + "/script>";
z=z + '</body></html>';

MeinFenster.focus();MeinFenster.document.write(z); 

}

else {
MeinFenster = window.open("kartes.htm", "Zweitfenster", "width=380,height=270,scrollbars=yes,dependent=yes,resizable=yes");
z="<html><head><title>Klick=vergrössen, SHIFT-Klick=verkleinern</title>";
z= z + '<' + 'script language="JavaScript" src="karte.js" type="text/javascript"><' + '/script>' ;
z=z + "<" + "/head><" + "body>";

z=z + '<div id="NETZ" style="position: absolute; left: 1; top: 1">';
z=z + '<img src="karte.jpg" name="Karte" height=520 width=700 top=100 left=100 onclick="groesse(0);"></div>';
z=z + "<div id='PFEIL' style='position: absolute; left: 100 ; top: 100 ; '>";
z=z + '<img src="pfeil.gif" name="Merker" height=20 width=20 onclick="groesse(1);"></div>';
z=z + '</body></html>'
z=z + "<" + "script language='JavaScript'>window.scrollTo(" + abx + "," + aby + ");"
b=b-20;
z=z + "o=document.all.PFEIL.style;o.left=" + b + ";o.top=" + a + ";<" + "/script>" ;

MeinFenster.focus();MeinFenster.document.write(z);

}}


// --></script>

Zusätzlich wird eine Vorlage für das Bildfenster gebraucht. Diese steht unter dem Namen kartes.htm:

<html><head><title>Klick=vergrößern, SHIFT-Klick=verkleinern</title>
<script language="JavaScript">

function groesse()
{
h=document.Karte.height;
w=document.Karte.width;

if (window.event.ctrlKey==true)
{ ay=window.pageXOffset;
alert(ay);

} else {

if (window.event.shiftKey==true)
{h=h * 0.7;w=w*0.7} else {h=h*1.3;w=w*1.3;}

document.Karte.width=w;
document.Karte.height=h;

}}
// --></script></head><body onclick="groesse()";>

<layer name="Marker" top=50 left=50 width=10 height=10 bgcolor=blue></layer>


<script language="JavaScript">
document.Marker.pageX=10;
</script>
</html></body>