Essais langage html.
Sommaire:
Compteur.
Image Mappée.
Info Bulles.
Musique.
Rollover.
Compteur. Valable pour orange et voila.
Vous écrivez la phrase suivante, à l'endroit désiré ou par copier coller.
Orange.
<im gsrc="http://pages.perso.orange.fr/client/php/compteur.php?url=rene.casorla&df=
Compteur2&dd=A&frgb=noir&ft=2&tr=Non&md=6&pad=Oui&comma=Non">
Voila.
<img src="http://monsite.voila.fr/php/Compteur.php?url=marine.rene.casorla&df=Compt-index&dd=A&frgb=noir&ft=2&tr=non&md=5&pad=oui&comma=non">
 
Vous sélectionnez la phrase.
Vous la copié dans le presse papier. ctrl+c.
Vous mettez l'index où doit se trouver le compteur dans votre page HTML.
Vous ouvrez l'éditeur source html.
Vous collez, ctrl+v, sans toucher à rien.
Puis vous revenez à la page html.
Un carré apparaît à la place de la phrase. Vous pouvez l'habiller d'une phrase:
Vous êtes le à avoir visité ce site.
Le compteur n'est pas visible, il faut placer la page sur le site, dés que celui ci sera visité un compteur apparaîtra.
Exécution: Vous êtes le à visité cette page.
Terminé compteur.
Retour Sommaire.
 
Création d'une image mappée, avec infos bulle.
Cette image fonctionne avec les deux navigateurs: explorer et Netscape.
Grade de second maitre de 1 re classe Grade de quartier maitre de 1 re classe Grade de matelot de 1 re classe Matelot breveté élémentaire Image mappée avec infos bulle.
La méthode AREA ALT pour les images à liens multiples (Imagemap)
Le code a simplement l'allure ci-dessous:
<MAP NAME="liste">
<AREA SHAPE="poly" COORDS=... AREA ALT="texte 1" >
<AREA SHAPE="rect" COORDS=... AREA ALT="texte 2" >
<AREA SHAPE="circle" COORDS=... AREA ALT="texte 3" >
</MAP>
<IMG SRC=... USEMAP="#liste" ALT="bulle de fond d'image">
Exécution:
Créez une Imagemap:
1°) Insérez une image, dans l'éditeur de page.
2°) Sélectionnez l'image.
Matelot de 1re classe
3°) Allez dans l'éditeur source HTML vous verrez le code de l'image sélectionné.
<IMG SRC="images/infobul2.gif" WIDTH=52 HEIGHT=114 ALIGN=bottom>
4°) Revenez à l'éditeur de page:
5°) Appelez l'éditeur d'image à liens multiples en cliquant avec le bouton droit sur l'image.
6°) Créez un lien à chaque rectangle:
a) lien vers "2mlot1.gif"Pour le premier rectangle.
b) lien vers "4qm1.gif" pour le deuxième rectangle.
c) lien vers "6sm1.gif" pour le troisième rectangle.
4°) Revenez à l'éditeur de page.
5°) Sélectionnez l'image, passez à l'éditeur source.
Vous voyez le code de l'image sélectionnée avec ses 3 liens vers des images.gif.
<MAP NAME=map1>
<AREA SHAPE=rect COORDS="0,89,51,110" HREF="images/6sm1.gif">
<AREA SHAPE=rect COORDS="0,50,51,71" HREF="images/4qm1.gif">
<AREA SHAPE=rect COORDS="0,9,51,30" HREF="images/2mlot1.gif">
<AREA SHAPE=rect COORDS="48,75,51,75"NOHREF>
</MAP><IMG USEMAP="#map1" SRC="images/infobul2.gif" WIDTH=52 HEIGHT=114 BORDER=0 ALIGN=top>
Nous allons maintenant créer les infos bulles avec AREA ALT.
6°)Sélectionnez l'image et revenez a l'éditeur source.
7°) Écrivez AREA ALT="Texte de l'info bulle"> à la fin de chaque code d'image, ce qui donne:
<MAP NAME=map1>
<AREA SHAPE=rect COORDS="0,89,51,110" HREF="images/6sm1.gif" AREA ALT="Grade de second maître de 1 re classe"AREA ALT="Texte de l'info bulle">
<AREA SHAPE=rect COORDS="0,50,51,71" HREF="images/4qm1.gif" AREA ALT="Grade de quartier maître de 1 re classe"AREA ALT="Texte de l'info bulle">
<AREA SHAPE=rect COORDS="0,9,51,30" HREF="images/2mlot1.gif" AREA ALT="Grade de matelot de 1 re classe"AREA ALT="Texte de l'info bulle">
<AREA SHAPE=rect COORDS="48,75,51,75" NOHREF>
</MAP><IMG USEMAP="#map1" SRC="images/infobul2.gif" WIDTH=52 HEIGHT=114 BORDER=0 ALIGN=top>
Votre  ImageMap avec infos bulle est créée. 
Retour Sommaire 
Infos Bulles.
La méthode ALT pour les images ordinaires,
(IE4+ et NN4+, mais sur PC-Win seulement)
Le codage est tout simplement
<P><A HREF="images/bassin.jpg"><IMG SRC="images/Bassin.GIF" WIDTH=85 HEIGHT=57 ALIGN=bottom ></A>
Vous placez ALT="Bassin de trois mille litres" , après GIF" ce qui donne
<P><A HREF="images/bassin.jpg"><IMG SRC="images/Bassin.GIF" ALT="Bassin de trois mille litres" WIDTH=85 HEIGHT=57 ALIGN=bottom ></A>.
Ne pas oublier l'espace après GIF" et avant WIDTH=85
Votre image a une info bulle Bassin de trois milles litres.
Bassin de 3000 litres
Terminé info bulle sur image.
Plus simple,
Pour ceux qui se serve de Claris Home Page 3, il suffit de faire un double clic sur l'image,
une boite de dialogue apparait, vous écrivez votre info bulle dans: "Texte de remplacement",
l'info bulle est en place sur votre image.
Retour Sommaire
Musique
Pour accompagner une page html d'un fichier sons inscrivez la phrase suivante,
<EMBED SRC="musique/accueil.wav" WIDTH=145 HEIGHT=45 scr="accueil.wav"autostart=TRUE>
à l'endroit ou vous voulez placer le son, sélectionner la phrase, copier là dans le presse papier avec "ctrl+C",puis passez dans l'éditeur source html, là vous collez la phrase à l'endroit ou se trouve l'index, avec Ctrl+V, vous repassez dans l'éditeur de page, un cadre de dimension 150, 15 pixels apparait à la place de la phrase. Dans la phrase,
"musique" est le dossier dans lequel se trouve le fichier son "accueil.wav". WIDTH
et HEIGHT sont les dimensions du lecteur, largeur hauteur en pixels. Et autostart=TRUE, démarrage automatique pour une diffusion, Si vous voulez que le son ne s'arrête pas il fautajouter LOOP="TRUE"à l'intérieur de EMBED, c'est à dire entre les < >.
Normalement en prévisualisant la page dans un navigateur, Explorer a partir de 4 et Netscape Navigator vous devriez avoir le son.
Essayons avec un fichier midi.
<EMBED SRC="musique/lamer.mid" WIDTH=145 HEIGHT=45 scr="lamer.mid" autostart=TRUE>
Fonctionne avec explorer à partir de 4 et avec Netscape Navigator 4.5,
Voir leur fonctionnement dans ma page d'accueil. 
Retour Sommaire. 
Rollover.
 Rollover simple. 
Voici le rollover le plus simple qui existe, puisqu'il ne nécéssite ni Javascript, ni html et est compatible Explorer & Netscape!
Donc, nous avons 2 images, dans le dossier "images"

rollover1.gif

rollover2.gif

et nous désirons qu'au passage de la souris sur l'une d'elle, on ait l'impression que l'image disparait-apparait 
<< passez votre souris pour une démo en ligne.
Voici donc le code à placer entre vos 2 balises <BODY> et </BODY>
<HTML>
<HEAD>
</HEAD>
<BODY>
le code se colle ici
</BODY>
</HTML>
<IMG SRC="images/rollover1.gif" WIDTH=79 HEIGHT=23 name="javacriptCenter1"
onmouseover="document.JavascriptCenter1.src="images/rollover2.gif"
onmouseout="document.JavascriptCenter1.src="images/rollover1.gif">
Explications:
Il s'agit de donner un nom à vos images, par exemple,
la première image de votre page se nommera "JavascriptCenter1",
la seconde "JavascriptCenter2",
etc...............
Pourquoi cela ????
du fait que si vous désirez créer plusieurs rollovers sur la même page, le code Html aura besoin de savoir à quelle image succèdera l'autre image!
Comprendre le code.
<IMG SRC="images/rollover1.gif" WIDTH=79 HEIGHT =23 ALIGN=Bottom name="JavascriptCenter1"
tout d'abord il faut indiquer la taille de l'image 1, l'alignement et le nom,
 images/rollover1.gif, nom de l'image.gif, qui se trouve dans le dossier images.
WIDTH=79 HEIGHT=23 , ceci est la taille de l'image, 79 pixels de large , 23 pixels de haut
ALIGN=Bottom, son alignement a gauche du texte.
name="JavascriptCenter1", son nom.
onmouseover="document.JavascriptCenter1.src="images/rollover2.gif".
onemouseover, signifie "au passage de la souris" en anglais.
donc: au passage de la souris sur l'image de départ, afficher rollover2.gif, qui se trouve dans le dossier images 
onmouseout="document.JavascriptCenter1.src='images/rollover1.gif'">
onemouseout signifie 'au retrait de la souris' en anglais.
donc: au retrait de la souris de rollover2.gif , réafficher rollover1.gif , qui se trouve toujours dans le dossier images . 
Si vous voulez mettre la rouge en premier dans la même page , le code sera : 
<IMG SRC="images/rollover2.gif" WIDTH=79 HEIGHT=23 name="JavascriptCenter2"
onmouseover="document.JavascriptCenter2.src="images/rollover1.gif"
onmouseout="document.JavascriptCenter2.src="images/rollover2.gif">
Pour placer le code dans l'éditeur source HTML, sélectionner le code, appuyer sur les touches "Ctrl + C" pour copier. Mettre l'index à l'endroit ou vous voulez placer l'image de départ. Passer dans l'éditeur source HTML, appuyer sur les touches "Ctrl + V", le code apparaitra à l'endroit ou se trouvait l'index. Revenez dans léditeur de page, vous verrez l'image de départ. Passer en prévisualisation dans Explorer ou Nescape, le rollover doit fonctionner. 
<< passez votre souris pour une démo en ligne. 
et la boucle est bouclée ;-)
exemple:
partie bleu = votre image , et le dossier dans lequel il se trouve.
partie verte=la taille en pixels.
partie rouge = nom html que vous donnez à l'image.
<IMG SRC="images/roollover1.gif" WIDTH=79 HEIGHT=23 name="JavascriptCenter1"
onmouseover="document.JavascriptCenter1.src='images/rollover2.gif'"
onmouseout="document.JavascriptCenter1.src='images/rollover1.gif'">
etc........
Dernier petit truc, toutes les images d'un même rollover devront avoir la
même dimension !!!
 
Retour Sommaire.