CCG 1

Voilà les amis :-))

Aujourd'hui c'est le 3ème CCG qui commence... ;-))

Martine(Bubblegom) m'a soufflée dans le creux de l'oreille qu'elle aimerait bien apprendre à faire des "maps" ;-))

En faite, c'est très simple... j'ai réussi à comprendre leurs fonctionnements grâce à Jean-Marc et Serge il y a quelques mois... alors si moi j'y arrive, je peux vous assurer que c'est pas compliqué ;-)))

Par contre les explications, que j'ai essayé de rendre le plus complet possible, peuvent donner une impression de compliqué au premier abord...

Si c'est le cas, je vous conseille, pour démarrer, de ne changer que les images en essayant d'en trouver qui ont à peu près la même taille...

Ensuite vous pourrez jouer sur les paramètres pour changer de place les zones réactives ainsi que l'emplacement des images trouvées...

Vous vous attaquerez à en mettre d'autres, ou à n'en mettre qu'une, plus tard... quand vous aurez bien compris le fonctionnement...

Début :

Le fond :

<BODY bgColor=#ffffff> Changez la couleur du fond ou mettez une image...

La musique :

<BGSOUND balance=0 src="c:/Ma musique/1withalittlehelp.mid" volume=0> Changez le chemin de votre musique

Le texte :

<DIV align=center><FONT face="Comic Sans MS" color=#ff8c00><EM>2 images sont cachées... une dans les nuages, et une autre sur une colline...<BR><FONT size=2>Passez la souris sur l'image... et cherchez ;-))</FONT></EM></FONT></DIV> Titre ou explication de la recherche

<DIV> </DIV> ça c'est juste pour aérer un peu... je saute donc une ligne entre mon titre et mon image ;-))

L'image où on cherchera :

<DIV><IMG style="CURSOR: help" <== là c'est pour changer la forme du curseur

alt="on cherche ;-))" <== là c'est pour mettre du texte sur l'image quand on passe la souris dessus

src="c:/Mes documents/paysages/prairie.gif" changez le chemin de votre image

useMap=#Exemple <== là c'est pour définir que c'est sur cette image que les zones réactives vont réagir

border=0 et ça c'est pour éviter que l'image est une bordure ></DIV>

Les images que l'on doit trouver :

ici, il y en a deux... mais on peut en mettre qu'une ou en rajouter d'autres...

il suffit de changer le "id" de chaque div pour en rajouter et l'indiquer dans les commandes qui définissent les zones réactives que nous verrons un peu plus bas...

- 1ère image :

<DIV id=Monnaie <== le fameux "id" qui correspondra à chaque zone réactive

style="DISPLAY: none; Z-INDEX: 2; LEFT: 450px; WIDTH: 159px; POSITION: absolute; TOP: 80px"> Positionnez le div où il sera quand on l'aura trouvé et donnez lui des dimensions, vous pouvez la placer n'importe où sur la fenêtre et même sur l'image...

Dans l'exemple j'ai mis le soleil à 450 pixels à partir de la gauche de la fenêtre et à 80 pixels à partir du haut de la fenêtre... j'ai aussi paramétré le div afin qu'il fasse 159 pixels de largeur pour que le texte qui se trouve en bas de l'image ne prenne pas toute la largeur suivante de la fenêtre

<DIV align=center><IMG class=img1 src="c:/Mes documents/ciel/soleilnuage.gif"> changer le chemin de votre image

<BR><FONT face="Comic Sans MS" color=#00bfff size=2>Cette image apparaît et disparaît avec la souris</FONT> comme dans cet exemple, vous pouvez mettre du texte sous votre image sinon vous retirez de <br> à </font>

</DIV> </DIV>

- 2ème image :

faire la même chose que pour la première image...

<DIV id=Monnaie1 <== le "id" a changé...

style="DISPLAY: none; Z-INDEX: 2; LEFT: 450px; WIDTH: 159px; POSITION: absolute; TOP: 260px">

<DIV align=center><IMG class=img1 src="c:/Mes documents/animaux/ferret.gif"><BR><FONT face="Comic Sans MS" color=#32cd32 size=2>Quand à celle-ci, elle reste quand on l'a trouvée</FONT></DIV></DIV>

Définir les zones réactives :

<MAP name=Exemple>

- de la 1ère image :

<AREA onmouseover="Monnaie <== le nom de l'"id" était Monnaie pour la première image... on le retrouve donc ici et.... .style.display=' ';" onmouseout="Monnaie ...là aussi .style.display='none' <== ici on met "none" si l'on ne veut pas que l'image reste après le passage de la souris.

;"shape=RECT target=_top coords=190,15,270,50> <==ici c'est l'emplacement de la zone réactive... les chiffres sont positionnés comme ceci : 190 début de la longueur, 15 début de la hauteur, 270 fin de la longueur, 50 fin de la hauteur

- de la 2ème image :

<AREA onmouseover="Monnaie1 <== le nom de l'"id" était Monnaie1 pour la deuxième image... on le retrouve donc ici et.....style.display='';" onmouseout="Monnaie1 ...là aussi .style.display=' ' <== ici on ne met pas "none" si l'on veut que l'image trouvée reste affichée

;" shape=RECT target=_top coords=10,110,100,155> les fameuses coordonnées de votre deuxième zone réactive </MAP>

Encore un peu de texte :

<DIV> </DIV> ça c'est juste pour aérer un peu... ;-))

<DIV><FONT face="Comic Sans MS" color=#ff8c00 size=2>@micalement<BR>Patricia</FONT></DIV> et là c'est juste du texte... qui est ma jolie signature... ;-)))))))

Fin :

</BODY></HTML>

Voili voilà :-))

N'hésitez pas à poser des questions...

Et c'est parti pour gagner le 3ème CCG !!! ;-)))

@micalement

Patricia

CCG 3
Explications

Menu

	CCG 3 Explications
	Voilà les amis :-)) Aujourd'hui c'est le 3ème CCG qui commence... ;-)) Martine(Bubblegom) m'a soufflée dans le creux de l'oreille qu'elle aimerait bien apprendre à faire des "maps" ;-)) En faite, c'est très simple... j'ai réussi à comprendre leurs fonctionnements grâce à Jean-Marc et Serge il y a quelques mois... alors si moi j'y arrive, je peux vous assurer que c'est pas compliqué ;-))) Par contre les explications, que j'ai essayé de rendre le plus complet possible, peuvent donner une impression de compliqué au premier abord... Si c'est le cas, je vous conseille, pour démarrer, de ne changer que les images en essayant d'en trouver qui ont à peu près la même taille... Ensuite vous pourrez jouer sur les paramètres pour changer de place les zones réactives ainsi que l'emplacement des images trouvées... Vous vous attaquerez à en mettre d'autres, ou à n'en mettre qu'une, plus tard... quand vous aurez bien compris le fonctionnement... Début : <HTML><HEAD> <STYLE></STYLE> </HEAD> Le fond : <BODY bgColor=#ffffff> Changez la couleur du fond ou mettez une image... La musique : <BGSOUND balance=0 src="c:/Ma musique/1withalittlehelp.mid" volume=0> Changez le chemin de votre musique Le texte : <DIV align=center><FONT face="Comic Sans MS" color=#ff8c00><EM>2 images sont cachées... une dans les nuages, et une autre sur une colline...<BR><FONT size=2>Passez la souris sur l'image... et cherchez ;-))</FONT></EM></FONT></DIV> Titre ou explication de la recherche <DIV> </DIV> ça c'est juste pour aérer un peu... je saute donc une ligne entre mon titre et mon image ;-)) L'image où on cherchera : <DIV><IMG style="CURSOR: help" <== là c'est pour changer la forme du curseur alt="on cherche ;-))" <== là c'est pour mettre du texte sur l'image quand on passe la souris dessus src="c:/Mes documents/paysages/prairie.gif" changez le chemin de votre image useMap=#Exemple <== là c'est pour définir que c'est sur cette image que les zones réactives vont réagir border=0 et ça c'est pour éviter que l'image est une bordure ></DIV> Les images que l'on doit trouver : ici, il y en a deux... mais on peut en mettre qu'une ou en rajouter d'autres... il suffit de changer le "id" de chaque div pour en rajouter et l'indiquer dans les commandes qui définissent les zones réactives que nous verrons un peu plus bas... - 1ère image : <DIV id=Monnaie <== le fameux "id" qui correspondra à chaque zone réactive style="DISPLAY: none; Z-INDEX: 2; LEFT: 450px; WIDTH: 159px; POSITION: absolute; TOP: 80px"> Positionnez le div où il sera quand on l'aura trouvé et donnez lui des dimensions, vous pouvez la placer n'importe où sur la fenêtre et même sur l'image... Dans l'exemple j'ai mis le soleil à 450 pixels à partir de la gauche de la fenêtre et à 80 pixels à partir du haut de la fenêtre... j'ai aussi paramétré le div afin qu'il fasse 159 pixels de largeur pour que le texte qui se trouve en bas de l'image ne prenne pas toute la largeur suivante de la fenêtre <DIV align=center><IMG class=img1 src="c:/Mes documents/ciel/soleilnuage.gif"> changer le chemin de votre image <BR><FONT face="Comic Sans MS" color=#00bfff size=2>Cette image apparaît et disparaît avec la souris</FONT> comme dans cet exemple, vous pouvez mettre du texte sous votre image sinon vous retirez de <br> à </font> </DIV> </DIV> - 2ème image : faire la même chose que pour la première image... <DIV id=Monnaie1 <== le "id" a changé... style="DISPLAY: none; Z-INDEX: 2; LEFT: 450px; WIDTH: 159px; POSITION: absolute; TOP: 260px"> <DIV align=center><IMG class=img1 src="c:/Mes documents/animaux/ferret.gif"><BR><FONT face="Comic Sans MS" color=#32cd32 size=2>Quand à celle-ci, elle reste quand on l'a trouvée</FONT></DIV></DIV> Définir les zones réactives : <MAP name=Exemple> - de la 1ère image : <AREA onmouseover="Monnaie <== le nom de l'"id" était Monnaie pour la première image... on le retrouve donc ici et.... .style.display=' ';" onmouseout="Monnaie ...là aussi .style.display='none' <== ici on met "none" si l'on ne veut pas que l'image reste après le passage de la souris. ;"shape=RECT target=_top coords=190,15,270,50> <==ici c'est l'emplacement de la zone réactive... les chiffres sont positionnés comme ceci : 190 début de la longueur, 15 début de la hauteur, 270 fin de la longueur, 50 fin de la hauteur - de la 2ème image : <AREA onmouseover="Monnaie1 <== le nom de l'"id" était Monnaie1 pour la deuxième image... on le retrouve donc ici et.....style.display='';" onmouseout="Monnaie1 ...là aussi .style.display=' ' <== ici on ne met pas "none" si l'on veut que l'image trouvée reste affichée ;" shape=RECT target=_top coords=10,110,100,155> les fameuses coordonnées de votre deuxième zone réactive </MAP> Encore un peu de texte : <DIV> </DIV> ça c'est juste pour aérer un peu... ;-)) <DIV><FONT face="Comic Sans MS" color=#ff8c00 size=2>@micalement<BR>Patricia</FONT></DIV> et là c'est juste du texte... qui est ma jolie signature... ;-))))))) Fin : </BODY></HTML> Voili voilà :-)) N'hésitez pas à poser des questions... Et c'est parti pour gagner le 3ème CCG !!! ;-))) @micalement Patricia
	Menu

CCG 3 Explications

Menu

CCG 3
Explications