Compatibilité entre Internet
Explorer 4.x et Netscape 4.x
Vous savez maintenant que Internet Explorer 4.x et Netscape 4.x sont compatibles avec le DHTML mais dans quelle mesure et surtout, sont-ils compatibles entre eux ? Autrement dit, une même page est-elle visionnée de la même manière par les deux navigateurs !
En fait, oui et non ! Tout cela va dépendre de votre programmation : je parle ici bien
sûr du DHTML puisque pour 90% des codes HTML, il y a maintenant complète compatibilité.
Vous en avez un exemple concret directement : en effet, ceux qui visionnent cette chronique avec Netscape 4.x ne peuvent voir le titre de cette page avec l'effet "glow" mais voient celui-ci dans une forme habituelle
Vous pouvez créer des scripts qui permettent l'effet DHTML dans les deux navigateurs. Voici un exemple concret de scripts entièrement compatibes avec Internet Explorer 4.x et Netscape 4.x.
Effet DHTML "compatibles"
Le premier script doit consister à réaliser le déplacement que vous désirez donner au texte (image), vous faites cela en créant la fonction "javascript" slidelogo. Le titre de la fonction dépend de vous, peu importe comment vous la nommez.
Les couleurs ne sont là que pour vous aider à délimiter les différents éléments du script.
Le script sera bien sûr différent suivant l'effet DHTML ! Créer le script en fonction de ce que vous désirez : l'exemple que je vous présente ci-dessous concerne un déplacement de texte ainsi que le visionnement ou non d'une section (textes et /ou images). Vous pouvez à partir de ce script, créer une multitude d'effet DHTML.
Le second script, qui doit être impérativement placé après les sections de la page qui contiennent les différentes sections concernées par le premier script (en fin de page par exemple), contient différentes variables nécessaires à la réalisation du premier script (pour Netscape notamment) mais également le paramétrage de la fonction slidelogo (slideLogo(0, 80). Celui-ci sera identique pour les différents exemples de script présentés ci-dessous, hormi les paramètres de la fonction "slideLogo" qui dépendent du genre de déplacement décidé.
| <script LANGUAGE="JavaScript"> /* Détection de Netscape*/ var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4); var HIDDEN = (isNS) ? 'hide' : 'hidden'; var VISIBLE = (isNS) ? 'show' : 'visible'; var texte = (isNS) ? document.texte : document.all.texte.style; /* Début et fin du déplacement */ slideLogo(0, 80); </script> |
var HIDDEN, VISIBLE, texte sont les variables crées et utilisées par le script et reconnues par le navigateur.
La fonction de déplacement du texte est la fonction slideLogo et les paramètres entre parenthèses, le début et la fin du déplacement, autrement dit le positionnement respectif. Dans cet exemple, le texte commence à la position "0" et se termine à la position "80". Comme l'exemple choisi, le déplacement va du haut vers le bas, le premier positionnement (haut) commence au point "0" et se termine au point "80".
Suivant le script, vous pouvez changer le type de déplacement et ainsi décider que le texte parte du haut, vers le bas; du bas vers le haut; de la droite vers la gauche et enfin, de la gauche vers la droite (vous treouvez ci-dessous les différents scripts réalisant cela).
Texte avec effet DHTML
La section qui comprend le texte sur lequel va être appliqué l'effet DHTML doit être identifié (ID="texte") et comporter un style (ici, repris dans le fichier dhtml.css) défini par une classe de style (CLASSE="logo"). De nouveau, le nom de l'identification et du style est laissé à votre décision. Ici, j'ai choisi "texte" et "logo". Voici le code DHTML :
| <div ID="texte" CLASS="logo"> <p>Bienvenue sur ma page personnelle...</p> </div> |
Vous comprenez pourquoi maintenant, la variable "texte" a du être "déclarée" et le style "logo" créé !
Voilà, tous les éléments nécessaires sont présents et vous pouvez visionner le résultat ci-dessous, par le lien "Déplacement de texte, du haut vers le bas".
Lorsque vous étudierez cette chronique, vous pourrez (par vous-mêmes) découvrir comment changer certains autres paramêtres des scripts. Je ne vous fait pas l'affront de tout vous dire ;-D
Exemples "visibles" par les deux navigateurs (Explorer 4.x et Netscape 4.x)
Dans ces scripts, j'ai employé des feuilles de style, mais celles-ci sont définies et importées à partir d' un fichier commun, appelé "dhtml.css", suivant la technique que je vous ai expliqué dans la précédente chronique sur les feuilles de style. Ce fichier "dhtml.css" doit impérativement se trouver dans le même dossier que les pages qui y font appel.
Petite précision : l'effet de déplacement de texte est visible par les deux navigateurs, mais le petit effet de "spirale" sur le "bouton de retour vers cette page" ne pourra être visionné que par les utilisateurs d'Explorer ;-)
| Déplacement de texte, du haut
vers le bas Déplacement de texte, du bas vers le haut Déplacement de texte, de droite vers la gauche Déplacement de texte, de gauche vers la droite |
Apparition d'une section, après effet DHTML de déplacement de texte
Comme je sais que certains voudraient voir un exemple d'ajout d'une autre fonction (rappelez-vous, le petit commentaire en rouge dans l'explication du premier script), voici un exemple possible :
On emploie et ajoute, à la fin de la fonction slideLogo la fonction showObject qui change l'attribut "visibility:hidden" en "visibility:visible" de l'objet "obj". Voici le script en entier :
| <script
LANGUAGE="JavaScript"> /* fonction qui fait apparaître l'objet */ function showObject(object) { object.visibility = VISIBLE; } /* fonction qui fait disparaître l'objet */ function hideObject(object) { object.visibility = HIDDEN; } /* fonction qui effectue le déplacement de l'objet */ function slideLogo(from, to) { if (from > to) { depl.top = (from -= 20); setTimeout('slideLogo(' + from + ',' + to + ')', 75); } else showObject(obj) } </script> |
Je vous ai ajouté (ou laissé) la fonction hideObject qui a pour effet l'inverse de showObject, à savoir rendre visible l'objet qui possède l'attribut "visibility:visible". De cette manière, vous pourrez créer des effets supplémentaires dans vos scripts.
Dans cet exemple, j'ai employé du texte + le bouton de retour vers la chronique : vous pouvez y mettre aussi des images etc.
Pour voir l'effet appliqué à une page : effet de déplacement de texte avec apparition, en fin de déplacement, d'une autre section : Page complète.
Voilà, dans ma prochaine chronique, je vous donnerai des scripts supplémentaires pour Explorer 4.x, que je trouve très intéressants et que Microsoft met à notre disposition ainsi que la manière de "profiter" de l'incompatibilité entre Explorer 4.x et Netscape 4.x !
Si vous avez la possibilité d'employer les deux navigateurs sur votre PC (ou ailleurs), je vous recommande de visionner la page d'accueil de Page-Web et vous constaterez que cette page n'est pas identique avec Explorer et Netscape : j'emploie leur différence pour faire apparaître ou non certaines sections, comme ce qui ne concerne pas Netscape par exemple (boutons d'Active Channel et Desktop Channel par exemple...). J'ai fait de même pour le titre de cette chronique, qui n'apparaît pas de la même manière sous Netscape et Explorer...
Enfin, pour vous permettre de reprendre facilement les codes source des scripts proposés (y compris le fichier "dhtml.css"), je vous ai préparé un fichier compacté (auto-extractible) "ch15.exe" que vous pouvez télécharger maintenant.