Obwohl dynamisches HTML lebendig erscheint, ist das gesamte Web tatsächlich immer noch fast statisch. Natürlich verfügen einige der avantgardistischeren Websites schon seit einiger Zeit über interaktive Inhalte, die meisten werden jedoch immer noch mithilfe von Plug-Ins oder durch das Schreiben mehrerer Seiten für verschiedene Browserversionen implementiert. Für die meisten Webseitenproduzenten ist es schwierig, Zeit zu haben, selbst wenn sie mehrere Versionen einer Seite schreiben möchten. Darüber hinaus erfordern Webseiten, die interaktive Effekte erzielen können, normalerweise eine hohe Bandbreite Autor und Betrachter. Es muss jedoch nicht so sein. Hier erfahren Sie, wie Sie Webseiten bei geringer Bandbreite schnell und einfach mit DHTML-Effekten versehen können. Bei dieser Methode müssen keine Bilder geladen oder mehrere Seiten geschrieben werden.
Bessere Mauserfassungsinformationen
Mouseover ist eine der am weitesten verbreiteten und effektivsten dynamischen Methoden im Web, und das aus gutem Grund, weil es dem Betrachter klares, direktes Feedback ermöglicht. Stellen Sie sich das so vor: Bewegen Sie die Maus über einen Hypertext-Link und der Link wird hervorgehoben, ändert seine Farbe oder ändert auf andere Weise die Aussage „Ich bin ein Link!“
Dies bedeutet nicht, dass alle erstellten Mouseover-Links gleich sind. Sie sind unterschiedlich. Die schlimmste Situation besteht darin, dass Mouseover-Links in der Java-Sprache oder in speziellen Formaten wie dem Shockwave-Format von Macromedia implementiert sind, bei denen der Betrachter ein Plug-in installieren muss, um den Effekt zu sehen. Im besten Fall sind Mouseover-Links in JavaScript geschrieben, das von allen Browsern unterstützt wird. Aber selbst wenn es mit JavaScript implementiert wird, muss der Browser immer noch zwei Bilder laden, eines für hohe Helligkeit und eines für normale Anzeige, was eine Verschwendung von Bandbreitennutzung darstellt.
Schauen wir uns nun DHTML an, das Mouseover-Links erstellt, ohne Bilder zu laden. Zu beachten ist lediglich, dass der DHTML-Code vom Browser geöffnet werden muss, um Webseitenobjekte wie Links und Stile zu öffnen, damit diese durch das Document Object Model (DOM) beschrieben werden können. Mit anderen Worten: Der Code funktioniert derzeit nur im Internet Explorer 4.0. Allerdings wird der Browser der fünften Generation von Netscape (der voraussichtlich Ende dieses Jahres erscheinen wird) DOM vollständig unterstützen. Machen Sie sich auch keine Sorgen, dass Mouseover-Links in inkompatiblen Browsern verwendet werden. Browser, die den DHTML-Code auf der Seite nicht unterstützen, ignorieren sie einfach. (Weitere Informationen finden Sie später im Abschnitt „Lassen Sie das DOM auf Ihrer Website arbeiten“.)
Code
Gewöhnliche Webseiten sind in zwei Hauptbereiche unterteilt: Der eine ist der Inhaltsbereich und der andere der Navigationsbereich. Mouseover-Links erscheinen normalerweise im Navigationsbereich. Typischerweise werden hervorgehobene Schaltflächen verwendet, um Betrachter zu verschiedenen Bereichen der Website zu leiten, beispielsweise zu Website-Grafiken oder Feedback-Seiten. Anstatt Schaltflächen zu verwenden, werden wir gewöhnliche Textlinks in interaktive Mouseover-Links umwandeln. Die Methode ist: Fügen Sie zunächst gewöhnliche Textlinks in das Dokument ein, wie zum Beispiel:
< a href="contact_us.html">
Kontaktieren Sie uns< /a>
Im zweiten Schritt ändert sich die Farbe des Textlinks, wenn die Maus darüber bewegt wird. Das DHTML-Skriptprogramm lautet wie folgt:
function rollon( ){
if (window.event.
srcElement.tagName == "A"){
window.event.srcElement
= "red";}
}
function rolloff( ){
if ( window.event.srcElement.tagName
== "A"){
window.event.srcElement.style.color
= "";}
}
document.onmouseover =rollon
;
Platzieren Sie diesen Code in einem Paar
Das zuvor geschriebene Skriptprogramm definiert zwei Schlüsselfunktionen: Rollon (aktiviert, wenn sich die Maus über den Link bewegt) und Rolloff (aktiviert, wenn sich die Maus vom Link entfernt). Jede Funktion beginnt mit einer einfachen „if“-Anweisung, was bedeutet: Jedes Mal, wenn das onmouseover-Ereignis im Webdokument aufgerufen wird, benachrichtigt die Rollon-Funktion den Browser, um festzustellen, ob das Objekt, das das Ereignis aktiviert, ein Ankertag (window.event) ist. srcElement.tagName == "A"). Wenn dies der Fall ist, wendet das Skript einen speziellen Stil (in diesem Fall rot) auf den Link an. Wenn das onmouseout-Ereignis eintritt, stellt die Rolloff-Funktion den Stil in ähnlicher Weise auf seine Standardfarbe (color="") zurück.
Die letzten beiden Zeilen dieses Skripts weisen den Browser an, die Rollon-Funktion auszuführen, wenn das Onmouseover-Ereignis auftritt, und die Mouseover-Link-Funktion (Mouseover) zu deaktivieren, wenn das Onmouseout-Ereignis auftritt.
Mit halbem Aufwand das Doppelte erzielen Mit
Internet Explorer 4.0 können Sie jedes Objekt im Dokument mit DHTML steuern. Natürlich können Sie neben der Änderung der Farbe des Ankertags noch weitere Funktionen erreichen. Tatsächlich können Sie jedes Element aus Cascading Style Sheets (CSS, eine W3C-Standardformatierungsspezifikation) auf jede Art von Objekt oder Ressourcenkomponente anwenden. Beispielsweise können Sie einen Link nicht nur rot erscheinen lassen, sondern auch eine Unterstreichung hinzufügen oder entfernen.
Um die Unterstreichung zu entfernen, fügen Sie einfach das folgende Stilattribut in alle Anker-Tags auf der Seite ein:
style = „text-decoration: none“
Diese Anweisung entfernt die Unterstreichung aus dem Link, sodass er normal oder im Standardzustand erscheint. (Standardmäßig unterstreichen Internet Explorer 4.0 und Navigator 4.0 alle Textlinks. Die obige Anweisung ändert den Standardstatus dieser Links nacheinander.)
Fügen Sie dann die folgende Anweisung unter der Rollon-Funktion hinzu:
window.event srcElement.style.
textDecoration = "underline";
Jetzt wird die Ressource für das von Ihnen definierte Mouseover-Ereignis rot und hat einen Unterstreichungsstil.
Es ist zu beachten,
dass die Unterstreichung durch Hinzufügen der folgenden Anweisung zur Rolloff-Funktion entfernt werden kann:
window.event.srcElement.style
Die oben genannten Modifikationsfunktionen, die schnell implementiert werden können, zeigen die Leistungsfähigkeit eines einfachen DHTML Skriptprogramm. Es erfordert kein Laden von Bildern, sondern verwendet einen äußerst flexiblen und portablen Code, um auffällige visuelle Effekte zu erzeugen. Ich kann sagen, dass Sie damit auf jedes Dokument zugreifen können, auch in älteren Browsern. Wenn Sie diesen Code erhalten und ihn selbst beherrschen möchten, besuchen Sie bitte unsere Website: www.windowspro.com .
-------------------
Edward Grossman ist der Produzent der Website www.windowspro.com . Er hat einen Doktortitel in Philosophie und war in der Forschung auf dem Gebiet tätig Philosophie vor der Entstehung des Webs. Seine E-Mail: [email protected]
Fügen Sie einfach etwa 15 Zeilen Code zum ①Kopf des Dokuments hinzu, und Sie können ②normale Textlinks auf jeder Webseite in ③interaktive, mausaktivierte Links (Mouseover) umwandeln.
------------
Sorgen Sie dafür, dass DOM auf Ihrer Website funktioniert.
Mit Dynamic HTML (DHTML) ist objektorientierte Programmierung nicht mehr etwas, was nur Programmierexperten können, sondern wird zu einem Bereich, der selbst Web-Experten beherrscht Seitenersteller können mitmachen. Dies ist größtenteils dem Document Object Model (DOM) zu verdanken. Diese W3C-Spezifikation behandelt jede Komponente in einem Dokument als Objekt, unabhängig davon, ob es sich um ein Dokument, einen Stil oder einen Link handelt. Skripte können diese Objekte basierend auf Benutzereingaben, Browsertyp oder vielen anderen Variablen ändern, einschließlich der Änderung der Größe, des Stils oder der Aktualisierung des Links.
DOM kann ein ganzes Dokument öffnen, sodass Webautoren hochgradig anpassbare interaktive Seiten erstellen können, ohne den Benutzern einen großen Download-Aufwand aufzuerlegen. Dies ermöglicht nicht nur Mouseover-Links mit geringer Bandbreite, sondern auch zusammenklappbare Webbrowser-Menüs und bewegliche Seitenkomponenten (wie Bilder, Textblöcke usw.).
Weitere Informationen zum DOM finden Sie auf den Websites: www.w3.org/dom , www.microsoft.com/workshop/author/dhtml/ und Developer.netscape.com/docs/manuals/communicator/dynhtml/.
Beispiele für DHTML-Anwendungen finden Sie unter: www.windowspro.com und www.projectcool.com (versuchen Sie, Saturn herumzuziehen) und durchsuchen Sie „Quelle anzeigen“.
In IE 4.0 können Sie dynamisches HTML verwenden, um Dutzende von Objekten zu bedienen. Eine detaillierte Liste finden Sie unter www.microsoft.com .