Hier nun ein Trick. Er lässt sich sogar ohne Funktionen in Java-Script, also lediglich mit einigen besonderen Html-Befehlen und dem inzwischen gut bekannten onCklick="alert()", verwirklichen.

Klick mal auf diese Stelle!

Hier wird also durch den Span-TAG eine "Zone" geschaffen, in der etwas passieren kann: eben z. B. ein Fenster mit Informationen öffnen.

Hier der code.

<span onclick="window.alert('Das kriegst du mit dem Span-TAG hin.')">Klick mal auf diese Stelle!</span>

Dem Span-TAG kannst du auch andere Attribute als onclick zuweisen. Versuche es einmal mit onmouseover. Denke dabei an die verschiedenen Anführungszeichen!

Achte darauf, dass du es, wie für Attribute eben vorgesehen, hinter "span" und vor die schließende Spitzklammer einfügst. Links und rechts davon setzt du Leerzeichen.

Wofür braucht man das?

Nun, ich habe viele Texte auf meiner Homepage, in denen Fachausdrücke vorkommen. Etlich meiner Leser kenn diese aber schon. Für die, die sich unsicher sind oder den Begriff noch nicht kennen, baue ich etwas Code ein:

Hier ein Beispieltext:
"Feldhasen sind für Myxomatose weitgehend unempfindlich."1

Der span-TAG hat also den Vorteil, dass ich ihn mitten in einen p-TAG einsetzten kann, um eben an einem bestimmten Wort einen Java-script-Code auszulösen.

Hier nun der Code:
<span onMouseOver="alert('Kaninchenpest, wird durch Viren übertragen.')"style="background-Color:yellow"> Myxomatose</span>

Aufgabe:

  • Kopier ein wenig Text in deine Html-Datei, setzte ihn in P-TAGs und füge dann bei einem Wort den Code ein.
  • Weiter mit dem Trick

    Wenn du nun <span> </span> einfach durch <p></p> ersetzt, geht's auch.
    Selbst im td-TAG und tr-TAG und sogar im table-TAG von Tabellen funzt es.

    Aufgabe:

  • Probiere weitere Html-TAGs aus. Auch <body> geht!
  • Diese Versuche sind wichtig für die weiteren Programmierungen in Java-Script!

     

     

    Kurztest:
    Welcher Html-Befehl erzeugt eine "Zone" auf der Seite?
    (Vergiss nicht die Spitzklammern und den Schließtag!)
    Schreibe den vollständigen onMouseOver-Befehl!
    Denk an die Groß-/kleinschreibung!

    1 http://de.wikipedia.org/wiki/Myxomatose