English translation is on due course...please wait
A good knowledge of the HTML language is necessary. This page is best viewed under Microsoft Internet Explorer (because of CSS (cascading style sheet) functionning only under this browser.
Source
Code
Hypertext
links
Forms
Message
dans la barre d'état
Sortir
votre page d'une frame
Button
Browsers
Background
color of a text
Info-bulle
Les
feuilles de style
Défilement
d'images par un clic sur un des boutons suivant/précédant
| Hiding the source code of the pop-up menu |
To hide the HTML code source, visible through the pop-up menu, include the following
instructions in your html code:
Introduce this script in between the following tags <HEAD> et </HEAD> ou
<BODY> et </BODY>
<script language ="Javascript">
function click() {
if (event.button ==2) { // if you click on the right button of the mouse
alert('Code source registered!!'); // messagebox with the button "OK"
}}
document.onmousedown=click;/ /if the right button of the mouse is clicked, then
the function click() is executed
</script>
However, I am looking for a script which hides the html code through the browser's menu. One solution may be to complicate the reading of the code by rendering it boring to read!!!.[TOP PAGE]
| The browsers' dilemma |
Appeler un des deux fichiers html Net.html et Int.html selon le
navigateur utilisé via une clique sur une image réferencée ou un hypertexte. Ici aussi,
le Javascript nous vient au secours. Tout d'abord, il faut une fonction qui teste le
navigateur et renvoie l'utilisateur sur le fichier Net.html ou Int.html selon le browser
de l'utilisateur. Voici la fonction :
<script language ="Javascript">
function browser() {
if (navigator.appName =="Netscape")
window.location.href="Net.html";
if (navigator.appName =="Microsoft Internet Explorer")
window.location.href="Int.html"; }
</script>
Bien entendu, les fichiers Net.html et Int.html doivent exister!! Tel que le path est
défini, ces deux fichiers se trouvent dans la même répertoire ou se
trouve le script. Sinon, il faut que vous ajoutiez le chemin corect. Ce n'est pas tout.
Question: Ou place-t'on cette fonction pour que lorsqu'on
clique sur l'image réferencée ou l'hypertexte, on accède au fichier Net.html
ou Int.html?
Réponse: On introduit cette fonction à l'interieur de la
balise <a HREF> et </a> en ajoutant le morceau de texte suivant
"Javascript=browser()" comme ceci::
<a HREF="Javascript=browser()"........</a>
[TOP
PAGE]
| Sending data via e-mail using a form |
Qui n'a pas entendu parler des formulaires!!! On peut en creer une avec les applets JAVA, les cookies ou avec des fichiers CGI (Common Gateway Interface) avec un logiciel approprié,.. ou tout simplement en surfant sur le net. En effet, on peut y trouver des formulaires gratuites. Ces fichiers (*.pl ou *.cgi) permettent le transport et traitement des données vers/au serveur et vers/au l'utilisateur. Prenons le cas très simple d'une formulaire que j'ai obtenu sur le site de DevParadise. On s'inscrit gratuitement et un numéro "ID" vous sera fourni par voie électronique qu'il faut ajouter au code source. Le code fourni est le suivant à qui j'ai ajouter quelques codes pour pouvoir tester les champs avant d'envoyer le formulaire. En effet, le code fourni ne teste que l'adresse e-mail du client sans prendre en compte si celui-ci a mis son nom et ses requetes. Ce qui est normale car ils ne peuvent pas prévoir le nombre de champs que vous allez introduire dans le formulaire. Les codes que j'ai introduits permettent de tester si le client met son nom et tape quelques remarques. Dans le formulaire (<FORM>), pour avoir accès aux éléments, il faut avant tout lui donner un nom (NAME="formulaire). On accède ainsi aux éléments par : document.formulaire.element.value. La fonction test_champs() écrit entre les balises <Script language="Javascript"> et </Script> permet de faire les tests. Pour que ces tests soient effectués avant que le formulaire soit renvoyé, il faut ajouter l'instruction On Submit="return test_champs()" dans la balise <FORM>.[TOP PAGE]
[TOP PAGE]
| Creating a button like that of your browser |
Une ligne de texte suffit pour créer un bouton comme celui de votre
navigateur. Il suffit d'inserer la ligne de code ci-dessous délimiter par les balises
<FORM> et </FORM> (notez que ces balises sont aussi utiliser pour la création
des formulaires.
L'execution doit vous donner un bouton comme ceci :
En cliquant sur le bouton "Retour", vous devriez retourner à l'action juste auparavant.[TOP PAGE]
| Changing the color of a hypertext when the mouse is over the text |
Tout lien hypertexte sera de couleur bleue. Lorsqu'il est visité, il sera de couleur rouge et lorsque la souris passe au dessus du lien, la couleur du texte sera verte. Cette dernière propriété n'est active que sous Internet Explorer.[TOP PAGE]
| Background color for a text |
L'instruction suivante vous permet de mettre une couleur de fond à n'importe quel texte choisi :
<SPAN STYLE="background:couleur"> votre texte </SPAN>
A vous de choisir la couleur (red, yellow, blue, green...) ainsi que le texte (votre texte dans l'instruction).[TOP PAGE]
| Message dans la barre d'état : 2 exemples |
Vous pouver mettre un message d'aacueil dans la barre d'état de votre navigateur (barre du bas) lors du chargement de votre page par un internaute. Un petit code Javascript suffit:
<Script Language = "Javascript">
window.defaultStatus="votre texte";
</Script>
Vous pouvez aussi mettre un message sur la barre d'état du navigateur qui change au passage de la souris sur un lien hypertexte. Insérer ce petit code HTML (en bleu) dans le code déjà existant (ou non) du lien hypertexte:
<A Href="exemple.html" OnMouseOver="self.status='Message';
return true" OnMouseOut="self.status=''; return true">
votre lien </A>[TOP
PAGE]
| Info-bulle sur un lien lors du passage de la souris |
Ceci permet à l'internaute d'avoir plus de renseignements sur la page qu'il va visiter grâce à votre lien hypertexte. Il suffit d'insérer ce bout de code (en bleu) dans le code déjà existant (ou non) du lien hypertexte;
<A Href="exemple.html" TITLE="vos renseignements"> votre lien </A> [TOP PAGE]
| Sortir votre page emprisonné dans une frame |
Si un internaute visite votre site depuis une page avec des frames (cadres), votre page (et le site avec!!) sera emprisonnée dans le frame. Pour remédier à cela, il suffit d'inserer un petit code javascript entre les balses <HEAD> en </HEAD> comme suit:
<SCRIPT = "JAVASCRIPT">
if (self != top) top.location.href=self.location.href;
</SCRIPT> [TOP
PAGE]
ATTENTION: fonctionne
uniquement avec Internet Explorer 4.0 ou plus.
Vous avez vu ce qu'on peut faire avec les feuilles de style (aussi connues comme CSS
(Cascading Style Sheet)) lorsque vous promenez la souris sur les liens de cette page
(intentionellement, j'ai enlevé le soulignement des liens car c'est plus beau ainsi). Les
feuilles de style sont pour le Web ce que les mises en pages sont pour les logiciels de
traitement de texte (exemple : Word97...et pour être en vogue, Word2000!! du nouveau Pack
Office 2000 Premium). On peut faire beaucoup plus avec les attributs de l'objet STYLE
(voir les livres spécialisés sur le Javascript ou le Dhtml par exemple). Voici ce
qu'il faut faire pour que votre page ait les mêmes propriétés de liens hypertextes que
les miennes :
(1) : On définit les paramètres de liens hypertextes. J'ai déjà parlé des couleurs mais jetons un coup d'oeil sur le deuxième argument des propriétés Link, Visited et Hover (explications?). Pour que les liens ne soient pas soulignés, ajoutez "text-decoration: none" comme ci-dessous. Le code doit être placé entre les balises <HEAD> et </HEAD>.[TOP PAGE]
<style type="text/css">A:link {color: red;text-decoration:none}
A:visited {color: green;text-decoration:none}
A:hover {color: red;text-decoration:none}
</style>(2) : Il suffit alors de redéfinir textDecoration à 'underline' (souligné) lorsque
la souris passe (onmouseover) sur l'hypertexte (j'ai ajouté la propriété 'italic' mais
vous pouvez aussi prendre 'bold' (gras)...). Notez que lorsqu'on a deux instructions ou
plus, il faut les insérer entre "{" et "}". Vous pouvez aussi
utiliser les propriétés font.size (taille) ou color pour agrémenter votre page.
Lorsque la souris n'est plus sur le lien, vous re-initialiser les paramètres (fontStyle
à "normal" et textdecoration à "none") comme ils étaient lors du
chargement de la page.[TOP
PAGE]
Votre texte de lien hypertexte
</a>[TOP PAGE]
REMARQUE: Pour que les internautes utilisant Netscape puissent voir une page avec des liens qui sont soulignés (mais il n'y a plus les effets comme sur cette page (avec Internet Explorer 4 ou plus), il faut changer un peu les deux codes ci-dessus en :
<style type="text/css">A:link color: red;
A:visited color: green
A:hover color: red
</style> <a href="page1.html" onmouseover="{this.style.fontStyle='italic';this.style.textDecoration='none'}" onmouseout="{this.style.fontStyle='normal';this.style.textDecoration='underline'}">Votre texte de lien hypertexte
</a>
| Défilement d'images par un clic sur un des boutons suivant/précédant |
ATTENTION: A cause de l'incompatibilité des deux grands navigateurs
(Microsoft Internet Explorer et Netscape), il faut que les images soient de la même
taille.
Si vous avez une page avec un certain nombre d'images (de même taille), pourquoi ne pas
utiliser deux boutons (suivant et précédant) qui permettront au surfer par un simple
clic sur un des boutons pour passer d'une image à l'autre. La solution est d'utiliser le
Javascript. Si vous voulez voir un exemple, cliquez!!!.
Il n'y a pas de limite au nombre d'images (attention quant même de ne pas alourdir votre
page avec d'images de grosses tailles qui prendront beaucoup de temps à se charger). La
variable "num" du code ci-dessous dépend du nombre d'images de votre page et
n'oubliez pas de changer "Images1.JPG, Images2.JPG,..." par vos images. Ce code
impose que la page html et les images soient dans la même répertoire. Personne ne vous
oblige de mettre les images dans un autre répertoire pais dans ce cas là, définissez le
chemin pour "img1.src, img2.src,..." dans le code ci-dessous.
Placez le code ci-dessous entre les balises <HEAD> et </HEAD>:
Il ne reste qu'à créer les deux boutons, de leur donner les étiquettes
'Suivant' et 'Précédant' et d'utiliser la méthode 'Onclick' pour appeler les fonctions
'diapo_suivant()' et 'diapo_precedant'.
Lors du chargement de la page, il faut quant même qu'on voit une image!! C'est pourquoi
on insère la dernière ligne du code ci-dessous. Notez la valeur
'name="mon_image" ' qui permet de charger l'image. Enfin la fonction 'eval()'
qui permet au programmeur de récupérer une chaîne de caractères depuis une source
externe, comme lors d'une saisie d'un utilisateur. Dans notre cas, cette fonction permet
de récupérer le nom de l'image en cours et de l'affecter à 'document.mon_image.src'.
[TOP PAGE]