GRUNDLAGEN:

Javascript ist eine Programmiersprache, welche von Internetseiten und Browsern genutzt wird, um Funktionen oder Animationen auszuführen, bis hin zu Darstellungsoptionen zu definieren. Javascripte können über zwei Möglichkeiten in einer Seite integriert / definiert werden. Entweder direkt im HTML-Code der Seite oder durch eine Javascript-Datei die im Code definiert wird. Jeder der sich einmal im HTML-Code einer Seite umgeschaut hat, ist sicherlich auf zu mindestens eines dieser Beispiele gestossen:

1. Definition Javascript-Datei:

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

2. Definition Javascript-Funktion:

<script type="text/javascript"> 
waJSQuery(function() {initializeWA_JQuery()});
</script>
 

In der Regel definiert man (egal mit welcher Variante) eine Funktion (die später ausgeführt wird), in der dann die eigentlichen Schritte stehen oder führt Schritte direkt aus, dann entfällt die Funktion und die Schritte stehen direkt im Code und werden beim Laden der Seite ausgeführt. Der Aufruf einer Funktion kann auf verschiedene Weise initialisiert / gestartet werden. Beispiele hierfür sind z. B. onklick oder onload. Die beiden Optionen sind eigentlich selbsterklärend - onklick = bei einem Klick auf ein Seitenelement, onload = nach dem Laden eines Seitenelements.

Definiton einer Funktion:
function einblenden() {Hier stehen die Programmschritte}

function - sagt dem Browser hier kommt eine Funktion.
einblenden() - definiert den Namen / Bezeichnung der Funktion, welchen man später zum Aufruf dieser benötigt.
{Hier stehen die Programmschritte} - in die geschweiften Klammern kommen die eigentlichen Programmier-Schritte, welche jeweils durch ein Semikolon von einander getrennt werden.

Aufruf einer Funktion:
Der Aufruf einer Funktion funktioniert eigentlich recht einfach. Hierzu benötigt man die Bezeichnung der Funktion und bindet diese wie z. B. oben erwähnt im Code ein:

Beispiel:

onclick="einblenden();"
 

Dieser Aufruf wird in einem Seitenelement wie einem DIV eingebettet.

Beispiel:

<div style="" id="menuiconscenter" onclick="einblenden();" ><img src="images/menu/help.png" > </div>
 

Web Acappella bietet seit neustem die Möglichkeit den Aufruf von Javascript (Funktionen) über die Verlinkung von Seitenelementen wie Bilder, Button, usw..

In diesem Abschnitt erstellen wir uns ein Javascript, mit dem man sogenannte DIV-Container auf einer Seite einblenden oder ausblenden kann.

Hierfür benutzen wir eine Editor und erstellen uns eine Scriptdatei. Diese ist nicht anderes als eine Textdatei mit der Endung ".js". Für unser Beispiel benutzen wir die Datei "men.js", man kann jedoch auch jeden x-beliebigen Dateinamen wählen, Hauptsache man kennt den Namen. In dieser Scriptdatei definieren wir 2 Funktionen. Die Funktion zum Einblenden und die zum Ausblenden.

Erinnern wir uns an die Definition einer Funktion:
function einblenden() {Hier stehen die Programmschritte}

Das bedeutet nun für uns, wir schreiben als erstes das Grundgerüst der Funktionen. Damit man später seine Funktionen wiederfindet, sollten diese eine selbsterklärende Bezeichnung erhalten. In unserem Fall also "einblenden" und "ausblenden".

Funktions-Grundgerüst 1: function einblenden() {}

Funktions-Grundgerüst 2: function ausblenden() {}

Das heisst, unser Code in der Scriptdatei sollte nun so aussehen:

function einblenden() {}
 
function ausblenden() {}
 

Jetzt kommt der Teil, wo in den Funktionen dafür gesorgt wird, dass das Script auch weiss, welches DIV es verändern soll. Hierfür werden die Funktionen wie folgt erweitert:
function einblenden(div) {}

function ausblenden(div) {}

div ist hierbei eine Variable, die wir benutzen um etwas weiterzugeben. Beim Aufruf der Funktion im HTML-Code, wird die Bezeichnung des DIV'S an die Funktion übergeben und in der Variablen div abgespeichert.

Dazu kommen wir jedoch später noch!

Jetzt wird es ein bisschen tricky aber notfalls den Code einfach hinzufügen, auch wenn man nicht alles versteht.
Wir wollen in unserer Seite (Document) das Aussehen (Style) eines Div's (Element) verändern. Hierfür müssen wir nun erst einmal in der Funktion das Aussehen unseres Div's ermitteln. Diese sieht dann so aus:

with(document.getElementById(div).style){}

Der "with" Befehl legt fest, dass das nachfolgende definierte Objekt / Element mit den im Code angegebenen Veränderungen versorgt wird. Doch welches Objekt soll nun verändert werden?
Wir schlüsseln die Codezeile auf, um zu verstehen was diese bewirkt.

document.getElementById(div).style

getElementById(div) - Übersetzt heisst der Code, hole (get) das Objekt/Element (Element) anhand (by) der Bezeichnung (Id), wobei die Id das definierte Div aus unserer Seite ist, welche in der Variablen (div) definiert /gespeichert ist.

document - Definiert, dass das Objekt / Element (unser Div) sich in dem Document (unsere Seite) befindet, von dem die Funktion aufgerufen wurde.

style - Legt fest, dass der Style, also das Aussehen unserer Div gelesen und später verändert werden soll.

In den geschweiften Klammern können hinterher die CSS-Eigenschaften verändert werden.

So, genug erklärt nun geht es an die Erweiterung unserer Funktionen in unserem Script.

Wir erweitern unsere Funktionen, welche wir bereits programmiert haben um den gerade besprochenen Code:

aus

function einblenden(div) {}

function ausblenden(div) {}

wird

function einblenden(div) {with(document.getElementById(div).style){}}

function ausblenden(div) {with(document.getElementById(div).style){}}

Nun sind unsere Funktionen soweit, dass sie auf den Code warten um das Aussehen des Objektes / Elements zu verändern. Im CSS-Code wurde definiert, dass das Div unsichtbar ist.

Der Code hierfür lautet "display:none;", übersetzt heisst diese "anzeigen:nein;". Im CSS gibt es für den Befehl "display" viele Parameter. Wir verwenden den Parameter "block", was bewirkt, dass das Div als Block in der definierten Grösse angezeigt wird (mit Hintergrundfarbe usw.), auch wenn kein Inhalt im Div vorhanden ist.

Wir erweitern unseren Code nun um die zu ändernden Eigenschaften:

aus

function einblenden(div) {with(document.getElementById(div).style){}}

function ausblenden(div) {with(document.getElementById(div).style){}}

wird

function einblenden(div) {with(document.getElementById(div).style){display="block;"}}

function ausblenden(div) {with(document.getElementById(div).style){display="none;"}}

Bei der Funktion "einblenden" müssen wir das Div einblenden - display="block;" und bei der Funktion "ausblenden", ausblenden - display="none;". Das, was wir hier als Code in einer bzw. zwei Zeilen geschrieben haben, kann im Editor ruhig durch Zeilenumbrüche etwas übersichtlicher gestaltet werden.

Meine Scriptdatei sieht nach Vollendung so aus:

function einblenden(div) {
with(document.getElementById(div).style){
display="block";
}
}
 
function ausblenden(div) {
with(document.getElementById(div).style){
display="none";
}
}
 

Die Script-Datei muss natürlich im Head-Bereich der Seite definiert werden, damit sie beim Laden der Seite auch gelesen wird und unser Browser die Funktionen zuordnen kann.

Der Code hierfür lautet:

<script type="text/javascript" src="LINK ZUR DATEI/men.js" ></script>
 

Der Aufruf der Funktionen erfolgt im Body-Bereich der Seite, also im HTML-Code zur Bilddatei über die man mit dem Mauszeiger fahren soll, um ein Div einzublenden. Hierbei erfolgt der Aufruf der Funktionen jeweils Bild1 blendet Div1, Bild2 blendet Div2 und Bild3 blendet Div3 ein, usw..

Eine mögliche Codezeile für ein Bild im HTML-Code sieht z. B. so aus:
<img src="images/home.png" alt="" style="position:absolute; top:0; left:0; " >

Nun muss genau das Element, welches beim Überfahren mit dem Mauszeiger die Funktionen aufrufen soll, mit dem Aufruf der Funktionen ergänzt werden. Bei der Einführung in die Grundlagen, haben wir schon die Befehle onklick und onload kennengelernt. Heute erweitern wir unser Wissen mir den Befehlen onmouseover und onmouseout. Diese Befehle werden aktiviert, wenn ich mit dem Mauszeiger über das Element fahre, welches die Befehle enthält.

Der Aufruf einer Funktion würde im Normalfall so aussehen:
onmouseover="einblenden()"

Wir möchten aber die Funktion aufrufen und einen bestimmten Wert übergeben. Im unseren Fall die Bezeichnung des Div's, welches wir verändern möchten.

Hier sieht der Code dann so aus:
onmouseover="einblenden('textfenster1')"

Da wir aber nach dem Verlassen des Mauszeigers das Div wieder ausblenden müssen, muss natürlich auch die Funktion fürs Ausblenden aufgerufen werden.

Wir ändern den Code der Funktion, welcher danach so aussieht:
onmouseout="ausblenden('textfenster1')"

Komplett haben wir dann eine Codezeile, die ungefähr so unsere Funktionen aktiviert:
<img onmouseover="einblenden('textfenster1')" onmouseout="ausblenden('textfenster1')" src="images/home.png" alt="" style="position:absolute; top:0; left:0; " >

Was passiert nun genau, wenn ich mit dem Mauszeiger über das Bild fahre?

Ich fahre mit dem Zeiger übers Bild und der Befehl onmouseover="einblenden('textfenster1')" ruft die Funktion "einblenden" auf und übergibt den Wert bzw. Text textfeld1 an die Funktion und die variable div. Die Sonderzeichen ' sagen der Funktion, hier kommt ein Text. Es gibt bei Javascript zwei Arten von Variablen, numerische und Text, wobei numerische für Schleifen, Berechnungen und andere Operationen verwendet werden.
Die Funktion startet und führt die vorher erklärten Schritte aus. Unser definiertes Div wird eingeblendet und würde es auch bleiben, wenn wir nicht unsere zweite Funktion ausblenden hätten. Der Mauszeiger verlässt das Element und die Funktion ausblenden wird aufgerufen und abgearbeitet.

Ich empfehle allen, die noch nicht genügend Erfahrung mit diesen Dingen besitzen, das hier geschrieben, versuchen selber im Editor zu schreiben / programmieren, um mit dem Syntax von Javascript vertraut zu werden. Selbst wenn man das hier geschrieben nicht auf Anhieb versteht, sollte man es wenn nötig auch fünfmal lesen und ausprobieren um besser in die Materie einzusteigen. Aller Anfang ist schwer, aber mit der Zeit wird man einiges besser verstehen und den Code ohne Probleme lesen können. Wenn etwas nicht funktioniert, nicht den Kopf hängen lassen und vielleicht nach zwei oder drei Tagen erneut versuchen. Manchmal muss man Dinge einfach sacken lassen und erneut in Angriff nehmen.

Ich habe hier.... ein kleines Download-Paket bereit gestellt, mit allen benötigten Dateien zu dem oben gezeigten Demo. Hier befindet sich unter anderem auch die CSS-Datei in der die DIV-Container definiert sind. Die CSS Datei muss ebenfalls im Head-Bereich der Seite definiert werden, damit beim Laden der Seite der Browser auch die definierten DIV'S kennt.

Der Code hierfür lautet:

<link href="LINK ZUR DATEI/men.css" rel="stylesheet" media="screen" type="text/css" >
 

Als Test sollte jeder einmal versuchen, ob er es hinbekommt, das Aufgeführte in Web Acappella zu integrieren. Im HTML-Code der Seite findet man eigentlich alles, um den Inhalt in der Web Acappella Seite zu integrieren.

Tipp:
1. Javascript-Datei schreiben / programmieren.
2. Javascript-Datei und CSS-Datei im Head-Bereich der Seite einbinden.
3. DIV'S per HTML-Baustein in der Seite integrieren.
4. Bilddateien per HTML-Baustein einfügen und den Aufruf der Javascript-Funktionen im Code einbauen.
5. Demoseite erstellen und veröffentlichen

Wenn Fragen sind, bitte in diesem Thread.... stellen!
Demoseiten würde ich an eurer Stelle ebenfalls im oben genannten Thread veröffentlichen, damit alle schauen und lernen können.