jQuery : introduction au framework JavaScript

Présentation de jQuery

Pourquoi jQuery

La librairie (ou bibliothèque) jQuery a été inventée par John Resig en 2006.
Constatant que le code Javascript pouvait devenir très complexe pour fonctionner avec les différents navigateurs il imagine de créer une bibliothèque de fonctions prêtes à l'emploi et compatibles avec tous les navigateurs.
En effet si désormais le JavaScript est standardisé ce n'était guère le cas en 2006 ; en particulier Internet Explorer avait ses propres méthodes.
A ce jour jQuery reste à ce jour toujours très utile malgré la standardisation du JS et la montée en puissance du CSS avec sa version 3.

Récupération de la bibliothèque

La fameuse bibliothèque jQuery c'est un fait un simple fichier Javascript (extension .js) de 100 ou 300 KO.

Comment récupérer ce fichier ?
Il suffit d'aller sur le site officiel (jquery.com) et de cliquer sur le gros bouton légendé "Download jQuery".
Vous pouvez télécharger soit la version compressée (moins de 100 KO) soit la version décompressée (avec des commentaires et des sauts de ligne) qui est trois fois plus lourde.
Si, par exemple, vous téléchargez la version compressée vous récupérez, en ce début d'année 2017, un fichier nommé jquery-3.2.1.min.js (version qui date de mars 2017).
Tranférez ce fichier dans le dossier contenant vos scripts Javascript et vous pouvez lui donner un nom plus simple; par exemple : jquery.js.

Extrait du fichier jQuery compressé :

C'est illisible pour un humain.

Extrait du fichier jQuery avec commentaires et sauts de ligne :

C'est compréhensible pour un surdoué en JavaScript (lol).

Programmation en JS-jQuery

Si dans une page vous voulez programmer en JS-jQuery plutôt qu'en JS traditionnel vous devez charger la fameuse bibliothèque dans la page web c'est à dire la version compréssée ou décompressée.
Il suffit d'insérer dans la partie HEAD un script qui se présente comme suit :

<script src ="chemin relatif vers la bibliothèque">charger jquery</script>

Le texte entre les balises ouvrante et fermante est facultatif et fait fonction de commentaire ; n'est pas affiché par le navigateur.

Exemple

Imaginons que dans une page on veuille changer le contenu de trois noeuds (texte de ces noeuds doit être tantôt en Français et tantôt en Anglais).

Le code HTML (extraits)

... <script src ="jquery.js"></script> <style> img {width : 10%; display : inline-block;} </style> ... </head> <body onload ="ffrancais()"> <h2></h2> <p></p> <p></p> <img src ="../images/anglais.jpg" onclick ="fanglais()" /> <img src ="../images/francais.jpg" onclick ="ffrancais()" />

Dans la partie HEAD chargement de la librairie jQuery via la balise SCRIPT. Ici on suppose que la bibliothèque jQuery a été renommée "jquery.js" et se trouve dans le même dossier que la page web.

Appel d'une fonction sur chargement de la page : body onload ="ffrancais()"

La page contient trois noeuds vides et deux images miniatures : une appelant la fonction de traduction en anglais et l'autre appelant la fonction de traduction en français.

Le code des deux fonctions

	function ffrancais() 
	{
		var texte_francais = "Mon patron est riche et sa femme est très jolie." ;
		document.querySelector("h2").textContent = "Titre";
		document.querySelector("p").textContent = texte_francais ;
		document.querySelectorAll("p")[1].textContent = "Je suis pauvre et ma femme est moche." ;
	}
	function fanglais() 
	{
		var texte_anglais = "My boss is rich and his wife is very pretty." ;
		jQuery("h2").html("Title") ; 
		$("p:first").html(texte_anglais); 
		$("p:last").html("I am poor and my wife is ugly."); 
	}

La fonction ffrancais est écrite en JavaScript traditionnel.
La fonction fanglais est écrite en Javascript-jQuery !

Vous pouvez constater que le code est plus concis dans la deuxième fonction.

Examinons de plus près les instructions jQuery !
A chaque fois il suffit simplement d'appeler la fonction jQuery (ou son alias : $).
J'utiliserai pas la suite toujours $ plutôt que JQuery !

Attention si vous préférez utiliser jQuery respectez la casse : Q en majuscule !

La syntaxe d'un instruction jQuery est très simple.

Donc la fonction $ est argumentée avec un sélecteur qui référence un noeud (voire plusieurs).
Si vous connaissez les sélecteurs CSS vous n'aurez aucune difficulté à appréhender les sélecteurs jQuery.
Sachez que les sélecteurs jQuery sont encore plus sophistiqués que ceux de CSS.
Donc dans le premier exemple il s'agit d'un sélecteur de balise ; $("h2") sélectionne toutes les balises H2 de la page.
Dans le deuxième exemple $("p:last") sélectionne la derniere balise P de la page.
Donc avec jQuery la sélection des noeuds du DOM est beaucoup plus simple qu'en JS traditionnel.

Ensuite il y a une méthode jQuery (ici c'est la méthode html) qui modifie le contenu du noeud sélectionné.
Le paramètre de cette méthode doit être le nom d'une variable JS ou une chaîne (donc entre quotes).
Testez l'exemple !

Importer jQuery à partir du site google.com

Il y a une autre façon d'intégrer le framework jQuery dans vos pages.
Il suffit de télécharger la librairie à partir du site google.com. Ainsi vous avez toujours accès à la dernière version de jQuery. Reprenons l'exemple précédent. Le code de la page devient :

... <script src ="https://www.google.com/jsapi">Importer jquery à partir de google</script> <script>google.load("jquery","1"); </script> ... </head> ...

Sans le savoir vous exécutez une requête AJAX (load() est une méthode de jQuery pour AJAX).
Il y a un chapitre sur AJAX dans le tuto sur jQuery.

Ici les deux fonctions ont été écrites avec jQuery.
Testez l'exemple avec téléchargement de la bibliothèque à partir de google.com

Evidemment cette solution ne fonctionne que si vous avez une connection internet ou à défaut si vous n'avez pas encore vidé la "mémoire cache. En effet la librairie jQuery est stockée dans la mémoire cache du navigateur.

Exemple 2

Je vais vous montrer dans cet exemple qu'il est très facile de créer une feuille de style en jQuery.

Attention mon but est ici de vous familiariser avec la syntaxe jQuery et non pas de vous dire qu'il faut maintenant écrire la feuille de style en jQuery à la place du CSS ...
Ce qui serait absurde ! N'oubliez jamais que l'exécution d'un script peut être bloquée par le navigateur ...

Le code HTML de la page

Dans la partie HEAD il y a bien sûr chargement de la bibliothèque jQuery !
Par contre il n'y a ni lien vers une fichier CSS ni de feuille de style interne !

Pour parler simple ce sera très moche !

Le code de la partie BODY :

... <button onclick ="fstyle()">Mettre en forme cette page si vous le désirez !</button> <h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <p>Corps de texte associé au titre de niveau 2. <br>Blabla blabla Blabla blabla Blabla ... <h3>Titre de niveau 3</h3> <p>Corps de texte associé au titre de niveau 3. <br>Blabla blabla Blabla blabla Blabla ... <h3>Titre de niveau 3 </h3> <p>Corps de texte associé au titre de niveau 3. <br>Blabla blabla Blabla blabla Blabla ... <h2>Titre de niveau 2</h2> <p>Corps de texte associé au titre de niveau 2. <br>Blabla blabla Blabla blabla Blabla ... <h2>Les listes</h2> <ul>Une liste à puces : <li>item 1 de la liste</li><li>item 2 de la liste</li><li>item 3 de la liste</li> </ul> <ol>Une liste numérotée : <li>item 1 de la liste</li><li>item 2 de la liste </li><li>item 3 de la liste </li> </ol> <hr> <h2>Un tableau</h2> <table> <tr> <th>en-tête colonne 1</th><th>en-tête colonne 2</th><th>en-tête colonne 3</th> </tr> <tr> <td >contenu cellule</td><td>contenu cellule</td><td>contenu cellule</td> </tr> <tr> <td >contenu cellule</td><td >contenu cellule</td><td >contenu cellule</td> </tr> <tr> <td >contenu cellule</td><td >contenu cellule</td><td>contenu cellule</td> </tr> </table> <h2>Les images</h2> <img src ="../images/tortue.jpg" > <img src ="../images/toucan.jpg" > <hr> <h2>Les liens hypertextes </h2> <a href = 'http://darchevillepatrick.info' target ='_blank'>Mon site sur la programmation web </a> <a href = 'http://darchevillepatrick.com' target ='_blank' >Mon blog </a>

Remarquez que la première instruction HTML est un bouton de commande qui appelle une fonction JS (utilisation du gestionnaire d'événements de HTML).
Pour le reste du code : rien de compliqué ; des titres, du corps de texte, des listes, un tableau, des images, des liens.

Le script écrit en jQuery :

	function fstyle()
	{
		$("*").css("fontFamily","arial");
		$("*").css("color","navy");
		$("body").css("width","900px");
		$("body").css("border","2px solid navy");
		$("body").css("margin","20px auto 20px auto");
		$(":header").css("textAlign","center");
		$("p").css("padding", "10px");
		$("ul,ol").css("fontStyle", "italic");
		$("table").css("width","500px").css("margin","20px auto 20px auto");
		$("td").css("border","1px solid black").css("paddingLeft","10px");
		$("tr").css("height","50px").css("verticalAlign","middle");
		$("tr:even").css("background","lime");
		$("tr:odd").css("background","yellow");
		$("a,img").css("width", "300px"); 
		$("a,img").css("display", "block").css("margin","10px auto 10px auto");
		$("button").css("display", "none"); 
	}

Si vous connaissez les sélecteurs CSS vous n'avez aucune difficulté à comprendre ce code.

:header sélecteur qui référence toutes les balises "titre" de la page (h1 à h6); c'est très pratique !

Dans toutes les instructions on applique des mises en forme aux éléments sélectionnés. Donc la méthode est css.
A chaque fois il faut paramétrer cette méthode avec la propriété de mise en forme suivie de la valeur.

Il faut écrire la propriété de mise en forme avec la syntaxe javaScript : pas de tiret ; la lettre qui suit le tiret supprimé est mise en majuscule (exemple : verticalAlign et non pas vertical-align).

Pour limiter les lignes de code on peut chaîner les mises en formes qui s'appliquent au même sélecteur c'est à dire indiquer plusieurs fois la méthode css après le sélecteur.

Dans ce script je vous rappelle que les balises A et IMG sont des balises nativement inline. Donc pour centrer horizontalement des éléments inline il faut les transformer en boîtes (display : block) et leur affecter une largeur.

Notez aussi que dès que vous avez cliqué sur le bouton de commande ce dernier disparaît grâce à la dernière instruction du script: $("button").css("display", "none"). Ainsi la commande ne peut s'appliquer qu'une fois !

Observez très attentivement la mise en forme avant de cliquer sur le bouton de commande.
Testez le code

Variante

Pour une exécution automatique de la fonction de mise en forme il suffit de supprimer dans le code HTML la balise button et d'écrire dans le script à la place de function fstyle() :
$("body").load() ou encore $(window).load() ou encore $(document).load()
Dans ce cas il faut aussi supprimer la dernière instruction : celle relative au masquage du bouton de commande.

this, window, document sont des mots réservés en jQuery
Testez le code avec application automatique de la feuille de style

Exercice : êtes vous en mesure de créer un script jQuery ?

Le code CSS & HTML de la page

... <style> figure img {height : 200px ; } figure figcaption {text-align : center ; } figure {display : none ; } ... <body> <h1>Un bel album photos </h1> <p class ="remarque">Avertissement : page réservée aux hommes !</p> <button onclick ="fafficher()">afficher images</button> <button onclick ="fmasquer()">masquer images</button> <figure><img src = '../images/bikini.jpg'> <figcaption>Jolie fille</figcaption></figure> <figure><img src = '../images/trikini.jpg'> <figcaption>Jolie fille</figcaption></figure> <figure><img src = '../images/burkini.jpg'><figcaption>Déçu ?</figcaption></figure>

Par défaut les images sexy sont masquées puisqu'elle sont contenues dans des balises figure qui sont masquées !

Travail à faire

Vous devez concevoir le script (en jQuery).

Ce thème a déjà été traité dans une autre page en JavaScript traditionnel. Dans chaque fonction il y avait une boucle pour traiter successivement chaque image.
Avec jQuery c'est inutile puisque le sélecteur peut référencer plusieurs éléments (même balisage, même classe). Ainsi $("figure") désigne toutes les balises figure de la page.
Le rendu que vous devez obtenir

Pour ceux qui n'ont pas trouvé

Le script est d'une simplificité déconcertante !
Le script (sans le balisage SCRIPT) :

	function fafficher() {$("figure").css("display", "block");}
	function fmasquer() {$("figure").css("display", "none");}

Reconnaissez que c'est simple. Commencez vous à apprécier la puissance de jQuery ?

jQuery : la puissance de l'outil

Je vais tenter maintenant de vous convaincre d'employer cet outil , vous montrer que dans de nombreux cas il simplifie énormément la programmation JavaScript.

Je vais vous parler du mot magique this comme en JS traditionnel.
Dans les chapitres suivants j'aurai l'occasion de revenir sur les méthodes évoquées.

Exemple 1

Une page comprend N images miniatures et pratiquement transparentes.
Dès qu'une image est survolée sa taille doit être triplée et elle doit devenir parfaitement opaque ; la source de l'élément IMG change ... pour une photo plus décente (lol).

Ci-dessous rappel du code utilisé dans le cadre d'une programmation JS traditionnelle

... <style> img {display : block ; width : 100px; margin :10px auto 10px auto ; opacity : 0.2; width : 10%;} ... <body> <img src = '../images/bikini.jpg' onmouseover="fgrand(this)" onmouseout ="fpetit(this)"/> <img src = '../images/bikini2.jpg' onmouseover="fgrand(this)" onmouseout ="fpetit(this)" /> <img src = '../images/bikini3.jpg' ... /> <img src = '../images/bikini4.jpg' ... /> <script> function fgrand(image) { image.style.width ="30%" ; image.style.opacity ="1"; image.src ='../images/burkini.jpg' ; } function fpetit(image) { image.style.width ="10%" ; image.style.opacity ="0.2"; } ...

Le code HTML est lourd du fait du recours au gestionnaire d'événements.

Par contre le script est léger.
Notez le passage de paramètre dans chaque fonction. La variable image désigne l'image courante.

La solution avec JS-jQuery

Le code CSS & HTLM :

<style> img {display : block ; width : 10%; margin :10px auto 10px auto ; opacity : 0.2;} ... <body> <img src = '../images/bikini.jpg' /> <img src = '../images/bikini2.jpg'/> <img src = '../images/bikini3.jpg' /> <img src = '../images/bikini4.jpg' /> ...

Le HTML est d'une simplificité déroutante ; plus besoin d'utiliser les attributs événementiels ; la gestion des événements sera assurée par le script.

Le script :

	$("img").mouseover(function() 
	{
		$(this).css("width", "30%").css("opacity",1);
		$(this).attr("src",'../images/burkini.jpg').attr("title","vieux vicieux");
	});
	$("img").mouseout(function() {$(this).css("width", "10%").css("opacity",0.2)});

Admirez la concision du script alors qu'il est aussi chargé de gérer les événements.
On combine le sélecteur $("img") et le sélecteur $(this) dans la même instruction.

Traduisons en Français la première fonction (deux instructions) : si survol d'une image par la souris celle-ci se voit modifier deux propriétés CSS : width et opacity ET l'image courante se voit modifier deux valeurs d'attributs : src & title.
La deuxième fonction anonyme ne comprend qu'une instruction : en fin de survol retour au formatage initial ; mais la source ne change plus.

J'aurai l'occasion de revenir sur certaines méthodes jQuery.
Notez cependant que pour modifier des valeurs de propriétés CSS il faut utiliser la méthode css("propriété","nouvelle valeur") et que pour modifier des valeurs d'attributs il faut utiliser la méthode attr("attribut","nouvelle valeur").
Tout cela est donc très logique, très intuitif.
Essayez ce code !

Boucle avec jQuery

Imaginons que nous voulions successivement examiner chaque image de la page pour afficher sa source et son éventuel texte alternatif.

En JavaScript traditionnel il faut réaliser une boucle. Le code donne ceci :

	var images = document.querySelectorAll('img') ; 
	var vnombre = images.length ; // nombre d'éléments du tableau images
	for(i = 0 ; i<= vnombre ; i++)	
		{ 
			alert(images[i].src);
			alert(images[i].alt);
		}

En jQuery nous avons la structure each ! Nous allons la présenter via un exemple.

Le code de l'exemple

... <h1>Boucle en jQuery</h1> <button onclick ="finfos()">Infos sur les images de la page </button> <img src = '../images/toucan.jpg' alt ="toucan" /> <img src = '../images/tortue.jpg' alt ="tortue"/> <img src = '../images/foret.jpg' /> <img src = '../images/riviere.jpg'/> <script> function finfos() { $("img").each(function(){ alert(" source image :" +$(this).attr("src") + " texte : " +$(this).attr("alt"));}); } ...

Il y a quatre images.
Toutes les images ont l'attribut src mais l'attribut alt n'existe que pour les deux premières images.
Quand vous cliquez sur le bouton de commande la boite de dialogue alert est affichée quatre fois.
Pour un attribut non utilisé la réponse est "undefined".
On a donc bien réalisé une boucle !

Notez bien la syntaxe : $("sélecteur").each(function() {instruction1 ; instruction2; ... }); .
Le sélecteur utilisé doit bien sûr désigner une collection d'éléments (ici l'ensemble des balises img).
Rendu de ce code !

$(document).ready(function()

Dans de nombreux sites et ouvrages traitant de jQuery il vous est indiqué que le script jQuery doit démarrer ainsi :

<script> $(document).ready(function() { // le code Jquery }) ; </script>

Hors dans mes scripts je n'utilise jamais $(document).ready(function() {...}); et pourtant ça marche ...

Cette instruction veut dire que le jQuery doit être exécuté seulement lorsque la page est chargée (et donc le DOM constitué).
Ce qui tout à fait logique. En effet si vous tentez via jQuery de manipuler des noeuds du DOM alors que ce dernier n'a pas été créé il y aura forcément "plantage" !

Cette instruction est indispensable si le script jQuery se situe dans la partie HEAD de la page.

Or mon script jQuery n'est jamais dans la partie HEAD mais toujours dans la partie BODY et juste avant </body> donc après tout le code HTML.
Donc il est exécuté seulement après que la page ait été chargée (et le DOM construit).
Donc l'instruction $(document).ready(function() est alors totalement inutile !

Menus déroulants

Dans un exemple précédent j'ai utilisé la propriété de style display pour masquer/démasquer des éléments.
Mais il y a plus simple en jQuery !
En effet il a les méthodes hide() & show().

Nous allons utiliser ces deux méthodes pour réaliser des menus horizontaux déroulants.
Si vous avez lu dans mon site le tuto "HTML & CSS pour débutants" ou le tuto "CSS3" vous savez qu'il est possible de réaliser des menus déroulants sans recourir au JavaScript mais uniquement en HTML & CSS.

Mais vous avez pu remarquer que c'est de la "bidouille". Il faut utiliser plusieurs astuces en jouant sur plusieurs propriétés de style. Bref c'est pas très simple. Dans ce chapitre je vous propose une solution plus cartésienne en utilisant jQuery.

Menu déroulant - première version

Le code CSS & HTML

<style> div {width : 30% ; height : auto ; display : inline-block ; background : pink; margin-right : 1% ; vertical-align :top; } ul {display : none ; list-style :none ; } p {height : 30px ; line-height : 30px ; text-align : center; font-weight : bold; } ... <body> ... <div> <p>Menu 1</p> <ul> <li><a href ="#">lien 1</a> <li><a href ="#">lien 2</a> <li><a href ="#">lien 3</a> </ul> </div> <div> <p>Menu 2</p> <ul> <li><a href ="#">lien 21</a> <li><a href ="#">lien 22</a> <li><a href ="#">lien 23</a> </ul> </div> <div> <p>Menu 3</p> <ul> <li><a href ="#">lien 31</a> <li><a href ="#">lien 32</a> <li><a href ="#">lien 33</a> </ul> </div> ...

Chaque menu correspond à un DIV qui contient une balise P et une liste à puces (UL).
Les liste(balise UL) sont par défaut masquées.
Les boites DIV se positionnent côte à côte (display : inline-block)
Chaque lien est contenu dans un item de liste.
Dans le cadre d'un site adaptatif la largeur de chaque DIV et des marges exprimée en %.

Le script

	$("p").mouseover(function() {$(this).next("ul").show();});
	$("p").mouseout(function() {$(this).next("ul").hide();});

Oui, vous ne rêvez pas. Il n'y a que deux instructions mais deux instructions d'une puissance exceptionnelle !

$("p").mouseover(function() {$(this).next("ul").show();}); : si survol avec la souris d'une balise P la liste à puces (UL) qui suit la balise P courante (sélecteur : $(this).next("ul")) est affichée (méthode : show()).

Nous avons utilisé la méthode next() argumentée avec le sélecteur "ul" pour sélectionner la liste à puces qui suit le paragraphe pointé.

Essayez de programmer la même chose en JS traditionnel ... Je vous souhaite beaucoup de courages et de tasses de café et de nuits blanches ...
Essayez les menus déroulants en Jquery !

Le problème c'est que le menu s'affiche puis disparaît de façon instantanée.
Il serait préférable qu'il y ait une transition : affichage et disparition lente ou bien un effet "fondu" (menu de plus en plus opaque puis de plus en plus transparent).

Si vous avez visité le tuto "CSS 3" vous savez qu'il est possible désormais en CSS d'effectuer des transitions.
En fait c'est CSS3 qui s'est inspiré de Jquery car le Jquery a été inventé entre autres pour permettre la programmer facilement ces effets.

Menus déroulants avec transitions

Nous voulons que le menu se déroule lentement et disparaîsse tout aussi lentement.

Le code CSS & HTML ne change pas !

Le script

	$("p").mouseover(function() {$(this).next("ul").slideDown(1000);});
	$("p").mouseout(function() {$(this).next("ul").slideUp(1000);});

slideDown(1000) : l'objet sélectionné s'affiche lentement (en 1000 millisecondes ou un seconde).

slideUp(1000) : l'objet sélectionné disparaît lentement (en 1000 millisecondes ou 1 seconde).
Essayez les menus déroulants avec transitions !

Menus déroulants avec effet "fondu"

Nous voulons maintenant un effet "fondu" c'est à dire que l'objet est de plus en plus opaque puis de plus en plus transparent jusqu'à disparaître (opacité = 0).

Toujours pas de changement dans le HTML & CSS !

Il faut alors écrire le script de la façon suivante :

	$("p").mouseover(function() {$(this).next("ul").fadeIn(1000);});
	$("p").mouseout(function() {$(this).next("ul").fadeOut(1000);});

Testez les menus déroulants avec effet "fondu" !

Simplification de la syntaxe

Lorsque vous devez modifier plusieurs propriétés de style ou plusieurs attributs il peut devenir fastidieux d'indiquer à chaque fois la méthode css ou la méthode attr.

Thème

Si une image est survolée elle est agrandie et devient plus opaque (deux propriétés de style modifiées)

Si double clic sur une image elle est remplacée par celle d'une baigneuse en burkini et un message moralisateur apparaît si survol de cette nouvelle image.

Le code (extraits) :

... <style> img {width : 15% ;opacity : 0.1; } ... <body> ... <img src = '../images/bikini.jpg'/> <img src = '../images/trikini.jpg'/> <script> $("img").mouseover(function(){$(this).css({"opacity": "1", "width":"50%"});}); $("img").mouseout(function(){$(this).css({"opacity": "0.1", "width":"15%"});}); $("img").dblclick(function(){$(this).attr({"src": "../images/burkini.jpg", "title":"Gros vicieux !"}).css("opacity","1");}); ...
Testez cet exemple moralisateur !

Dans les première et deuxième instructions la méthode css n'est pas répétée deux fois ; elle est mise en facteur commun.
On utilise la même syntaxe mais avec la méthode attr cette fois dans la troisième instruction.
N'oubliez pas les accolades !

Cette syntaxe doit vous faire penser à quelque chose ...
En fait on a utilisé la fameuse notation JSON que j'ai déjà utilisé pour définir les variables indicées (voir tuto de JavaScript traditionnel).

En définitive la syntaxe est :
css/attr({"propriété/attribut":"valeur","propriété/attribut":"valeur","propriété/attribut":"valeur", ...})

Notez que la commande width est exprimée en %.

Le "slideshow" (diaporama)

Reprenons le thème du SLIDESHOW traité en JS traditionnel.
Vous allez voir que jQuery permet de simplifier non seulement le script mais aussi le code HTML.

Le code CSS & HTML :

... <style> img {display : inline-block ;width : 15%; vertical-align : top; margin : 1%; } div {margin : 20px auto 20px auto; width : 80% ; height : 400px ; border : 2px solid red; background-image: url(../images/palourde_royale.jpg); background-repeat : no-repeat; background-size : cover; } ... <body> <div></div> <h4 style ='text-align: center;'>Palourde royale</h4> <p class ="remarque">Cliquez sur l'une des miniatures ci-dessous et <br>l'image s'affichera en grand dans la boîte au dessus avec en légende le nom de l'espèce. <br><img src ="../images/palourde_royale.jpg" alt ='Palourde royale'> <img src ="../images/danseuse_espagnole.jpg" alt ='Danseuse espagnole'> <img src ="../images/ormeau.jpg" alt ='ormeau'> <img src ="../images/nautile.jpg" alt ='Nautile'> ...

Plus besoin d'utiliser le gestionnaire d'événements de HTML. Donc les "onclick ... " ont disparu de chaque balise img.
C'est le script qui gère les événements.

Le script :

$("img").click(function() 
	{
		var source = $(this).attr("src");
		source ="url(" + source +")" ;
		$("div").css("backgroundImage", source); 
		var texte = $(this).attr("alt");
		$("h4").text(texte);
	}
);

Testez cette version jQuery du Slideshow !

Ce chapitre introductif est terminé. Dans les chapitres suivants inventaire des sélecteurs, des événements, des méthodes du framework.
Retour menu