Elemente in Html-Seiten dynamisch verändern.

Elemente ansprechbar machen.

<table border="1" cellspacing="0" cellpadding="0" align="left">
  <tr>
    <td width="200" height="200" id="zl54gi">
      <img border="0" src="5_kreisverkehr_1.jpg" hspace="10" vspace="3" width="180" alt="Bild 1">
      <br>Bild 1
    </td>
  </tr>
</table>
Bild 1
Bild 1

Oben siehst du den Quellcode, der die Tabelle links erzeugt. Das ist also eine ganz normale Tabelle mit einer Zelle. In der Zelle ist ein Bild und etwas Text. Das einzige besondere an dieser Tabelle ist die Tatsache, dass die eine Zelle der Tabelle das Attribut id hat. Die Bezeichnung "id" hat die selbe Bedeutung, wie das Kürzel auch in der englischen Sprache hat: Identität. Die Identität dieser Zelle hat also den Wert zl54gi. Ich hätte hier genau so gut "Walter" oder "123" einfügen können. Ich gebe diesem Html-Element ein Identitätmerkmal. Das ist vergleichbar mit einem Namen, ich habe es aber absichtlich nicht so genannt, weil es das Attribut name auch gibt. Es hat übrigens auch fast die selbe Funktion. Wichtig ist, dass dieses Merkmal einmalig ist. Es darf auf der Seite kein anderes Element mit diesem Namen geben.


Eigenschaften des Elements ändern.

JavaScript Bereich einbauen.

<script type="text/javascript">
<!--
Hierhin kommt das Script.
//-->
</script>

Durch dieses Identitätsmerkmal ist es möglich, dieses Element gezielt mit JavaScript zu verändern. Dazu habe ich in den Head dieser Seite einen JavaScript-Bereich eingefügt. Das macht man mit dem Quellcode, den du links siehst. Der grün hinterlegte Text wird durch das eigentliche Script ersetzt. Die Syntax ist recht einfach. Mit <script> leitet man den Scriptbereich ein, mit </script> beendet man diesen Bereich wieder. Das Attribut type legt fest welcher Art dieses Script ist. Es handelt sich um text/javascript. Mit <!-- leitet man normalerweise in Html einen Kommentar ein, der vom Browser ignoriert werden soll. Mit //--> beendet man diesen Kommentar wieder. Vielleicht wunderst du dich jetzt, warum hier ein Html-Kommentar steht, denn wir sind ja in einem JavaScript-Bereich. Das hat einen einfachen Grund. Es gibt Leute die JavaScript deaktivieren. Die Browser dieser Leute kennen also kein JavaScript. Diese Browser ignorieren das <script>-Tag einfach. Logischerweise versuchen diese Browser den folgenden Quellcode deshalb als Html zu interpretieren. Da hier aber kein Html, sondern JavaScript folgt, kommt dabei nichts als Unsinn heraus. Deshalb kennzeichnen wir den JavaScript-Code als Html-Kommentar. Jeder Browser, der hier immer noch versucht Html zu interpretieren wird dadurch dazu gebracht, den folgenden Code zu ignorieren. Ein Browser der JavaScript kennt, versucht hier ja bereits JavaScript zu lesen. Der erkennt das folgende also nicht als Kommentar, denn der Kommentar wurde ja nach Html-Syntax und nicht nach JavaScript-Syntax eingeleitet. Diese Browser interpretieren also das folgende als Scriptcode.


Funktion definieren.

function f1() {
Hierhin kommen die Anweisungen der Funktion.
};

In diesem Scriptcode definieren wir eine Funktion. Dazu schreiben wir function. Eine Funktion muss immer einen Namen haben. Dieser Name darf nicht doppelt vergeben werden. Ich nenne die Funktion "f1". Nach dem Namen kommt immer eine Klammer in der Variablen an die Funktion übergeben werden können. Nach der Klammer kommt ein Leerzeichen oder ein Zeilenumbruch und dann kommt einen geschweifte öffnende Klammer. Nach dieser Klammer kommt immer ein Zeilenumbruch, dann kommt der auszuführende Quelltext. Danach kommt wieder ein Zeilenumbruch und eine schließende, geschweifte Klammer. Das Semikolon beendet die Anweisung.


Die erste Funktionsanweisung.

document.getElementById("zl54gi").width = 300;

Es gibt natürlich viele Möglichkeiten, welche Anweisungen die Funktion enthalten könnte. Ich kann dir hier nur ein paar Beispiele zeigen und erklären. Um die Möglichkeiten ausreitzen zu können, musst du JavaScript und DOM lernen.


<script type="text/javascript">
<!--
  function f1() {
    document.getElementById("zl54gi").width = 300;
  };
//-->
</script>

Links oben siehst du ein solches Beispiel. Im ganzen musst du also den Quellcode, der darunter gezeigt wird, in den Head deiner Seite einbauen.

Diese Funktion bewirkt, dass die Eigenschaft "width" des Elements mit der Identität "zl54gi", also der Tabellenzelle von oben, den Wert 300 bekommt. Jetzt ist die Tabellenzelle etwas breiter als das Bild, nämlich 200 Pixel breit. Bisher hat die Funktion f1() noch nichts bewirkt, obwohl sie im Head dieser Seite steht. Eine der Eigenschaften, die Funktionen so wertvoll machen, ist nämlich die Tatsache, dass die Funktionen nicht sofort ausgeführt werden. Sie werden erst ausgeführt, wenn man die Funktion aufruft. Das kann man z.B. mit einem Link machen.


Die Funktion aufrufen.

<a href="javascript:f1()">Hier klicken</a>

Links siehst du den Quellcode zu so einem Link. Und hier ist der Link:

Hier klicken

Wenn du auf den Link geklickt hast, hat sich die Tabelle oben auf 300 Pixel verbreitert. Neben dem Bild ist jetzt eine freie Fläche.


Ein weiteres Beispiel.

Hintergrundfarbe ändern.

function f2() {
  document.getElementById("zl54gi").bgColor = "#ff0000";
};

function f3() {
  document.getElementById("zl54gi").bgColor = "#00ff00";
};

Einen eigenen Scriptbereich braucht man jetzt nicht mehr. Diese Funktion kann man in den Scriptbereich vom letzten Beispiel einbauen. Die Funktion f2() bewirkt, dass der Hintergrund der Zelle rot wird. Die Funktion f3() bewirkt, dass der Hintergrund der Zelle grün wird. Beachte unbedingt die korrekte Schreibweise der Html-Eigenschaften die geändert werden sollen. Auch die Groß-/Kleinschreibung. In Html wird auch mit "bgcolor" oder "BGCOLOR" die entsprechende Farbe übernommen. In JavaScript funktioniert nur "bgColor"!


onMouseover.

<a href="javascript:f3()" onMouseover="f2()"> Hier nicht klicken</a>

Natürlich kann man nicht nur viele verschiedenen Eigenschaften des Elements beeinflusssen, es gibt auch viele verschiedenen Methoden die Funktion auf zu rufen. Die Funktion f2() soll aufgerufen werden wenn man mit der Maus über einen Link fährt. Die Funktion f3() wird aufgerufen, wenn man den Link anklickt.


Hier nicht klicken

Natürlich kannst du auf dieser Seite nicht sehen was passiert, wenn du mit der Maus über den Link fährst. So groß ist wohl kein Monitor, dass der Link und die Tabellenzelle gleichzeitigt zu sehen sind. Aber das macht nichts. Schließlich ändert sich die Farbe nur, wenn du über den Link fährst. Wenn du den Link wieder verlässt passiert nichts und der Hintergrund behält die geänderte Farbe.


onMouseout.

Diese Bausteine, die in einem Html-Element JavaScripte aufrufen können, heißen Eventhandler. Es gibt noch eine ganze Reihe davon. Der wichtigste in diesem Zusammenhang dürfte onMouseout sein. onMouseout funktioniert fast so, wie onMouseover. Nur reagiert onMouseover, wenn man mit der Maus über den entsprechenden Bereich kommt, und onMoseout reagiert, wenn man den Bereich verlässt. So kann man z.B. mit OnMouseout wieder den Zustand herstellen, den man hatte bevor mit der Maus über den sensiblen Bereich gefahren wurde. So einen Link siehst du hier:

Hier nicht klicken

Rechts ist der Quellcode zur Funktion:

function f4() {
  document.getElementById("zl54gi").bgColor = "#ffcc66";
};

Und das ist der Link:

<a href="#" onMouseout="f4()">Hier nicht klicken</a>

Inhalte ändern.

Auf der nächsten Seite zeige ich, wie man den Inhalt der Tabellenzelle verändern kann. Dabei wird ein mal das jetzige Bild gegen ein anderes ausgetauscht und ein mal wird der Text "Bild 1" gegen einen anderen Text getauscht. Zum Abschluss werden diese Aktionen miteinander verbunden.

Zum Umblättern hier klicken.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: