Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Sélection d’éléments
Javascript : manipuler l’arbre DOM

Pour manipuler les éléments de la page il faut au préalable les sélectionner.

Technologies du Web 1
La sélection d’éléments peut se faire
Jean-Christophe Routier
Licence 1 SESI ◮ par son attribut id
Université Lille 1
◮ par son attribut class
◮ par sa balise
◮ par un sélecteur CSS

+ sélection par attribut name sur certains éléments

Université Lille 1 - Licence 1 SESI Technologies du Web 1 1 Université Lille 1 - Licence 1 SESI Technologies du Web 1 2

Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Sélection par l’identité Sélection par la classe ou la balise

getElementsByClassName
la méthode getElementsByClassName sélectionne les éléments dont la
classe est fournie en paramètre
getElementById
la méthode getElementById de l’objet document sélectionne l’unique getElementsByTagName
élément du document dont l’id est fourni en paramètre, ou null si aucun la méthode getElementsByTagName sélectionne les éléments dont la balise
est fournie en paramètre
◮ le résultat est un objet élément (de type HTMLElement)
Ces 2 méthodes :
1 var element = document . getElem entById ( " joconde " ) ;
◮ peuvent s’appliquer au document ou à un élément du document, dans
le second cas seuls les éléments descendants sont sélectionnés
◮ ont pour résultat la liste des éléments sélectionnés
−→ se manipule comme un tableau non mutable
cette liste est dynamique
Université Lille 1 - Licence 1 SESI Technologies du Web 1 3 Université Lille 1 - Licence 1 SESI Technologies du Web 1 4
 Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Sélection par sélecteurs CSS

1 // tous les <div > du document
2 var divList = document . g e t E l e m e n t s B y T a g N a m e ( " div " ) ;
3 divList . length ; / / −> l e n o m b r e d ’ é l é m e n t s s é l e c t i o n n é s
4 // toutes les <img > descendants de ’ sec1 ’ querySelectorAll
5 var sec1 = document . get ElementBy Id ( " section1 " ) ;
6 var sec1DivList = sec1 . g e t E l e m e n t s B y T a g N a m e ( " img " ) ; la méthode querySelectorAll sélectionne les éléments retenus par le
7 sec1DivList [0]; / / −> l e p r e m i e r é l é m e n t s é l e c t i o n n é sélecteur CSS fourni en paramètre
querySelector est similaire mais ne fournit que le premier élément

1 // tous les é l é m e n t s de classe ’ remarque ’ ◮ peut s’appliquer à document ou à un élément

2 var classList = document . g e t E l e m e n t B y C l a s s N a m e ( " remarque " ) ; dans le cas d’une invocation sur un élément e, le sélecteur est appliqué
3 // é l é m e n t s descendant de ’ unique ’ de classe
’ gauche ’ et ’ encadre ’ à tout le document et seuls les éléments descendants de e sont retenus
4 var elt = document . get ElementB yId ( " unique " ) ;
5 var eltList = elt . g e t E l e m e n t s B y C l a s s N a m e ( " gauche encadre " ) ;
◮ la liste résultat n’est pas dynamique
6 // les m ê m e s é l é m e n t s ◮ certaines pseudo-classes (:link, :visited) et pseudo-éléments
7 var eltList2 = elt . g e t E l e m e n t s B y C l a s s N a m e ( " encadre gauche " ) ;
(::first-letter, ::first-line) ne sont pas acceptés

Université Lille 1 - Licence 1 SESI Technologies du Web 1 5 Université Lille 1 - Licence 1 SESI Technologies du Web 1 6

Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Propriétés des éléments

1 // tous les é l é m e n t s <img > d u document e m b o i t é s dan un

2 // é l é m e n t <div > de classe ’ exercice ’
3 var listElement = document . q u e r y S e l e c t or A l l ( " div . exercice img " ) ;
4 les objets éléments possèdent des propriétés manipulables :
5 // le premier de ces é l é m e n t s
6 var premier = document . querySelector ( " div . exercice img " ) ; ◮ attributs
7
8 // tous les liens ciblant un ”. pdf ” descendants
◮ contenu
9 // de l ’ é l é m e n t d ’ id ’ exo1 ’
10 var elmt = document . get ElementBy Id ( " exo1 " ) ;
◮ style css
11 var listElem = elemt . q u e ry S e l e c t o r A l l ( ’a [ href$ =". pdf "] ’) ; une fois un élément sélectionné, on peut agir sur ces propriétés

Université Lille 1 - Licence 1 SESI Technologies du Web 1 7 Université Lille 1 - Licence 1 SESI Technologies du Web 1 8
 Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Manipuler les attributs

1 // r é c u p é r a t i o n de l ’ é l é m e n t d ’ id ’ celebre ’
2 var monImage = document . g etElemen tById ( " celebre " ) ;
3 // a c c è s à son attribut ’ width ’ : un number
4 var taille = monImage . width ;
5 // modification de son attribut ’ width ’
◮ les atttributs html sont des propriétés 6 monImage . width = taille + 100;
◮ même nom, en minuscules, avec « conversion camelback » 7 // modification d ’ autres attributs
8 monImage . src = " images / joconde . jpg " ;
◮ l’attribut class devient className 9 monImage . alt = " le tableau de la Joconde " ;
◮ la valeur peut être string, number ou boolean selon attribut 10 monImage . className = " gauche " ;
◮ on peut également utiliser getAttribute et setAttribute
◮ dans ce cas la valeur est toujours une chaı̂ne de caractères

cf. exemple [Link]⊙

Université Lille 1 - Licence 1 SESI Technologies du Web 1 9 Université Lille 1 - Licence 1 SESI Technologies du Web 1 10

Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Manipuler le contenu
1 var elemt = document . getElem entById ( " exemple " ) ; ...
2 var htmlText = element . innerHTML ; < div id = " exemple " >
3 alert ( htmlText ) ; / / −> ” < p > C e c i e s t < s t r o n g > <p > Ceci est
< strong > mon </ strong >
4 // m o n </ s t r o n g > c o n t e n u . < / p >”
contenu .
5
innerHTML </ p >
</ div >
6 var txt = element . textContent ;
...
la propriété innerHTML représente le contenu HTML d’un élément 7 alert ( txt ) ; / / −> ” C e c i e s t mon contenu ”

◮ lorsque la valeur de cette propriété est modifiée, son contenu est

interprété par le navigateur 1 // modifie le contenu HTML de l ’ é l é m e n t et donc son ’ a f f i c h a g e ’.
2 // La balise <em > est i n t e r p r é t é e .
3 elemt . innerHTML = " un <em > autre </ em > contenu " ;
textContent 4
5 // modifie le contenu texte de l ’ é l é m e n t et donc son ’ affichage . ’
la propriété textContent représente le contenu textuel d’un élément 6 // Le texte <strong > N ’ est PAS i n t e r p r é t é .
7 elemt . textContent = " un contenu < strong > texte </ strong > " ;
◮ lorsque cette propriété est lue, elle ne contient pas les balises HTML
cf. exemple [Link]⊙

Université Lille 1 - Licence 1 SESI Technologies du Web 1 11 Université Lille 1 - Licence 1 SESI Technologies du Web 1 12
 Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Agir sur les propriétés CSS

1 // s é l e c t i o n de l ’ é l é m e n t voulu
2 var elemt = document . getElem entById ( " exemple " ) ;
3
◮ la propriété style d’un élément permet d’agir sur les propriétés CSS 4 // modification de certaine p r o p r i é t é s CSS
5 // ’ l ’ affichage ’ est i m m é d i a t e m e n t i m p a c t é
de cet élément 6 elemt . style . fontWeight = " bold " ;
mais elle ne permet pas d’accéder aux valeurs des propriétés définies 7 elemt . style . fontSize = " 12 px " ; // ne pas o u b l i e r l ’ u n i t é

dans une feuille de style, seulement aux propriétés définies dans le 8 elemt . style . marginRight = " 10 px " ;
9 elemt . style . marginTop = " 2% " ;
document HTML ou via style 10 elemt . style . ba ck gr ou n dC ol or = " rgba (128 ,0 ,0 ,0.5) " ;
11
◮ on utilise directement le nom de la propriété CSS après « conversion 12 var r = element . style . marginRight ; / / / ! \ ’ s t r i n g ’ avec les u n i t é s
camelback » si nécessaire 13 var nouveauR = r + 100; / / −> ” 1 0 p x 1 0 0 ” !!!

−→ font-size fontSize, border-right-style 14 var valNouvR = parseInt ( r ) +100; / / −> 1 1 0

15 element . style . marginRight = valNouvR + " px " ; / / n e p a s oublier l ’ u n i t é !
borderRightStyle, etc.
◮ les valeurs sont toujours des chaı̂nes de caractères
◮ les unités doivent être précisées cf. exemple [Link]⊙

Université Lille 1 - Licence 1 SESI Technologies du Web 1 13 Université Lille 1 - Licence 1 SESI Technologies du Web 1 14

Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Style « calculé »

1 // s é l e c t i o n de l ’ é l é m e n t voulu
2 var elemt = document . getElem entById ( " exemple " ) ;
getComputedStyle 3
4 // r é c u p é r a t i o n du style c a l c u l é
la méthode getComputedStyle de l’objet window permet d’obtenir le 5 var computed = window . g e t C o m p u te d S t y l e ( elemt ) ;
valeurs des propriétés CSS appliquées par le navigateur 6 var marge = computed . marginLeft ; // a v e c les u n i t é s , en px
7 var couleur = computed . b ac kg r ou nd Co l or ; // r g b ( . . . , . . . , . . . )
8
◮ les propriétés CSS ont le même nom que précédemment 9 // appliquer un facteur d ’ é c h e l l e de 10% à la largeur :
10 var largeur = parseInt ( computed . width ) ; / / r é c u p è r e valeur c a l c u l é e
pas de « raccourci » autorisé : margin interdit, utiliser marginLeft, ... 11 var nvLargeur = Math . floor ( largeur *1.10) ; / / ajoute 10%

◮ elles sont en lecture seule 12 elemt . style . width = nvLargeur + " px " ; // modifie style a p p l i q u é

◮ elles s’expriment en unité absolue (px)

Université Lille 1 - Licence 1 SESI Technologies du Web 1 15 Université Lille 1 - Licence 1 SESI Technologies du Web 1 16
 Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Evénements Programmation événementielle

Certaines actions sur des éléments produisent un événement.

programmation événementielle
Il existe différents types d’événements, ils caractérisent l’action réalisée et
dépendent de l’élément cible (sur lequel porte l’action). La programmation événementielle consiste à lier une fonction à
l’occurrence d’un événement sur un élément.
◮ actions de l’utilisateur via le clavier ou la souris On parle d’abonnement de la fonction à l’élément pour l’événement.
−→ click, keypress, keyup, mouseover, etc. La fonction est déclenchée lorsque l’événement se produit sur cet élément
◮ changement d’état cible – target.
−→ change, focus
◮ chargement d’un élément fonction listener
−→ load La fonction attachée à un événement est appelée fonction « gestionnaire
◮ etc. d’événement » – event handler – ou « d’écoute » – event listener .

Université Lille 1 - Licence 1 SESI Technologies du Web 1 17 Université Lille 1 - Licence 1 SESI Technologies du Web 1 18

Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Méthode d’abonnement

1 var action1 = function () {

addEventListener 2 window . alert ( " on a cliqué sur le pied de page " ) ;
3 }
La méthode addEventListener permet d’abonner à l’objet sur lequel elle 4

est invoquée une fonction pour l’événement précisé. 5 // s é l e c t i o n d ’ un é l é m e n t

6 var pied = document . getEleme ntById ( " piedDePage " ) ;
7 // abonnement sur cet é l é m e n t de la fonction ’ action1 ’
[Link](eventType, listenerFunction) 8 // pour un é v é n e m e n t ” click ” => ’ action () ’ d é c l e n c h é e si clic
9 pied . a d d E v e n t L i s t e n e r ( " click " , action1 ) ;

◮ objet : l’objet ciblé : window, ou un élément de la page

◮ eventType : une chaı̂ne de caractères désignant le type d’événement
"click", "load", "change", "mouseover", "keypress" etc.
cf. exemple [Link]⊙
◮ listenerFunction : la fonction listener qui sera appelée lorsque
l’événement se produit

Université Lille 1 - Licence 1 SESI Technologies du Web 1 19 Université Lille 1 - Licence 1 SESI Technologies du Web 1 20
 Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

< html >

Un peu de méthodologie < head > ...
< script src = " monScript . js " > </ script >
</ head > cf. exemple [Link]⊙
< body > ... cf. [Link]⊙
< img id = " laJoconde " ... / > ...
< div id = " piedDePage " > ... </ div >
...

avec [Link] :
1 placer les fonctions javascript dans un fichier à part de l’html 1 // fonction de mise en place des abonnements
2 var setupEvents = function () {
2 définir une fonction chargée de mettre en place les abonnements : 3 // abonnement pour é l é m e n t d ’ id ’ piedDePage ’
1 récupérer l’élément ciblé 4 var pied = document . get ElementBy Id ( " piedDePage " ) ;
2 abonner la fonction listener pour l’événement voulu 5 pied . a d d E v e n t L i s t e n e r ( " click " , action1 ) ;
6 // abonnement pour é l é m e n t d ’ id ’ laJoconde ’
3 déclencher cette fonction 7 var joconde = document . getElem entById ( " laJoconde " ) ;
◮ doit être fait lorsque la page est complètement chargée pour être sûr 8 joconde . a d d E v e n t L i s t e n e r ( " mouseover " , action2 ) ;
9 }
que tous les éléments existent 10
֒→ utiliser l’événement load sur window 11 // on provoque l ’ e x é c u t i o n de ” setupEvents ” à la fin du
12 // chargement du document
13 window . a d d E v e n t L i s t e n e r ( " load " , setupEvents ) ;
14
15 // d é f i n i t i o n des fonctions l i s t e n e r
16 var action1 = function () { ... }
17 var action2 = function () { ... }
Université Lille 1 - Licence 1 SESI Technologies du Web 1 21 Université Lille 1 - Licence 1 SESI Technologies du Web 1 22

Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Complément sur fonctions d’écoute

Sur un élément donné on peut avoir
◮ plusieurs abonnements pour différents événements
◮ plusieurs abonnements pour le même événement
◮ dans une fonction listener, la variable this est définie et désigne
l’objet qui a déclenché l’événement
removeEventListener typiquement l’élément du document
la méthode removeEventListener permet de désabonner de l’objet sur ◮ un objet event est créé pour chaque événement. Cet objet est passé
lequel elle est invoquée une fonction pour un événement en paramètre lors du déclenchement de la fonction listener associée.
[Link](eventType, listenerFunction) Le type d’objet event varie selon l’événement.
Un objet event possède des propriétés qui informent sur l’événement.

cf. exemple [Link]⊙

Université Lille 1 - Licence 1 SESI Technologies du Web 1 23 Université Lille 1 - Licence 1 SESI Technologies du Web 1 24
 Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

L’objet event Versions précédentes

◮ DOM niveau 0 :
◮ les gestionnaires d’événements s’appellent onevent :
Quelques propriétés (selon les types d’événements) : onclick, onload, onmmouseover, etc.
◮ clientX, clientY/ screenX, screenY/ pageX, pageY coordonnées ◮ un gestionnaire d’événement peut être placé en ligne en tant qu’attribut
de l’événement par rapport au “navigateur”/l’écran/la page d’un élément, la valeur associée est le code exécuté
<img src="..." onclick="var i = 2; action();"/>
◮ altKey, ctrKey, shiftKey l’une des touches Alt, Ctrl ou Shift était ◮ on peut aussi créer l’abonnement dans le code javascript :
pressée lors de l’événement ?
[Link] = maFonction;
◮ keyCode information sur la touche appuyée ◮ défauts :
à combiner avec [Link]() ◮ code javascript dans le code HTML
◮ target la cible de l’événement (== this) ◮ un seul abonnement possible par type d’événement
◮ etc.
Conclusion
cf. exemple [Link]⊙ – exemple [Link]⊙
utiliser le modèle addEventListener

◮ attachEvent(...) dans IE < 8 (+ autres différences)

Université Lille 1 - Licence 1 SESI Technologies du Web 1 25 Université Lille 1 - Licence 1 SESI Technologies du Web 1 26

Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Le type Node Création

type Node
Les nœuds de l’arbre DOM sélectionnés par getElementById,
getElementsByClassName, ..., sont de type Node. ◮ [Link](balise) : crée un nouveau nœud avec la
Un objet Node propose les propriétés : balise donnée
◮ nodeName : le nom du nœud (balise en majuscules) ◮ [Link](texte) : crée un nouveau nœud texte
◮ nodeType : type du nœud défini par des constantes nommées avec le contenu texte fourni (non interprété)
prédéfinies, [Link] NODE (= 1), [Link] NODE (= 3)
◮ nodeValue : null si le nœud est un élément, le contenu pour une
nœud texte
NB : existe aussi
◮ parentNode le nœud parent du nœud courant
◮ childNodes la liste (NodeList) des fils du nœud courant
◮ [Link] qui a pour résultat un nouveau nœud copie de node
◮ fitstChild, lastChild : le premier et dernier des nœuds fils
◮ previouSibling, nextSibling : le nœud frère précédent/suivant
◮ etc. cf. exemple [Link]⊙
Université Lille 1 - Licence 1 SESI Technologies du Web 1 27 Université Lille 1 - Licence 1 SESI Technologies du Web 1 28
 Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Insertion Suppression et remplacement

◮ [Link](noeudInséré,noeudRéférence) :
insère noeudInséré avant noeudRéférence comme fils de
◮ [Link](noeud) : noeud est supprimé des fils de
noeudParent
parent
◮ [Link](noeudAjouté) : le nœud noeudAjouté est
◮ [Link](remplaçant,remplacé) : remplaçant
ajouté à la fin des fils de parent
prend la place de remplacé comme fils de parent

NB : si le nœud inséré ou ajouté existe dans le document, il est alors

déplacé (donc supprimé de la position existante et inséré/ajouté à la
cf. exemple [Link]⊙
position demandée).

cf. exemple [Link]⊙

Université Lille 1 - Licence 1 SESI Technologies du Web 1 29 Université Lille 1 - Licence 1 SESI Technologies du Web 1 30

Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Fonction listener et paramètres Une solution ?

1 var setu pListene rs = func tion () {
◮ le second paramètre de addEventListener est la fonction d’écoute, 2 var elements = document . g e t E l e m e n t s B y T a g N a m e ( " img " ) ;
il s’agit d’une valeur de type fonction et pas d’un appel de 3
4 elements [0]. a d d E v e n t L i s t e n e r ( " click " , listener1 ) ;
fonction ! 5 elements [1]. a d d E v e n t L i s t e n e r ( " click " , listener2 ) ;
6 elements [2]. a d d E v e n t L i s t e n e r ( " click " , listener3 ) ;
Problème 7 elements [3]. a d d E v e n t L i s t e n e r ( " click " , listener4 ) ;
8 }
Comment faire pour que la listener function soit paramétrée ? 9 window . a d d E v e n t L i s t e n e r ( " load " , set upListen ers ) ;
10 // les fonctions ” event l i s t e n e r ” : ICI une par image . . .
11 var listener1 = function () {
Par exemple : 12 var sourceDisplay = document . ge tElement ById ( " source " ) ;
13 sourceDisplay . innerHTML = " image 1 " ;
◮ on dispose d’un document avec des images 14 };
15 var listener2 = function () {
◮ lors du clic sur une image on veut déclencher une action 16 var sourceDisplay = document . ge tElement ById ( " source " ) ;
17 sourceDisplay . innerHTML = " image 2 " ;
◮ les actions sont similaires pour toutes les images mais dépendent du 18 };
« numéro » de l’image 19 var listener3 = function () { ... " image 3 "
20 var listener4 = function () { ... " image 4 "
cf. exemple fonction [Link]⊙
cf. exemple fonction param [Link]⊙
Université Lille 1 - Licence 1 SESI Technologies du Web 1 31 Université Lille 1 - Licence 1 SESI Technologies du Web 1 32
 Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Problème
Fonction qui calcule une fonction
et si on a plus de 4 images ?
◮ une fonction peut calculer une variable et la fournir en résultat
◮ les listener diffèrent peu... 1 var exemple = function () {
2 var result = 10;
◮ on aurait pu résoudre le problème avec cette fonction 3 return result *10+ 5;
1 var listener = function ( numero ) { 4 };
2 var sourceDisplay = document . get ElementB yId ( " source " ) ;
3 sourceDisplay . innerHTML = " image " + numero ; ◮ c’est aussi possible avec les variables dont le résultat est une fonction
4 };
1 var creeFonction = func tion () {
2 var func = function ( i ) {
◮ mais il y a un paramètre... on peut alors écrire cela 3 return 2* i ;
1 var numero = NNN ; / / NNN = v a l e u r à c h a n g e r à c h a q u e fois
4 } ;
2 var listener = function () { 5 return func ;
3 var sourceDisplay = document . get ElementB yId ( " source " ) ; 6 }
7
4 sourceDisplay . innerHTML = " image " + numero ;
5 }; 8 var f = creeFonction (2) ; // le r é s u l t a t est une fonction
9 f; // f u n c t i o n ( ) { return 2∗ i ; }
10 f (12) ; / / −> 2 4
mais il faut changer NNN à chaque fois...

Université Lille 1 - Licence 1 SESI Technologies du Web 1 33 Université Lille 1 - Licence 1 SESI Technologies du Web 1 34

Sélections Manipulations Evénements Manipuler DOM Sélections Manipulations Evénements Manipuler DOM

Fonction qui calcule une fonction (2) Une fonction qui calcule les listeners

◮ la fonction « créatrice » peut être paramétrée

1 var c r e e F o n c t i o n M u t i p l e = function ( facteur ) {
2 var func = function ( i ) { 1 var crea teListen er = func tion ( numero ) {
3 return facteur * i ; 2 var listener = function () {
4 } ; 3 var sourceDisplay = document . ge tElement ById ( " source " ) ;
5 return func ; 4 sourceDisplay . innerHTML = " image " + numero ;
6 } 5 };
7 6 return listener ;
8 fois2 = c r e e F o n c t i o n M u l t i p l e (2) ; 7 }
9 fois2 (7) ; / / −> 14
10
11 fois5 = c r e e F o n c t i o n M u l t i p l e (5) ;
12 fois5 (7) ; / / −> 35

Université Lille 1 - Licence 1 SESI Technologies du Web 1 35 Université Lille 1 - Licence 1 SESI Technologies du Web 1 36
 Sélections Manipulations Evénements Manipuler DOM

La solution
1 var setu pListene rs = function () {
2 var elements = document . g e t E l e m e n t s B y T a g N a m e ( " img " ) ;
3 for ( var i =0; i < elements . length ; i ++) {
4 elements [ i ]. a d d E v e n t L i s t e n e r ( " click " , creat eListene r ( i +1) ) ;
5 }
6 }
7
8 window . a d d E v e n t L i s t e n e r ( " load " , set upListen ers ) ;
9
10 var crea teListen er = function ( numero ) {
11 var listener = function () {
12 var sourceDisplay = document . ge tElement ById ( " source " ) ;
13 sourceDisplay . innerHTML = " image " + numero ;
14 };
15 return listener ;
16 }

Si plus de 4 images ? Pas de problème !

cf. exemple fonction [Link]⊙

Université Lille 1 - Licence 1 SESI Technologies du Web 1 37