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 visiter 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à visiter cette page .
- Terminé compteur
.
- Retour Sommaire
- Cette image fonctionne avec les deux navigateurs : explorer et Netscape .
Image mappée avec infos
bulles- 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 .
- 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 a chaque rectangle :
- a) lien vers "2mlot1.gif "Pour le premier rectangle .
- b) lien vers "4qm1.gif" pour le deuxième rectangl .
- 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 SHAPE=rect COORDS="0,50,51,71" HREF="images/4qm1.gif" AREA ALT="Grade de quartier maître de 1 re classe">
- <AREA SHAPE=rect COORDS="0,9,51,30" HREF="images/2mlot1.gif" AREA ALT="Grade de matelot de 1 re classe">
- <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éées .
- Retour Sommaire
- 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 .
- 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
- 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 :
- onmouseover="document.JavascriptCenter2.src='images/rollover1.gif'"
- onmouseout="document.JavascriptCenter2.src='images/rollover2.gif'">
Pour placer le code dans l'éditeur source HTML , séllectionner 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
INDEX