IT-Academy Logo
Sign Up Login Help
Home - Programmieren - JavaScript - Infoboxen mit Javascript



Infoboxen mit Javascript

Dieses Tutorial will zeigen wie man mit Javascript Boxen erstellt die aufpoppen wenn der Mauszeiger über einen Text fährt. Dies ist interessant, da diese Boxen mit Javascript mehr können als das HTML-Attribut title.


Autor: Patrick Faes (dreamer)
Datum: 20-02-2004, 13:20:12
Referenzen: keine
Schwierigkeit: Fortgeschrittene
Ansichten: 10384x
Rating: 7 (7x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Einführung

Jeder kennt das Gefühl: man sieht einen Link oder einen Begriff in einem Text, und möchte etwas mehr darüber wissen. Hierfür stellt HTML das TITLE-Attribut zur Verfügung, jedoch ist dies meist unzureichend. Desweiteren ist die Darstellung Platform-abhängig. In Microsoft Internet Explorer z.B. ist die Schriftgröße festgelegt und bleibt der Text nur 7 bis 8 Sekunden sichtbar.

Wenn Sie wissen wollen, wie das in Ihrem Browser aussieht, dann halten Sie den Mauszeiger hierüber.

Wie Sie sehen konnten ist dies nicht das Gelbe vom Ei. Dazu bietet Javascript eine Lösung: Informationboxen die sichtbar bleiben, mit skalierbaren Schriften und sogar Bilder.

Einige Beispiele:
Katzen sind komische Tiere
Warum man in Paris immer einen Regenschirm dabei haben sollte...

Das Konzept

Bevor ich hier fortfahre und den Code zeige, werde ich erst mal in Theorie erklären wie dies funktioniert.
Auf der Seite steht ein unsichtbares DIV-element (weiter Box genannt). Darin enthalten sind ein Text und eine Grafik. Auf onMouseover (wenn die Maus über den Link fährt) wird eine Funktion aufgerufen die die Inhalte der Box ändert und die Box sichtbar macht. Die Box bleibt solange sichtbar bis der Mauszeiger vom Link geholt wird. Beim Verlassen des Links wird mit onMouseout eine andere Funktion aufgerufen die die Box wieder unsichtbar macht.

Die Daten die angezeigt werden sollen, sind gespeichert in "assoziative Arrays". Ein Array ist eine Variable die mehrere Werte hat. Assoziative Arrays sind Variablen wobei jeden Wert auch ein Array ist das aus mehreren Werten besteht.
Zu guter letzt sollte man für Besucher ohne Javascript auch noch das TITLE-Attribut hinzufügen. Da es ja eher blöd aussieht wenn dan zwei Boxen angezeigt werden, wird das TITLE-Attribut dann per Javascript geleert. Dazu fügt im onMouseover-Befehl this.title=' ' hinzu.

Die Praxis

Kommen wir jetzt mal zur Praxis. Ich werde jedes Code-Teil einzeln zeigen und besprechen. Fangen wir mal an mit diese "assoziative Arrays".

var info = new Array();

info[0] = new Array();
info[0] ["textinhalt"] = "Text 1";
info[0] ["textfarbe"] = "blue";
info[0] ["hintergrundfarbe"] = "yellow";
info[0] ["weite"] = 200;
info[0] ["grafik"] = "angry_cat.jpg";
Als erstes wird die Variable info deklariert als ein Array. Danach wird die Variable (Element des Arrays) info[0] (Javascript fängt immer von Null an zu zählen, also ist 0 = 1) auch als ein Array deklariert. Danach schreibt man immer weiter der Name (info[0]) und dahinter der Name des Inhalts. Dieser steht immer zwischen Klammern und Anführungzeichen. Mit dieser Methode muss beim Aufruf der Funktion nur einen Wert übergeben werden, nämlich die Nummer der Variable. Die Funktion bekommt so gleich einen ganzen Satz von Werten die er benutzen kann. In diesem Beispiel wurden Textinhalt, Textfarbe, die Hintergrundfarbe, die Breite (der Box) und die Grafik geändert.

In diesem Beispiel wurde jedem Attribut einen Wert verliehen. Es ist jedoch möglich einen Standard zu setzen. Bei der Grafik kann man auch definieren dass keine angezeigt werden soll. Ein Beispiel:

info[1] = new Array();
info[1] ["textinhalt"] = "";
info[1] ["textfarbe"] = "standard";
info[1] ["hintergrundfarbe"] = "standard";
info[1] ["weite"] = "standard";
info[1] ["grafik"] = "keine";

var standard_textfarbe = 'orange';
var standard_hintergrundfarbe = 'black';
var standard_weite = '130';
In diesem Beispiel wurde definiert, dass es keinen Text geben soll, die Textfarbe, die Hintergrundfarbe und die weite den Standards entsprechen. Die Standard-Werte sind in die unteren Variablen gespeichert. Auch soll keine Grafik gezeigt werden. Beim Text kann man dies machen indem man die Variable einfach leer lässt (die Anführungszeichen aber nicht vergessen!), bei der Grafik kann man dies aber nicht so machen, denn dann wird eine kleine Grafik gezeigt (), deshalb sollte die Grafik unsichtbar gemacht werden. Natürlich kann man auch hierfür Standard-Werte definieren. Wie das Script die richtige Werte ausfüllt, sehen wir später.

Um das Script auch auf verschiedene Browser laufen zu lassen, machen wird dies.

var GECKO = document.getElementById? true:false ;
var NS = document.layers? true:false ;
var IE = document.all? true:false ;
Es wird jedesmal getestet ob der Browser des Besuchers die Art der Element-Referention erkennt. Danach wird dann der Boolean-Wert true (wahr) oder false (unwahr) zurückgegeben. Dies sollte man machen da ältere Versionen von Netscape und Internet Explorer ihre eigenen DHTML-Verfahren hatten.

Kommen wir jetzt zum eigentlichen Script.

<a href="#" onMouseover="zeigen(0);" onMouseout="weg_damit();">

<div id="box" style="z-index:2;display:none;position:absolute;">
Ein bisschen Text kann nicht schaden.
<img src="dada.gif" id="bild">
</div>

function zeigen(was)
  {

  if ((GECKO)&&!(IE))
    {
    if (info[was] ["Text"] != "standard")
	{document.getElementById('box').firstChild.data = info[was]
	 ["textinhalt"];}
    else {document.getElementById('box').firstChild.data = standard_text;}

    if (info[was] ["textfarbe"] != 'standard')
	{document.getElementById('box').style.color = info[was]
	 ["textfarbe"];}
    else {document.getElementById('box').style.color = standard_textfarbe;}

    if (info[was] ["hintergrundfarbe"] != 'standard')
	{document.getElementById('box').style.backgroundColor = info[was]
	 ["hintergrundfarbe"];}
    else {document.getElementById('box').style.backgroundColor = standard_hintergrundfarbe;}

    if (info[was] ["breite"] != 'standard')
	{document.getElementById('box').style.width = info[was] ["breite"];}
    else {document.getElementById('box').style.width = standard_breite;}

    if (info[was] ["grafik"] == 'keine')
	{document.getElementById('bild').style.display = "none";}
    else if (info[was] ["grafik"] == 'standard')
	{document.getElementById('bild').src = standard_bild;
	document.getElementById('bild').style.display = "block";}
    else {document.getElementById('bild').src = info[was]
	["grafik"];document.getElementById('bild').style.display = "block";}

    document.getElementById('box').style.left = window.event.x + 40;
    document.getElementById('box').style.top = window.pageYOffset + 20;

    document.getElementById('box').style.display = "block";
    }

  else if (NS)
    {
    if (info[was] ["Text"] != "standard")
	{document.layers('box').firstChild.data = info[was] ["textinhalt"];}
    else {document.layers('box').firstChild.data = standard_text;}

    if (info[was] ["textfarbe"] != 'standard')
	{document.layers('box').style.color = info[was] ["textfarbe"];}
    else {document.layers('box').style.color = standard_textfarbe;}

    if (info[was] ["hintergrundfarbe"] != 'standard')
	{document.layers('box').style.backgroundColor = info[was]
	 ["hintergrundfarbe"];}
    else {document.layers('box').style.backgroundColor = standard_hintergrundfarbe;}

    if (info[was] ["breite"] != 'standard')
	{document.layers('box').style.width = info[was] ["breite"];}
    else {document.layers('box').style.width = standard_breite;}

    if (info[was] ["grafik"] == 'keine')
	{document.layers('bild').style.visibility = "hidden";}
    else if (info[was] ["grafik"] == 'standard')
	{document.layers('bild').src = standard_bild;
	document.layers('bild').style.visibility = "visible";}
    else {document.layers('bild').src = info[was]
	["grafik"];document.layers('bild').style.visibility = "visible";}

    document.layers('box').style.left = window.event.x + 40;
    document.layers('box').style.top = window.pageYOffset + 20;

    document.layers('box').style.visibility = "visible";
    }

  else if (IE)
    {
    if (info[was] ["Text"] != "standard")
	{document.all('box').firstChild.data = info[was] ["textinhalt"];}
    else {document.all('box').firstChild.data = standard_text;}

    if (info[was] ["textfarbe"] != 'standard')
	{document.all('box').style.color = info[was] ["textfarbe"];}
    else {document.all('box').style.color = standard_textfarbe;}

    if (info[was] ["hintergrundfarbe"] != 'standard')
	{document.all('box').style.backgroundColor = info[was]
	 ["hintergrundfarbe"];}
    else {document.all('box').style.backgroundColor = standard_hintergrundfarbe;}

    if (info[was] ["breite"] != 'standard')
	{document.all('box').style.width = info[was] ["breite"];}
    else {document.all('box').style.width = standard_breite;}

    if (info[was] ["grafik"] == 'keine')
	{document.all('bild').style.display = "none";}
    else if (info[was] ["grafik"] == 'standard')
	{document.all('bild').src = standard_bild;
	document.all('bild').style.display = "block";}
    else {document.all('bild').src = info[was]
	["grafik"];document.all('bild').style.display = "block";}

    document.all('box').style.left = window.event.x + 40;
    document.all('box').style.top = document.body.scrollTop + 20;

    document.all('box').style.display = "block";
    }

  }
Per onMouseover wird diese Funktion aufgerufen und den Wert 0 ermittelt (so weiß das Script, dass das erste Element der Array benutzt werden sollte). Die Funktion weg_damit() wird später gezeigt. Das DIV-Element hat die folgende Eigentschaften:
  • display:none; die Box ist anfangs nicht sichtbar
  • position:absolute; die Box wird immer absolut positioniert, ansonsten würde er sich nicht über sondern zwischen die anderen Elementen positionieren
  • z-index:2; die Z-Index ist die Tiefe. Je höher die Z-Index, je weiter nach vorn das Element gezeigt wird wenn sich mehrere Elemente überschneiden.
Zurück zum Script: hierbei wird also jedesmal erst getestet ob eine Variable (wurde oben besprochen) den Wert true ergab. Dieser Teil wird dann ausgeführt. Der Unterschied befindet sich in der Elementreferention.
Zuerst wird der Text (der der erste Kindknoten ist, die Grafik ist die zweite) geändert. Wenn die Variable für den Text den Wert "standard" hat, wird der Standard-Text eingefügt. Ansonsten wird der Wert der Variable eingefügt. Ist dieser Wert leer, so wird kein Text eingefügt, wie oben schon besprochen wurde.

Den ersten Kindknoten bekommt man so: document.getElementById('box').firstChild.data. Hierbei ist "box" die ID des DIV-Elements. Mit firstChild erhält man Zugriff auf den ersten Kindknoten und mit data auf den Inhalt.

Alle andere Werten werden nach dem selben Schema abgearbeitet: zuerst wird getestet ob die Variable nach dem Standard verweist (in dem Fall wird der Standard-Wert eingefügt, der in eine Variable gespeichert ist), wenn dies nicht der Fall ist, wird der Wert der in der Array steht, als Wert genommen. Dies ist immer derselbe Vorgang, ausgenommen bei der Grafik. Wenn in der Array den Wert "keine" steht, wird die Grafik unsichtbar geschaltet. Internet Explorer macht dies mit display:none, Netscape dagegen mit visibility:visible. Wenn aber in der Array den Wert "standard" steht, wird das Standardbild eingefügt und die Grafik wird sichtbar gemacht. Zu guter letzt wird, wenn der Wert nicht "keine" und auch nicht "standard" ist, einfach die definierte Grafik eingefügt. Und wieder wird die Grafik sichtbar gemacht.

Als letztes wird die Position festgelegt. Dazu bekommt das DIV-Element auf der horizontalen X-Achse den Wert von der Mausposition plus 40 Bildpunkten. Das Element steht also 40 Bildpunkten rechts von dem Mauszeiger. Die Höhe ist 20 Bildpunkten von oberem Rand des Fensters. Im Internet Explorer macht man dies mit scrollTop, in NetScape mit pageYOffset. Da die meisten anderen Browser eher zu Netscape neigen, wurde anfangs in der if/else-Schleife bestimmt, dass der erste Teil nur ausgeführt wird wenn es nicht der Internet Explorer ist, denn der gibt da eine Fehlermeldung.
Als allerletztes wird der DIV-Bereich einfach sichtbar geschaltet.

Der letzte Teil ist recht einfach.

function weg_damit()
  {
  if (GECKO) {document.getElementById('box').style.display = "none";}
  else if (NS) {document.layers('box').style.visibility = "hidden";}
  if (IE) {document.all('box').style.display = "none";}
  }
Abhängig davon welcher Browser benutzt wird, wird der aus zu führender Code anders aussehen. Hierbei wird die Box nur wieder unsichtbar gemacht.

Auch die Array-Elemente können während des Script geändert werden (mehr dazu).
Die Eigenschaften von Grafiken können auch geändert werden (mehr dazu).
Desweiteren kann man auch andere Style-Eigenschaften von DIV-Elementen ändern (mehr dazu).
Zu guter letzt können fortgeschrittene Javascripter noch extra Elemente hinzufügen (mehr dazu).


Rolfhub
Senior Member
Beitrag vom:
28-02-2004, 04:34:09

Ansichtssache

Na ja, ob so Boxen das letzte sind, da wär ich mir nicht so sicher, es gibt sicher einige sinnvolle Einsatzmöglichkeiten, aber das mit dem Mozilla kann ich leider bestätigen. Ein Nachteil auf jeden Fall: wenn man mit der Tastatur navigiert, hat man wohl Pech gehabt.

-----------------------------------------------------


Dani
Senior Member
Beitrag vom:
22-02-2004, 12:43:23

Sorry, aber erstens funktioneren deine Beispiele nicht (Mozilla) und dann sind solche Infoboxen das letzte, was man auf eine gute Webseite stellen sollte!

-----------------------------------------------------
\"I have to share the credit. I may have invented it, but I think Bill made it famous. -- When he used it for the NT logon, that\'s what I meant. okay?\" (David Bradley über Ctrl-Alt-Del)


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06245
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1147
Comments: 0