HTML-Kurs Lektion 12 erweiterte Techniken

Lektion 12 - erweiterte Techniken

Inzwischen sind wir gestalterisch an einem Punkt angekommen, an dem reines HTML zum erreichen unserer grafischen Ziele nicht mehr ausreicht. Im folgenden bedienen wir uns zu Lösung anstehender Probleme etwas Java-Skript oder CSS.

1. Problem : Ich möchte in meiner Seite grafische Links (Buttons) z.B. in einem Menü verwenden.

Lösungsmöglichkeiten:

12.1.1 der einfache grafische Button

einen einfachen grafischen Button erziehlt man durch verlinken einer Grafik.

Beispiel:

Beim Klick auf die Panik Taste soll die Panic-Seite (in einem neuen Browserfenster) angezeigt werden.

Quelltext:

<a href="panic.htm" target="_blank">	<img src="panic-button.jpg" width="87" height="89" alt="Panic-Taste" border="0">	</a>
Link	Bild	Linkende

12.1.2 der grafische Button mit Mousover/Mouseout - Effekt

Oft möchte man dem User zeigen, das eine Aktion bei Klick auf den Button ausgelöst wird. Hierzu bedienen wir uns erstmalig eines Java-Script-Objektes und dessen eigenschaften.

Zuerst benötigen wir zwei Grafiken, die später in unserem Menü als Button Inaktiv und Aktiv platziert werden sollen:


Button1_I.gif (nicht gedrückt)	Button1_A.gif (gedrückt)

Zweitens erstellen wir einen Link der mit dem Button (Button1_I.gif) auf die schon bekannte PANIC-Seite:

Quelltext:

<a href="panic.htm" target="_blank">	<img src="Button1_I.gif" alt="" border="0">	</a>
Link	Bild	Linkende

Drittens definieren wir das Java-Script-Objekt button1 im <head> </head>:

<SCRIPT LANGUAGE="JavaScript">
show1 = new Image()
show1.src = "Button1_I.gif";
</SCRIPT>

und weisen dem Button1_I.gif diesen Objektnamen NAME= "show1" zu:

Quelltext:

<a href="panic.htm" target="_blank">	<img src="Button1_I.gif" alt="" border="0" NAME="show1" >	</a>
Link	Bild mit Name-Zuweisung vom Java-Script-Objekt	Linkende

Im vierten Schritt weisen wir dem Link über die Objekteigenschaften zu, was passieren soll. Bewegt sich der Mauszeiger über den Link (onMouseOver) soll der Button (Button1_A.gif) an Stelle von (Button1_I.gif) dargestellt werden und bewegt sich die Maus wieder von der Schaltfäche weg (onMouseOut) soll wieder (Button1_I.gif) dargestellt werden:

Quelltext:

Link mit onMouseOver und onMouseOut Eigenschaft

Bild mit Name-Zuweisung vom Java-Script-Objekt

</a>

Linkende

Im fünften Schritt kann man dem Objekt noch das Sahnehäubchen aufsetzen indem man den häslichen Linkrand, den jedes Objekt onFocus erhält (blur) ausblendet. Dies erfolgt indem man dieser Eigenschaft () nichts (kein Zeichen) zuweist.[onFocus="if(this.blur)this.blur()"] :

blur-Rand den das Objekt erhät (übertriebene Darstellung)

Quelltext:

Link mit onMouseOver und onMouseOut Eigenschaft

Bild mit Name-Zuweisung vom Java-Script-Objekt

</a>

Linkende

Möchten Sie weitere Buttons in Ihrem Menü verwenden erstellen Sie einfach weitere Objekte nach diesem Muster. Es gibt keine Beschränkungen.

2. Problem : Ich möchte Webseiten beim öffnen oder schließen mit der Folgeseite überblenden.

Lösungsmöglichkeit:

12.2 Nutzung von <meta>-Tags basierend auf DHTML

Mit einem einfachen <meta>-Tageintrag kann ein sehr schöner Effekt erziehlt werden. Hierbei werden die Seiten so überblendet, dass sie praktisch in der zuvor geladenen Seite erscheinen. Mit dem Attribut Duration kann die Dauer für die Überblendung bestimmt werden. Je größer der Wert ist, desto länger dauert der Effekt an.

Beispiele:

<meta http-equiv="Page-Enter" content="BlendTrans(Duration=1.0)">

Für die Überblendung von der besuchten Webseite zu einer anderen Wesbeite beim verlassen:

<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.4)">

Für die Überblendung von Webseiten auf dem eigenen Internet Auftritt:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.4)">

3. Problem : Ich möchte onMouseOver den Cursor auf dem Link ändern

Lösungsmöglichkeit:

12.3 Cursordefinition

Sie können für ein HTML-Element einen Cursor definieren. Wenn der Anwender mit der Maus über die Fläche fährt, die das Element einnimmt, nimmt der Mauszeiger die angegebene Gestalt an. Da Mauszeiger immer mit einer Bedeutung versehen sein sollten, ist es in der Praxis sinnvoll, solche Elemente etwa mit Hilfe von JavaScript Event-Handlern an ein Script zu binden, das bestimmte Befehle ausführt.

Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>cursor</title>
</head>
<body>
<a href="GELB.HTM" style="cursor:url(FST.ani), url(FST.cur), url(FST.ico), auto;" target="_blank">Link zur gelben Seite</a>
</body>
</html>

Beispiel:

Testlink zur gelben Seite ( Achten Sie auf den Cursor! )

Erläuterung:

Mit cursor: können Sie das Aussehen des Mauszeigers für den Fall definieren, dass der Anwender mit der Maus über den entsprechenden Bereich fährt. Folgende Angaben sind erlaubt:

auto = automatischer Cursor (Normaleinstellung).
default = Plattformunabhängiger Standard-Cursor.
crosshair = Cursor in Form eines einfachen Fadenkreuzes.
pointer = Cursor in Form eines Zeigers.
move = Cursor in Form eines Kreuzes, das die Fähigkeit zum Bewegen des Elements signalisiert.
n-resize = Cursor in Form eines Pfeils, der nach oben zeigt (n = Norden).
ne-resize = Cursor in Form eines Pfeils, der nach rechts oben zeigt (ne = Nordost).
e-resize = Cursor in Form eines Pfeils, der nach rechts zeigt (e = Osten).
se-resize = Cursor in Form eines Pfeils, der nach rechts unten zeigt (se = Südost).
s-resize = Cursor in Form eines Pfeils, der nach unten zeigt (s = Süden).
sw-resize = Cursor in Form eines Pfeils, der nach links unten zeigt (sw = Südwest).
w-resize = Cursor in Form eines Pfeils, der nach links zeigt (w = Westen).
nw-resize = Cursor in Form eines Pfeils, der nach links oben zeigt (nw = Nordwest).
text = Cursor in einer Form, die normalen Text symbolisiert.
wait = Cursor in Form eines Symbols, das einen Wartezustand signalisiert.
help = Cursor in Form Symbols, das Hilfe zu dem Element signalisiert.
url() = Beliebiger Mauszeiger, [Datei] sollte eine GIF- oder JPG-Grafik sein
progress = Cursor in Symbolform, der Programmfortschritt anzeigt, im Gegensatz zu wait aber Interaktionen zulässt.

Beachten Sie:
Der Internet Explorer bis Version 5.5 kennt pointer nicht, jedoch den nicht standardisierten Wert hand.

Cursor-Symbole sollten Sie nicht zweckentfremden. Wenn Sie beispielsweise cursor:move für ein Element benutzen, sollte dieses Element auch tatsächlich beweglich sein (etwa mit Hilfe von Dynamischem HTML), und wenn Sie cursor:help benutzen, erwartet der Anwender beim Anklicken des Bereichs, dass am Bildschirm ein Fenster oder ein Bereich mit einem Hilfetext erscheint.

Nicht alle Browser unterstützen alle Grafikformate und auch nicht unter allen Betriebssystemen. So unterstützt z.B. der Internet Explorer nur .cur und .ani als Format, wärend Firefox .ani überhaupt nicht und unter Linux .cur nicht unterstützt.

Anmerkung: url() wird von verschiedenen Browsern unterschiedlich unterstützt, es empfiehlt sich, mehrere verschiedene Formate (mit Komma getrennt, siehe Beispiel) gleichzeitig anzubieten.

Wert
Wert	4/5/6/7	MAC 5+	5/6	7/8/9	4	6	7+	1.5+
Systemcursor (siehe "Werte")	j	j	n	j	n	j	j	j
url(gif/jpeg)	n	n	n	n	n	n	j	j
url(ico)	j	n	n	n	n	n	n	j
url(ani)	j	n	n	n	n	n	n	n
url(cur)	n	n	n	n	n	n	j	j
url(mehrere Formate gleichzeitig)	j	n	n	n	n	n	j	j

Jetzt brauchen Sie natürlich noch eine Software um die gewünschten Dateiformate erstellen zu können.
Hier können Sie ein geeignetes Programm finden.

So das War's im Grundlehrgang HTML. Ich wünsche Ihnen viel Spaß und Erfolg beim erstellen Ihrer Seiten.