Utilisation de JavaScript et de graphiques

Les puristes d'Internet considèrent le World Wide Web comme un vecteur de diffusion d'informations. Une grande partie de ces informations est sous forme de texte, qui peut être facilement rendue par n'importe quel navigateur Web. Mais même depuis les débuts du Web, les graphiques ont joué un rôle important dans l'amélioration de la page de texte de base. De nos jours, il n'est pas inhabituel de voir des sites Web contenant quatre-vingt dix pour cent de graphiques. Ces sites peuvent ne pas être conformes au concept strict de diffusion de l'information, mais certains d'entre eux sont certainement attrayants.

La plupart d'entre nous aspirons à un équilibre entre le texte et les graphiques dans nos pages Web. Les graphiques servent à améliorer l'apparence et la lisibilité de la page. Les utilisations typiques des graphiques incluent des bannières, des publicités de sociétés de parrainage et des puces colorées pour mettre en évidence des éléments de texte importants.

Le langage de script JavaScript peut être utilisé pour améliorer les graphiques que vous mettez sur vos pages Web. JavaScript peut être utilisé pour contrôler dynamiquement le contenu graphique de la page. Par exemple, vous pouvez afficher un arrière-plan pour votre page le matin et un autre l'après-midi. Et la nuit, vous pouvez utiliser un fond de champ d'étoiles. Vous pouvez également utiliser JavaScript pour créer l'affichage des horloges numériques, des compteurs d'accès, des graphiques à barres, etc.

La colonne de ce mois-ci détaille plusieurs façons d'utiliser JavaScript et les graphiques. Mais un sujet notable manque à cette discussion: l'utilisation de JavaScript pour l'animation. Ce sujet mérite sa propre chronique, à venir bientôt.

Comprendre l'élément d'image HTML

L' élément est la balise la plus couramment utilisée pour représenter le contenu graphique dans un document HTML (les dernières spécifications HTML ajoutent un élément, mais il n'est pas encore pris en charge par Netscape et la plupart des autres navigateurs). Pour les non-initiés, la syntaxe de la balise de base est:

où "url" est une URL correctement construite pour le fichier image. L'URL peut être absolue ou relative. N'oubliez pas que tous les navigateurs ne sont pas équipés pour afficher des graphiques. Par conséquent, il est conseillé d'inclure un «texte alternatif» pour l'image pour ceux qui ont un problème d'image. Utilisez l'attribut ALT à l'intérieur de la balise pour spécifier un autre texte. Voici un exemple:

Les images créées avec la balise sont considérées comme "en ligne" car elles sont traitées comme des caractères de texte. Cela signifie que vous pouvez intercaler des images avec du texte et le navigateur veillera à ce que tout se déroule correctement.

Cependant, la plupart des images sont plus hautes que le texte qui les entoure. Le comportement normal de la plupart des navigateurs est de placer le bas de l'image au ras du bas du texte qui l'entoure. Vous pouvez modifier ce comportement si vous souhaitez un alignement différent. Les choix d'alignement les plus courants, compris par tous les navigateurs qui affichent des images, sont:

  • bas - Aligne le texte au bas de l'image. C'est la valeur par défaut.
  • middle - Aligne le texte au milieu de l'image.
  • top - Aligne le texte en haut de l'image.

Vous ne pouvez utiliser qu'un seul alignement à la fois. La syntaxe est:

Les navigateurs affichent généralement les images dans leur «taille naturelle». Si une image fait 100 pixels sur 100 pixels, par exemple, c'est sa taille lorsqu'elle est rendue sur l'écran du navigateur. Mais avec Netscape, vous pouvez modifier la taille de l'image si vous la souhaitez plus petite ou plus grande en utilisant les attributs WIDTH et HEIGHT. Un avantage de ces attributs est que, lorsqu'ils sont utilisés, le navigateur crée une boîte vide pour l'image, puis remplit la boîte avec l'image pendant le chargement de la page entière. Cela indique aux utilisateurs qu'un graphique est attendu à cet endroit.

  • Spécifier uniquement la largeur ou la hauteur modifie la taille de l'image proportionnellement. Par exemple, en spécifiant les tailles d'une image carrée à une hauteur et une largeur de 100 pixels. Si l'image d'origine n'est pas carrée, elle est dimensionnée en proportion relative. Par exemple, si l'image d'origine est de 400 pixels de large sur 100 pixels de haut, la modification de la largeur à 100 pixels réduit l'image à 25 pixels de haut.

  • La spécification de la largeur et de la hauteur vous permet de modifier la proportion de l'image comme vous le souhaitez. Par exemple, vous pouvez transformer cette image de 400 par 100 pixels en 120 par 120, 75 par 90 ou autre chose.

Par exemple:

Attention : en combinaison avec JavaScript, vous devez toujours fournir les attributs HEIGHT et WIDTH pour les balises. Sinon, vous risquez d'obtenir des résultats incohérents et / ou de planter! Cette mise en garde s'applique à toute balise qui apparaît dans le même document qui contient du code JavaScript.

Combiner des images avec JavaScript

JavaScript peut être utilisé pour améliorer les images utilisées dans les documents HTML. Par exemple, vous pouvez utiliser JavaScript pour créer dynamiquement une page à l'aide d'images sélectionnées par une expression de test conditionnel, telle que l'heure de la journée.

En fait, l'application d'horloge numérique JavaScript, qui utilise JavaScript et un assortiment d'images GIF, est l'une des plus populaires sur le Web. L'exemple clock.html utilise JavaScript pour afficher l'heure actuelle, à l'aide de gros chiffres LED verts. Chaque chiffre est un GIF individuel, enchaîné par JavaScript pour former le cadran d'une horloge numérique.

J'ai utilisé des GIF numériques fournis par Russ Walsh; Russ permet à ses GIF d'être utilisés librement sur les pages Web, à condition que le crédit soit accordé. Vous pouvez utiliser tous les chiffres que vous souhaitez pour votre horloge, mais vous devez fournir un fichier GIF séparé pour chaque chiffre et des fichiers séparés chacun pour les indicateurs deux-points et am / pm. Modifiez le code clock.html pour référencer les fichiers numériques que vous souhaitez utiliser.

Remarque : il est important que vous fournissiez l' URL absolue des images que vous utilisez. Sinon, Netscape n'affichera pas les graphiques. L'exemple clock.html utilise une fonction (pathOnly) pour extraire le chemin d'accès actuel du document. Le script s'attend donc à trouver les images dans le même chemin que le document. Vous pouvez également coder en dur l'URL absolue si vous placez les images ailleurs, ou vous pouvez utiliser la balise au début du document pour indiquer explicitement à Netscape l'URL de base que vous souhaitez utiliser.

Horloge numérique JavaScript

Horloge numérique JavaScript var Temp; Réglage de l'horloge(); function setClock () {var OpenImg = ' ' Temp = "" now = new Date (); var CurHour = now.getHours (); var CurMinute = now.getMinutes (); now = null; si (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}

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

L'horloge JavaScript

L'heure actuelle est: document.write (Temp);

Utilisation de JavaScript avec des images cartographiques côté client

Si vous avez la chance de contrôler le serveur qui contient vos pages Web publiées, vous avez probablement essayé les cartes d'images côté serveur. Ce sont des images qui ont été «disséquées» en plus petits morceaux; lorsque l'utilisateur clique sur chaque bloc, le serveur répond à une action différente.

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); }

function toc () {alert ("Table des matières"); }