Fadenkreuz (JS)

Das vorgestellte Script gibt ein Fadenkreuz über dem bestehenden Dokument aus. Dabei können auch die aktuellen vertikalen bzw. horizontalen Positionsangaben (in Pixeln) in Infoboxen angezeigt werden. Damit kann das Script zum Beispiel während der Entwicklung zum Bestimmen von Positionen innerhalb des Dokuments verwendet werden.

• Download (JavaScript)

Beispiel

Fadenkreuz starten  Fadenkreuz beenden

Syntax

object = Fadenkreuz([boolShowInfo], [strTransImg]);

Das Fadenkreuzobjekt kann optional mit zwei Parametern aufgerufen werden. Ohne die Angabe von Parametern kann das Standardfadenkreuz verwendet werden.

• boolShowInfo
  boolscher Wert (true/false), der angibt, ob Infoboxen angezeigt werden sollen (true) oder nicht (false)
• strTransImg
  Pfad zum halbtransparenten Hintergrundbild inklusive Dateiname der Grafikdatei

Vorgehensweise

Die Handhabung ist einfach - es sind nur einige wenige Angaben notwendig.

1. JavaScript einbinden

Zunächst wird das benötigte JavaScript mit Hilfe der script-Tags in das Dokument eingebunden.

<script src="pfad_zum_script/qp_fadenkreuz.js" type="text/javascript"></script>

2. Pfad zum halbtransparenten Hintergrundbild

Der halbtransparente Hintergrund der Infoxboxen wird mit PNG-Grafiken realisiert (Ausnahme: Internet Explorer, hier über CSS-Filter). Der Pfad sowie der Dateiname der PNG-Datei muss festgelegt werden, um beim Instanziieren des Fadenkreuzes übergeben werden zu könnnen.

3. Fadenkreuz instanziieren

Im onload-Event kann nun das Fadenkreuz-Objekt instanziiert werden.

window.onload = function(){
  //  2. Pfad zum halbtransparenten Hintergrundbild
  var strImg = "pfad_zum_bild/transparenz.png";
  //  3. Fadenkreuz instanziieren
  objFadenkreuz = new Fadenkreuz(true, strImg);
}

Browserkompatibilität

Das Script wurde in folgenden Browsern erfolgreich getestet.

• IE 5.x, 6 und 7
• Firefox 1.5 und 2
• Opera 7.54, 8.5 und 9.01
  (mit kleinen Anzeigeproblemen bei Dokumentenbreite)
• Netscape 7.01
• Mozilla 1.5
• Konqueror 3.3

Anregungen und Verbesserungsvorschläge

Anregungen und Verbeserungsvorschläge können gerne hier gepostet werden. Selbstverständlich steht dafür auch das Kontaktformular zur Verfügung.

Foto: aboutpixel.de | sharex