de l'onglet Javascript...Par cet assistant, WebExpert 5 vous permet de créer des effets visuels par des images alternatives sur un lien (ou speudo-lien).
Pour lancer l'assistant, cliquez sur le bouton
de l'onglet Javascript...
Le premier script devrait vous être familier, en ce sens que nous avons déjà parlé de ce genre de script, à savoir, une détection des navigateurs utilisés (section "Commandes javascript en bref" par exemple ou TutorDHTML).
La détection est effectuée par une fonction (pas une procédure) : rappelez-vous la différence entre les deux ! La fonction retourne une valeur ici true ou false par le mot-clé return.
Ne vous laissez pas troubler par le nom identique donné au premier paramètre de la fonction (Netscape) et au nom (Netscape) du navigateur détecté en premier lieu, qui reçoit comme valeur de version (3.0) dans la condition "if" de l'attribut de la balise du lien. cette fonction a pour but de vérifier des versions différentes pour Netscape et internet Explorer : en effet, ce changement d'image sur lien ne fonctionne pas pour les versions inférieures à 3.0 (Netscape) et 4.0 (Internet Explorer) ! Il fallait donc différencier le script, puisque les versions 3.0 et plus de Netscape peuvent interpréter la commande, tandis qu'il faut au moins une version 4.0 d'IE. Ici on aurait pu tout aussi bien écrire :
L'opérateur logique ( || ) déjà expliqué dans les Notions Générales (OU dans beaucoup de langage) permet par une même condition de tester Netscape et son numéro de version autorisé ou Internet Explorer et son numéro de version accepté.
L'opérateur logique ( && ) effectue l'alternative entre les deux navigateurs. Quand le navigateur ne correspond pas à une version "autorisée", la fonction retourne false et dans le cas inverse, true.
À l'endroit où vous avez placé votre curseur, avant le lancement de l'assistant, est placé le lien "particulier", puisque celui-ci, en fonction des événements "onMouseOver" (curseur de la souris sur l'image) et "onMouseOut" (curseur en-dehors) change l'image qui est visionnée par l'utilisateur. Pourquoi "lien particulier" ? Parce, pour l'instant, Netscape ne reconnaît pas les événements que l'on vient de décrire, sur une image, mais bien sur un lien (ancre ou anchor) : donc, l'astuce pour que cela fonctionne pour les deux navigateurs est d'insérer ce code dans une ancre ! Nous verrons une variante à employer si vous ne désirez pas de lien réel interne ou vers une autre page...
La condition "if (VersionNavigateur(3.0,4.0))..." a pour objet de lancer la fonction "VersionNavigateur" (avec les paramètres Netscape = 3.0 et Explorer = 4.0) qui vérifie si la version du navigateur est compatible.
Si vous désirez employer la même fonction mais avec des numéros de version différents pour les deux navigateurs (4.0 pour Netscape et 3.0 pour Explorer), c'est-à-dire l'inverse de cete exemple, il suffit que vous inversiez l'odre des paramètres de la condition "if (VersionNavigateur(4.0,3.0))..." !
Dans le même ordre d'idée, vous pouvez exiger une version (>4.0) pour les deux navigateurs mais dans ce cas, il y aurait redondance puisque les paramètres (Netscape-Explorer) n'auraient pas de sens et tout l'intérêt de ce script est de différencier la détection, par rapport au numéro de version et la fonction devrait être simplifiée (le script déjà vu auparavant effectue cette vérification)
Vous pourriez également ajouter la détection d'un ou plusieurs autres navigateurs, en spécifiant le numéro de version compatible avec l'effet.
Enfin, si vous désirez changer le ou les URL et/ou la ou les images, il suffit de remplacer les fichiers graphiques (Gif, JPG...) et les adresses URL dans le code du "lien", sans effacer les apostrophes ou les guillemets qui terminent le code.
Voici un code qui vous permet de réaliser la même opération (images alternatives sur lien) mais sans vérification des versions des navigateurs (de moins en moins nécessaire car les utilisateurs possèdent de plus en plus des versions 4.x). L'avantage de cette variante est qu'elle ne rend pas obligatoire une fonction (script) supplémentaire au code inséré dans la balise de l'élément concerné :
Par contre, vous avez remarqué qu'il faut impérativement identifier l'image (NAME="image") pour que la commande fonctionne (image ou un autre nom bien sûr), voici l'effet réalisé de cette manière et spécifier donc sa référence dans le document par "document.image.src = ''" :
