Voici une description en français, qui se présente lorsque l'on clique sur le drapeau français : lorsque vous cliquez sur un autre drapeau, ce texte disparaît et est remplacé par le texte correspondant à la langue choisie...
Here an English description, who presents itself when one clic on the English flag: when you click on another flag, this text disappears and is replaced by the text corresponding to the selected language...
Hier eine deutsche Beschreibung, die entsteht, wenn eine clic auf der deutschen Markierungsfahne: wenn Sie click auf einer anderen Markierungsfahne, dieser Text verschwinden und durch den Text ersetzt werden, der der ausgewählten Sprache entspricht.
Cette question m'est souvent posée. Comment réaliser l'exemple que vous avez dans votre tutoriel concernant l'apparition de texte, par le clic ou le passage de la souris sur des images ou du texte.
Si vous désirez de plus amples explications, consultez le tutoriel TutorDHTML.
Voici un exemple très souvent employé, concernant le choix de sections dans des langues différentes. Pour votre facilité, je vous ai indiqué les deux exemples : le premier avec le clic de la souris (événement onclick) et le deuxième, par le passage de la souris (événement onmouseover).
<script LANGUAGE="JavaScript">
var navig
= navigator.appVersion
var vers
= navig.substring(0,
3);
if (
vers<4.0){
alert("\nLa
version de votre navigateur ne vous permet pas de visualiser le DHTML ! \n\nLa
visualisation de ce document ne sera pas optimale : nous vous conseillons
fortement de télécharger la version 4.x de votre navigateur ou toute autre
version compatible avec le DHTML ! ");
}
</script>
Ce petit script est de plus en plus facultatif aujourd'hui, car très peu d'internautes emploient encore des navigateurs de version 3, vu la gratuité des navigateurs de version 4 et plus. Néanmoins, je vous le fournis dans le cas où cela vous intéresse encore...
<SCRIPT LANGUAGE="JavaScript">
<!-- Debut
du script
function montre(object)
{object.visibility
=
VISIBLE}
function cache(object)
{object.visibility
=
INVISIBLE}
// Fin du script -->
</SCRIPT>
Le langage de programmation concernant la propriété "visibility" étant différent pour Internet Explorer et Netscape, il faudra recourir à l'emploi de variables (VISIBLE et INVISIBLE)pour que celles-ci prennent des valeurs différentes pour les deux navigateurs.
Balise <body>
Pour que le texte en français (dans notre exemple) apparaisse dès le chargement de la page, il faut lancer la fonction "montre" pour l'objet concerné (ici mot)
<BODY onload="montre(langue);montre(mot)">
<script LANGUAGE="JavaScript">
/* Détection de Netscape*/
var isNS
= (navigator.appName
== "Netscape"
&& parseInt(navigator.appVersion)
>= 4);
var INVISIBLE
= (isNS)
? 'hide' :
'hidden';
var VISIBLE
= (isNS)
? 'show' :
'visible';
var mot =
(isNS)
? document.mot
: document.all.mot.style;
var motus
= (isNS)
? document.motus
: document.all.motus.style;
var langue
= (isNS)
? document.langue
: document.all.langue.style;
var motall
= (isNS)
? document.motall
: document.all.motall.style;
</script>
Le principe est assez simple. En fait, on va changer la valeur de la
propriété "visibility" pour que le texte apparaisse, par
l'action d'un événement de la souris (onclick ou onmouseover).
Pour cela, nous allons positionner les éléments qui nous intéressent, à
savoir les graphiques des drapeaux et les textes descriptifs (différentes
langues).
<STYLE TYPE="text/css">
<!--
A.nn {text-decoration:none}
A.nn:visited {text-decoration:none}
.mm {text-align:center;color:#800040;position:absolute;width:100%;top:150px;visibility:hidden;}
.lg {text-align:center;color:#800040;position:absolute;width:100%;top:50px;visibility:hidden;}
-->
</STYLE>
Drapeaux et codes d'événement
<P ID="langue"
class="lg">
<A
class="nn" HREF="javascript://" onclick="montre(mot);cache(motus);cache(motall)">
<IMG
SRC="france.jpg" BORDER=0 WIDTH=86 HEIGHT=51
ALT="En Français" HSPACE=10>
</A>
<A
class="nn" HREF="javascript://" onclick="montre(motall);cache(mot);cache(motus)">
<IMG
SRC="germanyc.jpg" BORDER=0 WIDTH=85 HEIGHT=51
ALT=" In Deutsch" HSPACE=10>
</A>
<A
class="nn" HREF="javascript://" onclick="montre(motus);cache(mot);cache(motall)">
<IMG
SRC="usa.jpg" BORDER=0 WIDTH=84 HEIGHT=51
ALT="In English" HSPACE=10>
</A>
</P>
Pour que
les drapeaux soient bien séparés, j'ai ajouté l'attribut "HSPACE=10",
qui donne un espacement horizontal de 20 pixels entre les différents drapeaux :
sinon, ils seraient collés l'un à l'autre...
Textes descriptifs
<P ID="mot"
class="mm">
Voici une description en français, qui se présente lorsque l'on clique
sur le drapeau français : lorsque vous cliquez sur un autre drapeau, ce texte
disparaît et est remplacé par le texte correspondant à la langue choisie...
</P>
<P ID="motus" class="mm">
Here an English description, who presents itself when one clic on the
English flag: when you cliquez on another flag, this text disappears and is
replaced by the text corresponding to the selected language...
</P>
<P ID="motall" class="mm">
Hier eine deutsche Beschreibung, die entsteht, wenn eine clic auf der
deutschen Markierungsfahne: wenn Sie cliquez auf einer anderen Markierungsfahne,
dieser Text verschwinden und durch den Text ersetzt werden, der der
ausgewählten Sprache entspricht.
</P>
Il faut donner un nom différent aux différents textes (FR - US - ALL) pour que l'on puisse attribuer une valeur différente de "visibility" à ces éléments (mot - motus - motall). Vous choisissez bien sûr des noms qui vous plaisent...
Ici, j'ai choisi des balises <P> mais vous pouvez employer <DIV>, <SPAN>.
Code des liens sur les drapeaux
<A
class="nn" HREF="javascript://" onclick="montre(motall);cache(mot);cache(motus)">
<IMG
SRC="germanyc.jpg" BORDER=0 WIDTH=85 HEIGHT=51
ALT=" In Deutsch" HSPACE=10>
</A>
D'une part, vous avez un pseudo-lien (annulé par javascript://) où l'événement "onclick" va lancer les fonctions nécessaire à montrer le texte désiré[montre()] et cacher les textes non désirés [cache()]. Pour qu'un texte soit visible, c'est la fonction "montre" qui est employée et pour cacher les autres textes, la fonction "cache".
Pour que le texte désiré apparaisse au même endroit, et donc remplace tous les autres, vous aurez choisi dans votre feuille de style la même classe (mm) pour les différents éléments de texte, ainsi le formatage sera identique, ainsi que le positionnement.
Si vous désirez donner la possibilité d'une part, de pouvoir cliquer pour charger une page lors du clic sur un drapeau, et d'autre part, indiquer un petit descriptif par le passage de la souris, veuillez changer le code des drapeaux, comme ci-dessous :
<A
class="nn" HREF="page.html"
onmouseover="montre(motall);cache(mot);cache(motus)">
<IMG
SRC="germanyc.jpg" BORDER=0 WIDTH=85 HEIGHT=51
ALT=" In Deutsch" HSPACE=10>
</A>
Ainsi, lors du passage de la souris, le texte descriptif désiré apparaît (événement "onmouseover") et lorsque l'on clique sur le drapeau, le lien (pas annulé ici) chargera "page.html".
Si vous donnez à la fois un véritable lien et un événement "onclick", la page sera chargée sans que vous ayez rendu visible le texte descriptif, car pour le même événement, vous demandez deux actions en même temps...
Pour visualiser la page exemple et /ou downloader celle-ci.
Pour rappel, voici le code d'une page de définition de cadres (frames) : pour exemple, est choisi ici une définition classique, à savoir, un menu à gauche et le contenu des pages à droite.
<FRAMESET COLS="15%,*">
<FRAME NAME="menu"
SRC="menu.htm" SCROLLING="No"
MARGINWIDTH=0 MARGINHEIGHT=0 NORESIZE
FRAMEBORDER="No">
<FRAME NAME="contenu"
SRC="page.htm" SCROLLING="No" MARGINWIDTH=0
MARGINHEIGHT=0 NORESIZE
FRAMEBORDER="No">
<NOFRAMES>
<BODY>
Encodez ici les informations lues par les visiteurs qui n'ont pas de
navigateurs sachant visionner des cadres (rare aujourd"hui)
</BODY>
</NOFRAMES>
</FRAMESET>
Voici le code du lien qui attribue l'adresse de votre site comme page de démarrage du navigateur du visiteur qui le désire :
<a href="javascript://" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.votresite')" title="Pour ajouter mon site comme page de démarrage de votre navigateur favori...">Mon site comme page de démarrage de votre navigateur</a>
javascript:// fait en sorte que le lien soit un "pseudo lien" (cfr TutorDHTML). Vous pouvez aussi remplacer ce code par # qui aura pour effet de relancer le haut de la page. Si vous avez de la musique sur votre page, celui-ci sera préférable, pour autant que le lien soit placé en haut de la page (confort du visiteur).
l'événement onclick attribue l'adresse indiquée (votre site) comme page de démarrage d'Internet Explorer.