Les astuces JAVASCRIPT
Vous aurez sans doute compris l'intérêt de passer régulièrement du mode 'édition' au mode 'code source' lorsque vous utilisez un logiciel éditeur html.
Quand celui-ci ne génère pas automatiquement le code pour une application souhaitée, il vous suffit de l'insérer directement entre les balises <BODY> de votre document.
Il est donc possible d'implémenter des petits scripts écrits dans un autre langage que le HTML, comme par exemple le JAVASCRIPT, qui va vous permettre d'ajouter des applications interactives ou des effets dynamiques sur votre page HTML.
-> voir aussi sur ce site : Insérer un compteur de visites sur votre site
Voici quelques astuces de base en JAVASCRIPT ou en HTML :
Quand celui-ci ne génère pas automatiquement le code pour une application souhaitée, il vous suffit de l'insérer directement entre les balises <BODY> de votre document.
Il est donc possible d'implémenter des petits scripts écrits dans un autre langage que le HTML, comme par exemple le JAVASCRIPT, qui va vous permettre d'ajouter des applications interactives ou des effets dynamiques sur votre page HTML.
-> voir aussi sur ce site : Insérer un compteur de visites sur votre site
Voici quelques astuces de base en JAVASCRIPT ou en HTML :
1. Un bouton dynamique de lien qui change au passage de la souris
Exemple :
Passez avec votre curseur au dessus de ce bouton :
Passez avec votre curseur au dessus de ce bouton :
Il a fallu en réalité préparer 2 images pour "fabriquer" ce bouton dynamique, ici deux images au format .GIF : L'image bouton1.GIF (fond rose) et l'image bouton 2.GIF (fond bleu).
On insère un petit script Javascript incluant le lien hypertext dans le code HTML de la page (entre les balises <Body>, à l'emplacement ou l'on veut retrouver ce bouton dynamique) :
Code source :
<A HREF="http://html.guycuvelier.net" onmouseover="f1.src='images/bouton2.GIF'" onmouseout="f1.src='images/bouton1.GIF'"><IMG SRC="images/bouton1.GIF" ALT="Page d'accueil" WIDTH=100 HEIGHT=39 BORDER=0 ALIGN=bottom name=f1 onload="tempImg=new Image(100,39);tempImg.src='images/bouton2.GIF'"></A>
Explication de la syntaxe :
-> A HREF="http://html.guycuvelier.net" -> indiquez l'adresse internet où doit conduire le bouton.
-> name= f1 -> correspond au nom du bouton qui doit être court (2 caractères suffisent). Attention de bien changer le nom des boutons s'il y en a plusieurs sur la même page web.
Ce paramètre est repris trois fois dans le script et dois toujours correspondre aux deux autres...
-> images/bouton1.GIF -> correspond au chemin d'accès du premier bouton (visible)
-> images/bouton2.GIF -> correspond au chemin d'accès du second bouton (apparait au passage de la souris)
-> WIDTH=100 HEIGHT=39 -> correspond aux dimensions de l'image qui servira de bouton. Ce paramètre est repris deux fois dans le script et il faut qu'ils correspondent. Sauf si la volonté est d'agrandir ou de diminuer l'image au passage de la souris...
2. Afficher un message d'alerte quand on clique sur un lien :
Exemple :
Dans ce cas, une image "Gif animée" sert de lien :
Dans ce cas, une image "Gif animée" sert de lien :
Code source :
<A HREF ="astuces.html" TARGET=""
ONCLICK="window.alert('Alerte Alerte !! Cette page est en travaux... Visitez-la souvent pour profiter des mises à jour! Bien à vous, Guy Cuvelier')">
<IMG SRC="images/travaux.gif" BORDER=0 ALIGN=middle START="fileopen">
</A>
Explication de la syntaxe :
<A HREF ="lien de destination" : Définit l'ouverture d'une balise de lien
TARGET="" : Le cadre de destination est par défaut le même que le lien
ONCLICK="window.alert('votre texte')"> : Commande d'affichage d'une boîte d'alerte avec le texte de votre choix
<IMG SRC="votre image" BORDER=0 ALIGN=middle : Balise d'affichage de l'image dont vous définissez le chemin d'accès, alignée au milieu avec un bord de 0
START="fileopen"> : Commande d'ouverture de la boîte d'alerte
</A> : Balise de fermeture du lien
3. Lien de retour automatique vers la Page Précédente
Exemple :
Il est intéressant de placer en bas de chaque page de votre site un lien permettant de revenir en arrière dans la navigation..
Code source :
Il s'agit d'un lien incluant un petit JAVASCRIPT :
<A HREF="javascript:history.go(-1)">Page précédente</A>
Résultat :
Cliquez sur le lien ci-dessous pour vous rendre à la page précédente :
Il est intéressant de placer en bas de chaque page de votre site un lien permettant de revenir en arrière dans la navigation..
Code source :
Il s'agit d'un lien incluant un petit JAVASCRIPT :
<A HREF="javascript:history.go(-1)">Page précédente</A>
Résultat :
Cliquez sur le lien ci-dessous pour vous rendre à la page précédente :
4. Menu de navigation rapide en javascript
Exemple :
On fait appel ici à un petit code JAVASCRIPT qui s'insère dans un formulaire html
On fait appel ici à un petit code JAVASCRIPT qui s'insère dans un formulaire html
Code source :
<FORM ACTION="" METHOD=POST>
<SELECT NAME=listmap onchange="if (form.listmap.selectedIndex != 0) location = form.listmap.options[form.listmap.selectedIndex].value; else alert('Veuillez choisir une autre destination.')">
<OPTION SELECTED>Navigation rapide sur ce site :
<OPTION>----
<OPTION VALUE="index.html">-> Page d'accueil
<OPTION VALUE="preacuteparation.html">-> Préparation du site web
<OPTION VALUE="html.html">-> Le langage HTML
<OPTION VALUE="la-page.html">-> Le formatage de la page
<OPTION VALUE="le-texte.html">-> Le formatage du texte
<OPTION VALUE="les-tableaux.html">-> Les tableaux
<OPTION VALUE="les-images">-> Les images
<OPTION VALUE="les-liens">-> Les liens
<OPTION VALUE="les-frames.html">-> Les frames
<OPTION VALUE="les-formulaires">-> Les formulaires
<OPTION VALUE="les-couleurs">-> Les couleurs RVB
<OPTION VALUE="les-fichiers-multimedia.html">-> Les fichiers multimedia
<OPTION VALUE="http://www.guycuvelier.net">-> Page du Webmaster
</SELECT><SCRIPT LANGUAGE=JavaScript>function src() { window.location = "view-source:" + window.location.href }</SCRIPT>
</FORM>
Il vous sera aisé de copier ce code, de le modifier et de l'insérer entre les balises BODY de votre page pour offrir une option de navigation rapide à vos visiteurs.
Dans ce cas précis, les destinations proposées sont des pages html situées dans le même répertoire. Pour des pages se trouvant dans d'autres dossiers ou des pages externes au site, il faut entrer l'adresse URL complète de la page OPTION VALUE="URL de la page" (comme c'est le cas dans l'exemple pour la page du webmaster).
5. Transfert automatique de l'internaute vers une autre page web
Il ne s'agit pas ici d'un script Javascript mais d'une simple balise META...
A placer entre les balises <HEAD> de votre page html, ce script rafraichit automatiquement la page après un délai déterminé en secondes, de 0 seconde à l'infini, et vous transfère vers une autre page du site, ou d'un site extérieur.
Code source :
<META HTTP-EQUIV="Refresh" CONTENT="10;URL=http://html.guycuvelier.net">
Après 10 secondes sur la page qui contient ce script, l'internaute est transféré vers l'adresse http://html.guycuvelier.net...
---------------------------------------------------------------------------------------------------------------------------------
D'autres astuces html et javascript sur le web :
http://webmaster.multimania.fr/topics/technic/html/
http://www.2001webmaster.com/astuces/index.htm
http://www.javascriptfr.com/listecodes.aspx
Le HTML de A à Z...
http://www.startyourdev.com/html/index-html
Le Javascript de A à Z...
http://www.startyourdev.com/javascript/javascript-index
A placer entre les balises <HEAD> de votre page html, ce script rafraichit automatiquement la page après un délai déterminé en secondes, de 0 seconde à l'infini, et vous transfère vers une autre page du site, ou d'un site extérieur.
Code source :
<META HTTP-EQUIV="Refresh" CONTENT="10;URL=http://html.guycuvelier.net">
Après 10 secondes sur la page qui contient ce script, l'internaute est transféré vers l'adresse http://html.guycuvelier.net...
---------------------------------------------------------------------------------------------------------------------------------
D'autres astuces html et javascript sur le web :
http://webmaster.multimania.fr/topics/technic/html/
http://www.2001webmaster.com/astuces/index.htm
http://www.javascriptfr.com/listecodes.aspx
Le HTML de A à Z...
http://www.startyourdev.com/html/index-html
Le Javascript de A à Z...
http://www.startyourdev.com/javascript/javascript-index