de l'onglet Javascript...Il vous est possible d'indiquer, par une petite fenêtre explicative (bulle) un message correspondant à une partie de texte : WebExpert 5 vous permet par cet assistant de le réaliser dans vos documents.
Pour lancer l'assistant, cliquez sur le bouton
de l'onglet Javascript...
L'assistant crée une fonction [afficheNote()] qui emploie la méthode associée [open('URL',"WindowName","Parameters")] pour créer une fenêtre (window.open) avec les paramètres classiques (que nous retrouverons dans le javascript "Fenêtre (script)").
Explication des paramètres de la méthode window.open('URL',"WindowName","Parameters"), que l'on peut écrire aussi avec la syntaxe open('URL',"WindowName","Parameters") uniquement [ mais il est d'usage d'employer la syntaxe complète window.open()]. Voici un description des diférents paramètres ainsi que les choix du script :
Signification des paramètres de la méthode open() associée à l'objet window |
Paramètres choisis dans le script | |
| toolbar=yes | Affiche dans la fenêtre la barre d'outils du navigateur employé (Arrêter - Actualiser...) | toolbar=no |
| location=yes | Affiche la fenêtre "location" du navigateur (adresse URL) | location=no |
| directories=yes | Affiche la barre des liens du navigateurs (dossier des liens) | directories=no |
| status=yes | Affiche certains messages dans la barre des status (adresse d'un lien par exemple) | status=no |
| scrollbars=yes | Affiche des barres de défilement (verticale et/ou horizontale) | scrollbars=yes |
| resizable=yes | Permet de redimensionner la fenêtre | resizable=yes |
| copyhistory=yes | Affecte à la fenêtre le même historique | copyhistory=no |
| width =400 | Détermine la largeur de la fenêtre (ici 400 pixels) | width =400 |
| height =100 | Détermine la hauteur de la fenêtre (ici 100 pixels) | height =100 |
La fonction afficheNote() crée donc une fenêtre avec les paramètres décrits ci-dessus, dont le nom de la fenêtre (windowName) est "Note". Ensuite, il donne un contenu à la variable "texte" qui comprend des attributs HTML, comme un document HTML normal. Remarquons qu'il est attribué comme fond d'écran (BODY BACKGROUND) la valeur hexadécimale que vous avez choisi dans l'assistant, éventuellement le graphique choisi comme fond, la police de caractères, couleur du texte etc.
Après diverses instructions qui affectent chaque fois ( += ) les nouvelles valeurs à la variable texte, la fonction place le focus dans la fenêtre [fenetreNote.focus()], ce qui permet d'afficher la bulle explicative, ferme celle-ci par [fenetreNote.document.close()] et retourne "false" qui termine ainsi l'action sans lancer le lien (HREF="" n'aura pas de suite).
L'élément <A> (ancre ou anchor) contient l'événement "onClick" qui va lancer la fonction afficheNote, par le mot-clé "return" (c'est bien une fonction et pas une procédure) en spécifiant à la dite fonction, le contenu de ses différents paramètres (message, couleurFond...).
Il vous est loisible, sans devoir relancer l'assistant, de changer le contenu du message de la bulle explicative (premier paramètre entre apostrophes), la couleur de fond d'écran (hexadécimal), image de fond d'écran éventuel, la police des caractères et sa taille : tout cela en n'oubliant pas de laisser les apostrophes qui délimitent les chaînes.
Choisissez l'onglet "Communs";
Cliquez sur le bouton (couleur de la police), généralement situé en dernière position;
Choisissez la couleur désirée, éventuellement par le bouton "Définir les couleurs personnalisées", ce qui vous donne un plus grand choix de couleurs;
Cliquez sur le bouton "OK";
Un code est alors inséré (à l'endroit de votre curseur) : <FONT COLOR="#000040"></FONT>;
Copier-coller le code hexadécimal (commence par un cardinal "#000040") et remplacez celui de l'attribut <A> qui ne vous intéresse pas par ce nouveau code (premier = couleur de fond d'écran, second = couleur de la police)
Changez l'événement "onClick" par "onMouseOver";
Remplacez l'adresse HREF="" par HREF="javascript://".
Pourquoi changer HREF="" par HREF="javascript://" ?
Comme il est expliqué dans TutorDHTML, ce qui est spécifié ici est une pseudo-ancre, car Netscape ne reconnaît pas l'événement onMouseOver en dehors d'une ancre et il faut donc "tromper" celui-ci par une fausse ancre, mais si vous laissez HREF="", les navigateurs vont, à défaut de trouver une page véritable, afficher la structure du dossier qui contient votre document ! Ce qui n'est pas très sécurisant... En remplacant HREF="" par HREF="javascript://", vous évitez ce problème et le lien sera ignoré, comme dans l'application ci-dessous. Vous pouvez bien sûr ajouter des attributs de style à l'ancre (color, font-size...) et même supprimer le soulignement du lien (classe "nn" spéciale pour les ancres sans soulignement)
Vous
avez certainement remarqué que la bulle (fenêtre explicative) se ferme dès
que vous avez replacé le curseur (focus) dans le document ! Cette
fermeture automatique est effectuée par l'ajout d'une ligne de code, dans la
balise <BODY> de la bulle. Évidemment, il
faut ajouter cette ligne de code dans le script qui "construit" la
dite bulle (fenêtre) : ce sont les caractères rouges qui sont
ajoutés dans le script. Si vous désirez cette fermeture automatique pour la bulle explicative, il
faut donc que vous ajoutiez (à la main) onBlur=\"window.close()\"
dans le script créé automatiquement par l'assistant de WebExpert 5. Ceci
est évidemment valable pour toute fenêtre. En fait, cela veut dire que lorsque
la fenêtre perd le focus (événement onblur), on
ferme celle-ci [window.close()]. Si vous n'ajoutez
pas cette instruction, lorsque le focus reviendra dans le document, la fenêtre
restera ouverte...
Enfin, les caractères "\" sont
ajoutés au code, parce que les guillemets sont nécessaires dans le code de la
balise <BODY> de la bulle, mais, si on les place sans les faire précéder
de ce signe particulier "\" dans
le code su script de définition (géré par l'assistant), une erreur de script
sera générée...
Ces guillemets ne doivent pas, en effet, être interprétés comme des
caractère de programmation mais bien comme des caractères normaux (pour
le script de définition de la fenêtre bien sûr, par contre, la balise
<BODY> de la bulle interprétera bien comme un script ces guillemets...)
