Une bonne connaissance du langage HTML est nécéssaire. Cette page est optimisée pour Internet Explorer 4 ou plus (à cause de l'objet Style propre à ce navigateur).
Code
Source
Liens
hypertextes
Formulaires
Message
dans la barre d'état
Sortir
votre page d'une frame
Bouton
Navigateurs
Couleur
de fond d'un texte
Info-bulle
Les
feuilles de style
Défilement
d'images par un clic sur un des boutons suivant/précédant
| Cacher le code source du menu contextuel |
Pour cacher le code source HTML via le menu contextuel (pop_up menu ou si vous voulez
le menu qui apparaît lorsque vous cliquez sue le bouton droit de la souris).
Introduisez ce script entre les balises <HEAD> et </HEAD> ou <BODY> et
</BODY>
<script language ="Javascript">
function click() {
if (event.button ==2) { // si on clique sur le bouton droit de la souris
alert('Code source registered!!'); // boîte de dialoque avec le bouton
"OK"
}}
document.onmousedown=click;//si on clique sur le bouton droit de la souris alors
on execute la fonction click()
</script>
Par contre, je cherche toujours le script pour empêcher la visualisation du code source via le menu du navigateur. Une autre solution serait de 'compliquer' le code source, c'est-à_dire le rendre illisible.[HAUT]
| Le dilemne des navigateurs |
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
"Javascript=browser()" comme ceci::
<a HREF="Javascript=browser()"........</a>
[HAUT]
| Formulaire classique et renvoie des données par e-mail |
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 requêtes. 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>.[HAUT]
[HAUT]
| Créer un bouton comme celui de votre navigateur |
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.[HAUT]
| Changer la couleur d'un lien hypertexte lorsque la souris passe dessus |
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.[HAUT]
| Mettre une couleur de fond à un texte |
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).[HAUT]
| 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>[HAUT]
| 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> [HAUT]
| 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> [HAUT]
| Les feuilles de style (Exemple? : vous y êtes!!!) |
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>.[HAUT]
<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.[HAUT]
Votre texte de lien hypertexte
</a>[HAUT]
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'.
[HAUT]