Verwenden von JavaScript und Grafiken

Internet-Puristen betrachten das World Wide Web in erster Linie als Mittel zur Verbreitung von Informationen. Ein Großteil dieser Informationen liegt in Textform vor, die von jedem Webbrowser problemlos gerendert werden kann. Aber schon seit den Anfängen des Web haben Grafiken eine wichtige Rolle bei der Verbesserung der grundlegenden Textseite gespielt. Heutzutage ist es nicht ungewöhnlich, dass Websites zu neunzig Prozent aus Grafiken bestehen. Diese Websites entsprechen möglicherweise nicht dem strengen Konzept der Verbreitung von Informationen, aber einige von ihnen sind sicherlich attraktiv.

Die meisten von uns bemühen sich um ein Gleichgewicht zwischen Text und Grafiken auf ihren Webseiten. Die Grafiken dienen dazu, das Erscheinungsbild und die Lesbarkeit der Seite zu verbessern. Typische Verwendungszwecke für Grafiken sind Banner, Anzeigen von Sponsorunternehmen und farbige Aufzählungszeichen, um wichtige Textteile hervorzuheben.

Die JavaScript-Skriptsprache kann verwendet werden, um die Grafiken zu verbessern, die Sie auf Ihren Webseiten platzieren. Mit JavaScript kann der grafische Inhalt der Seite dynamisch gesteuert werden. Sie können beispielsweise morgens und nachmittags einen Hintergrund für Ihre Seite anzeigen. Und nachts können Sie einen Sternfeldhintergrund verwenden. Sie können auch JavaScript verwenden, um die Anzeige für Digitaluhren, Trefferzähler, Balkendiagramme und mehr zu erstellen.

In der Spalte dieses Monats werden verschiedene Möglichkeiten beschrieben, wie Sie JavaScript und Grafiken verwenden können. In dieser Diskussion fehlt jedoch ein bemerkenswertes Thema: die Verwendung von JavaScript für Animationen. Dieses Thema verdient eine eigene Kolumne, die in Kürze erscheint.

Grundlegendes zum HTML-Bildelement

Das Element ist das am häufigsten verwendete Tag zur Darstellung von grafischem Inhalt in einem HTML-Dokument (die neuesten HTML-Spezifikationen fügen ein Element hinzu, werden jedoch von Netscape und den meisten anderen Browsern noch nicht unterstützt). Für Uneingeweihte lautet die Syntax des Basis- Tags:

Dabei ist "url" eine ordnungsgemäß erstellte URL für die Bilddatei. Die URL kann absolut oder relativ sein. Denken Sie daran, dass nicht alle Browser für die Anzeige von Grafiken ausgestattet sind. Daher ist es ratsam, "alternativen Text" für das Bild für diejenigen einzufügen, die mit Bildproblemen konfrontiert sind. Verwenden Sie das ALT-Attribut im Tag, um alternativen Text anzugeben. Hier ist ein Beispiel:

Mit dem Tag erstellte Bilder gelten als "Inline", da sie wie Textzeichen behandelt werden. Das heißt, Sie können Bilder mit Text durchsetzen, und der Browser sorgt dafür, dass alles richtig fließt.

Die meisten Bilder sind jedoch größer als der sie umgebende Text. Das normale Verhalten der meisten Browser besteht darin, den unteren Rand des Bildes bündig mit dem unteren Rand des Textes zu platzieren, der es umgibt. Sie können dieses Verhalten ändern, wenn Sie eine andere Ausrichtung wünschen. Die häufigsten Ausrichtungsoptionen, die von allen Browsern verstanden werden, die Bilder anzeigen, sind:

  • unten - Richtet den Text am unteren Rand des Bildes aus. Dies ist die Standardeinstellung.
  • Mitte - Richtet den Text an der Bildmitte aus.
  • top - Richtet den Text am oberen Rand des Bildes aus.

Sie können jeweils nur eine Ausrichtung verwenden. Die Syntax lautet:

Browser zeigen normalerweise Bilder in ihrer "natürlichen Größe" an. Wenn ein Bild beispielsweise 100 x 100 Pixel groß ist, ist es beim Rendern auf dem Bildschirm des Browsers so groß. Mit Netscape können Sie die Größe des Bilds ändern, wenn Sie es kleiner oder größer verwenden möchten, indem Sie die Attribute WIDTH und HEIGHT verwenden. Ein Vorteil dieser Attribute besteht darin, dass der Browser bei Verwendung ein leeres Feld für das Bild erstellt und das Feld dann mit dem Bild füllt, wenn die gesamte Seite geladen wird. Dies weist Benutzer darauf hin, dass an dieser Stelle eine Grafik erwartet wird.

  • Wenn Sie nur die Breite oder Höhe angeben, ändert sich die Größe des Bildes proportional. Wenn Sie beispielsweise die Größe eines quadratischen Bilds auf eine Höhe und Breite von 100 Pixel festlegen. Wenn das Originalbild nicht quadratisch ist, wird es relativ proportional dimensioniert. Wenn das Originalbild beispielsweise 400 Pixel breit und 100 Pixel hoch ist, wird das Bild durch Ändern der Breite auf 100 Pixel auf 25 Pixel reduziert.

  • Wenn Sie sowohl die Breite als auch die Höhe angeben, können Sie den Anteil des Bildes nach Belieben ändern. Sie können dieses 400 x 100 Pixel große Bild beispielsweise in 120 x 120, 75 x 90 oder etwas anderes umwandeln.

Zum Beispiel:

Achtung : In Kombination mit JavaScript sollten Sie immer die Attribute HEIGHT und WIDTH fürTagsangeben . Andernfalls können inkonsistente Ergebnisse und / oder Abstürze auftreten! Diese Warnung gilt für alle Tags, die im selben Dokument angezeigt werden, das JavaScript-Code enthält.

Bilder mit JavaScript kombinieren

JavaScript kann verwendet werden, um Bilder zu verbessern, die in HTML-Dokumenten verwendet werden. Sie können beispielsweise JavaScript verwenden, um eine Seite dynamisch mit Bildern zu erstellen, die durch einen bedingten Testausdruck ausgewählt wurden, z. B. die Tageszeit.

Tatsächlich ist die JavaScript-Digitaluhranwendung, die JavaScript und eine Auswahl an GIF-Bildern verwendet, eine der beliebtesten im Web. Das Beispiel clock.html verwendet JavaScript, um die aktuelle Uhrzeit mit großen grünen LED-Ziffern anzuzeigen. Jede Ziffer ist ein individuelles GIF, das von JavaScript zu einem Zifferblatt einer Digitaluhr zusammengefügt wird.

Ich habe Ziffern-GIFs von Russ Walsh verwendet. Russ erlaubt freundlicherweise, dass seine GIFs frei auf Webseiten verwendet werden können, solange die entsprechende Gutschrift vorliegt. Sie können beliebige Ziffern für Ihre Uhr verwenden, müssen jedoch eine separate GIF-Datei für jede Ziffer und separate Dateien für die Doppelpunkt- und AM / PM-Anzeigen bereitstellen. Ändern Sie den Code clock.html, um auf die Zifferndateien zu verweisen, die Sie verwenden möchten.

Hinweis : Es ist wichtig, dass Sie die absolute URL zu den von Ihnen verwendeten Bildern angeben. Andernfalls zeigt Netscape die Grafiken nicht an. Das Beispiel clock.html verwendet eine Funktion (pathOnly), um den aktuellen Pfad des Dokuments zu extrahieren. Das Skript erwartet daher, dass sich die Bilder im selben Pfad wie das Dokument befinden. Alternativ können Sie die absolute URL fest codieren, wenn Sie die Bilder an einer anderen Stelle platzieren, oder Sie können das Tag am Anfang des Dokuments verwenden, um Netscape explizit die Basis-URL mitzuteilen, die Sie verwenden möchten.

JavaScript Digitaluhr

JavaScript Digital Clock var Temp; Uhr einstellen(); Funktion setClock () {var OpenImg = ' ' Temp = "" now = new Date (); var CurHour = now.getHours (); var CurMinute = now.getMinutes (); jetzt = null; if (CurHour> = 12) {CurHour = CurHour - 12; Ampm = "pm"; } else Ampm = "am"; if (CurHour == 0) CurHour = "12" if (CurMinute <10) CurMinute = "0" + CurMinute else CurMinute = "" + CurMinute

CurHour = "" + CurHour; for (Count = 0; Count 'for (Count = 0; Count <CurMinute.length; Count ++) {Temp + = OpenImg + CurMinute.substring (Count, Count + 1) + CloseImg} Temp + = OpenImg + Ampm + CloseImg}

Funktion pathOnly (InString) {LastSlash = InString.lastIndexOf ('/', InString.length-1) OutString = InString.substring (0, LastSlash + 1) return (OutString); }}

Die JavaScript-Uhr

Die aktuelle Zeit ist: document.write (Temp);

Verwenden von JavaScript mit clientseitigen Imagemaps

Wenn Sie das Glück haben, die Kontrolle über den Server zu haben, der Ihre veröffentlichten Webseiten enthält, haben Sie sich wahrscheinlich mit serverseitigen Imagemaps beschäftigt. Dies sind Bilder, die in kleinere Stücke "zerlegt" wurden; Wenn der Benutzer auf jeden Block klickt, reagiert der Server auf eine andere Aktion.

The downside to server-side image maps is that you need a CGI program running on the server to handle the click requests. Not everyone has CGI access. Client-side image maps change that: The "intelligence" for dissecting the image and directing the user to the proper link -- based on the area of the image that was clicked -- is built into the browser. Netscape Navigator (version 2.0 and later) is one of many browsers that now support this standard.

Netscape takes the process a step further, however, letting you integrate client-side image maps with JavaScript. In an ordinary client-side image map, you are limited merely to linking to another page. If you wish, you can "link" to a JavaScript function and give your image maps even more intelligence. For instance, you might create a control panel that only lets users successfully click on an image button if some piece of information -- say a user name -- has been provided.

The anatomy of a client-side image map

Two new HTML tags are used to create client-side image maps. They are the tag, which defines the map structure, and one or more tags, which define the clickable areas within the image. To create the image map, define a tag and give the mapping a name. The syntax is:


  

You can use most any name for the map, but it should contain only alphabetical and numeric characters. The exception is the underscore, but avoid using an underscore for the first character. Next, define one or more tags that define the areas of your image. The tag takes the syntax:


  

After the last tag, use the tag to denote the end of the mapping.

The last item is the image you want to use, with a reference to the area map you've previously defined. Use the standard tag, with a new USEMAP attribute. For the USEMAP attribute, provide the name of the map. Here's an example:

This map uses an image named control.gif. The tag references the map name, which is #control (note the hash before the name). Other attributes provided with the tag are no border (BORDER=0), and the width and height of the image. When your users click on the back arrow (which is the first area defined), they are sent to the index.html page. Conversely, if they click on the contents "button" (the second area defined), they are taken to a page called toc.html. And if they click on the forward arrow, they are taken to a page called backpage.html.

Adding JavaScript to image map control

JavaScript can be used to extend the functionality of client-side image maps. For added flexibility provide the name of a JavaScript function for the HREF in the tag. Instead of jumping to some page, your JavaScript code is executed in which you can do anything you want. The trick: Use the JavaScript: protocol for the URL, and follow it with the name of the function you wish to use.

For example, suppose you want users to go back only one page in the history list when they click on the back arrow. You can use the window.history.go(-1) method to jump back one page in the user's history list. You can either provide this entire function after the JavaScript: protocol, or call a user-defined function that contains this instruction. Here are both methods:


  

or ...


  

... and elsewhere in the document:

 function goBack() { window.history.go (-1); }  

Personally, I prefer the latter method, because I often need to provide a number of JavaScript functions that I want performed. But, you can use whatever method you like best and which best fits the situation.

Following is a working example of using client-side image maps with JavaScript. The buttons display an alert box to show you that the JavaScript: URL is indeed working. The forward and back buttons also work -- assuming you have pages forward and backward in your history list. If the history list is empty (you have loaded the document into a new window, for example) then the current page remains.

Client-side image map example

Client Side Image Map Example function goBack() { alert ("Back"); window.history.go (-1); }

function goForward() { alert ("Forward"); window.history.go (1); }

Funktion toc () {alert ("Inhaltsverzeichnis"); }}