WEBVTT

00:00:01.500 --> 00:00:04.400
J’espère que tu as réussi à ajouter le code qui affiche une rétroaction

00:00:04.599 --> 00:00:07.500
pour l’image de la tour de la Paix et de la tour de surveillance.

00:00:08.400 --> 00:00:10.599
Dans le cas contraire, voici le corrigé.

00:00:11.800 --> 00:00:15.199
J’ai ajouté un événement onclick pour les 2 autres images

00:00:16.800 --> 00:00:19.100
et également, dans la section script,

00:00:19.300 --> 00:00:21.399
j’ai ajouté les fonctions correspondantes.

00:00:25.500 --> 00:00:28.100
Maintenant je veux modifier l’opacité des images

00:00:28.300 --> 00:00:29.899
lorsque je me déplace sur celles-ci.

00:00:31.199 --> 00:00:33.200
Cette fois-ci je veux que mon programme réagisse

00:00:33.200 --> 00:00:35.899
lorsque la souris se déplace sur les images.

00:00:38.399 --> 00:00:41.000
J’utilise l’événement onmouseover.

00:00:42.000 --> 00:00:44.200
Je l’ajoute à l’intérieur de la balise de mon image

00:00:45.000 --> 00:00:52.200
onmouseover= suivi d’une fonction que j’appelle surbrillance.

00:00:52.700 --> 00:00:55.000
onmouseover="surbrillance()"

00:00:57.000 --> 00:00:59.000
Plus bas dans ma page, dans la section script,

00:00:59.700 --> 00:01:03.600
j’ajoute la fonction surbrillance

00:01:07.700 --> 00:01:10.700
sans oublier les accolades d’ouverture et de fermeture

00:01:11.299 --> 00:01:12.299
function surbrillance(image) {

00:01:12.500 --> 00:01:19.799
en ajoutant le commentaire je me déplace sur l’image

00:01:20.200 --> 00:01:22.200
//Déplace sur l’image

00:01:22.900 --> 00:01:25.900
J’ajoute des variables pour contenir chacune de mes images.

00:01:26.700 --> 00:01:36.900
Donc je commence par var idCN est égal document.getElementById()

00:01:37.299 --> 00:01:39.700
La première se nomme cn.

00:01:43.000 --> 00:01:46.799
Et je remarque que je pourrais simplement copier-coller les deux autres variables,

00:01:48.000 --> 00:01:50.500
car je les ai déjà écrites dans les autres fonctions.

00:01:51.000 --> 00:01:53.000
var idParlement= document.getElementById("parlement");

00:01:53.599 --> 00:01:55.599
var idTourFeux= document.getElementById("tourFeux");

00:01:57.500 --> 00:02:00.500
L’opacité est définie par un style CSS.

00:02:01.500 --> 00:02:09.199
J’écris sur les lignes suivantes le nom de l’objet idCN.style

00:02:10.800 --> 00:02:15.800
puis le style qui correspond à l’opacité de mon objet est opacity=

00:02:21.199 --> 00:02:24.599
et la valeur qui correspond a un objet complètement compact est 1

00:02:24.900 --> 00:02:26.599
qui correspond à 100%

00:02:27.199 --> 00:02:28.599
idCN.style.opacity= "1";

00:02:29.500 --> 00:02:33.199
Je définis ensuite le style de l’opacité

00:02:33.500 --> 00:02:35.099
pour le parlement et la tour de feu.

00:02:35.500 --> 00:02:42.400
Donc je commence par idParlement.style.opacity=

00:02:46.800 --> 00:02:51.400
et pour attribuer une opacité de 50%, j’écris 0,5

00:02:51.800 --> 00:02:53.699
idParlement.style.opacity= "0,5";

00:02:57.500 --> 00:03:00.500
Et encore la même chose pour la dernière image.

00:03:01.000 --> 00:03:03.000
idTourFeux.style.opacity= "0.5";

00:03:06.300 --> 00:03:10.599
J’enregistre et lorsque je regarde le résultat dans un navigateur Internet

00:03:11.199 --> 00:03:14.500
je remarque que lorsque je me déplace sur l’image de la Tour CN

00:03:15.199 --> 00:03:18.199
les 2 autres images ont une opacité de 50%.

00:03:20.400 --> 00:03:23.800
Tu peux créer une fonction pour gérer l’opacité des 2 autres images,

00:03:24.400 --> 00:03:26.099
mais je te propose une meilleure solution.

00:03:27.000 --> 00:03:30.199
Au lieu de créer 3 fonctions, une pour chaque image,

00:03:30.699 --> 00:03:34.300
je vais en créer une seule qui va fonctionner pour chacune d’entre elles.

00:03:35.400 --> 00:03:37.199
Je dois ajouter un paramètre à ma fonction

00:03:37.599 --> 00:03:40.599
qui va contenir l’élément sur lequel la personne clique.

00:03:42.099 --> 00:03:44.300
Je le nomme ce paramètre image.

00:03:48.300 --> 00:03:52.199
Plus haut, à l’intérieur de l’événement onmouseover,

00:03:52.599 --> 00:03:57.199
lorsque j’appelle la fonction, j’ajoute à l’intérieur des parenthèses this.

00:03:58.400 --> 00:04:01.400
Le mot clé this fait référence à l’élément courant.

00:04:02.099 --> 00:04:05.800
Dans ce cas-ci, il s’agit de l’image sur laquelle la souris se trouve.

00:04:09.000 --> 00:04:13.000
J’ajoute l’événement onmouseover aux 2 autres images.

00:04:13.699 --> 00:04:14.800
Donc je fais copier,

00:04:15.199 --> 00:04:17.199
dans la seconde seconde image je fais coller

00:04:17.699 --> 00:04:19.500
et la même chose pour la dernière.

00:04:22.300 --> 00:04:24.100
Je retourne à ma fonction

00:04:25.100 --> 00:04:29.500
et j’ajuste l’opacité pour  la tour CN à 0,5.

00:04:32.000 --> 00:04:37.000
À la fin, j’ajoute image qui correspond aux paramètres de ma fonction

00:04:38.000 --> 00:04:41.000
.style.opacity=

00:04:46.300 --> 00:04:50.000
100%, donc 1

00:04:50.300 --> 00:04:51.899
image.style.opacity= "1.0";

00:04:52.500 --> 00:04:55.500
J’enregistre et je vérifie le fonctionnement de mon programme.

00:04:59.800 --> 00:05:02.399
Je remarque que lorsque la souris sort de l’image,

00:05:03.399 --> 00:05:06.399
il y a toujours 2 images qui conservent la transparence.

00:05:07.399 --> 00:05:10.399
Je veux que les images reviennent à leur apparence initiale.

00:05:12.500 --> 00:05:15.500
Je vais pour cela utiliser l’événement onmouseout.

00:05:16.000 --> 00:05:17.500
Je retourne à mon image

00:05:18.199 --> 00:05:22.399
et j’ajoute à l’intérieur de la balise onmouseout=

00:05:23.300 --> 00:05:26.899
et une fonction que je vais appeler retour

00:05:27.300 --> 00:05:28.399
onmouseout="retour()"

00:05:28.600 --> 00:05:31.600
J’ajoute onmouseout également pour les autres images.

00:05:39.600 --> 00:05:43.500
Dans le script plus bas, j’ajoute une fonction qui s’appelle retour

00:05:44.199 --> 00:05:46.800
function retour() {

00:05:48.899 --> 00:05:51.699
et à l’intérieur je vais déclarer trois variables

00:05:52.100 --> 00:05:54.199
pour faire référence à mes trois images.

00:05:54.500 --> 00:05:55.399
var idCN= document.getElementById("cn");

00:05:55.500 --> 00:05:56.500
var idParlement= document.getElementById("parlement");

00:05:56.600 --> 00:05:57.600
var idTourFeux= document.getElementById("tourFeux");

00:05:58.699 --> 00:06:02.199
Et pour chacune des images, je réajuste l’opacité à 1.

00:06:02.600 --> 00:06:11.699
Donc, idCn.style.opacity= "1";

00:06:13.600 --> 00:06:15.699
Et je fais la même chose pour les deux autres images.

00:06:22.399 --> 00:06:24.399
idParlement.style.opacity= "1";

00:06:27.100 --> 00:06:29.100
idTourFeux.style.opacity= "1";

00:06:36.800 --> 00:06:38.300
J’enregistre.

00:06:40.800 --> 00:06:43.800
Et maintenant les images reprennent leur apparence initiale

00:06:44.100 --> 00:06:46.000
lorsque la souris quitte l’image.

00:06:48.100 --> 00:06:51.100
Je vais terminer en modifiant également la taille de l’image

00:06:51.399 --> 00:06:53.199
lorsque la souris la survole.

00:06:56.800 --> 00:07:00.699
La taille initiale de l’image est 150 par 235.

00:07:02.000 --> 00:07:05.000
Pour agrandir l’image, je vais dans la fonction surbrillance.

00:07:06.300 --> 00:07:09.300
J’ajoute surbrillance

00:07:12.300 --> 00:07:18.600
image.width="175";

00:07:20.600 --> 00:07:27.600
image.height="275";

00:07:36.000 --> 00:07:38.000
Évidement, dans la fonction retour,

00:07:38.300 --> 00:07:41.300
je dois réajuster la taille de l’image à sa valeur initiale.

00:07:42.699 --> 00:07:43.800
Donc, j’ajoute

00:07:44.699 --> 00:07:48.699
idCN.width="150";

00:07:53.699 --> 00:07:57.699
idCN.height="235";

00:08:01.500 --> 00:08:04.500
Et je vais faire la même chose pour les deux autres images.

00:08:09.500 --> 00:08:12.500
idParlement.width="150"; idParlement.height="235";

00:08:19.699 --> 00:08:22.699
et finalement idTourFeux.width="150"; idTourFeux.height="235";

00:08:34.899 --> 00:08:37.899
J’enregistre et je vérifie le résultat.

00:08:41.200 --> 00:08:42.700
Note que tu peux de cette façon

00:08:43.100 --> 00:08:45.500
modifier n’importe quel style CSS d’un élément.

00:08:46.000 --> 00:08:49.000
Par exemple, si tu veux pousser un peu plus loin cet exercice,

00:08:49.399 --> 00:08:52.399
tu peux ajouter une bordure rouge à l’image sur laquelle la souris se déplace.

NOTE end of file