Aller au menu - Aller au contenu

Icône Quelques notions de CSS

Avatar
Par Avatar Ceriko
Mise à jour : 18/12/2010
Difficulté : Facile Facile Durée d'étude : 1 heure
933 visites depuis 7 jours, dont 53 sur ce chapitre classé 134/786
Nous aborderons quelques notions de CSS qui nous seront utiles plusieurs fois dans la suite de notre TP.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Notre premier exercice

Nous allons entre autres vérifier si vous savez bien utiliser la pseudo-classe :hover.

Première étape



Énoncé


Nous voulons que le passage du curseur de la souris sur une image miniature (par exemple 100 × 100 pixels) fasse grossir notre image.

Ça ne vous fait pas peur, j'espère !

Indices


  • Il faudra afficher une miniature que le passage de la souris fera grossir.
  • Vous aurez besoin d'utiliser la pseudo-classe :hover pour agrandir l'image.


À vous de jouer !


Je compte sur vous pour faire de votre mieux avant de regarder le résultat, sinon vous n'apprendrez pas grand-chose !

…
… …
… … …

Résultat


Secret (cliquez pour afficher)
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title>Agrandir une image</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <style type="text/css">
	    img {			/* Notre miniature */
		width:50px;
		height:50px;
	    }
	    img:hover {			/* Notre agrandissement au survol de la miniature */
		width:600px;
		height:600px;
	    }
        </style>
    </head>
    <body>
        <div>
            <img src="votre_chemin_1.jpg" alt="Tikal" />
        </div>
    </body>
</html>
− Test −


Explications


Secret (cliquez pour afficher)
Ce code est extrêmement simple.

On commence par indiquer les dimensions de la miniature :

Code : CSS
1
2
3
4
img {
	width:50px;
	height:50px;
}


Puis, au survol de la miniature, on modifie ses dimensions avec :hover :

Code : CSS
1
2
3
4
img:hover {
	width:600px;
	height:600px;
}

On utilise une seule et même image à laquelle on applique différentes tailles.


Deuxième étape


Compliquons un peu : nous voulons que, au passage du curseur de la souris sur une image miniature, une autre image, plus grande, apparaisse.

Indices

  • Nous avons maintenant besoin de deux images ! Elles seront présentées avec des tailles différentes.
  • Il faudra cacher la grande et ne l'afficher que lorsque le curseur de la souris passera sur la petite.
  • Vous utiliserez toujours la pseudo-classe :hover pour faire apparaître l'image.
  • Il pourrait être utile de savoir ce qu'est une balise span…


À vous de jouer !


Faites un effort pour trouver…

…
… …
… … …

Résultat


Secret (cliquez pour afficher)
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title>Faire apparaître une image</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <style type="text/css">
	    .petite {			/* Notre miniature */
		width:50px;
		height:50px;
	    }
	    .grande {			/* Notre agrandissement */
		display:none;		/* Il est caché par défaut */
	    }
	    span:hover .grande {	/* Au survol de la miniature par la souris */
		display:block;		/* Il apparaît */
		width:600px;
		height:600px;
	    }
        </style>
    </head>
    <body>
        <div>
            <span><img class="petite" src="votre_chemin_1.jpg" alt="Tikal" /><img class="grande" src="votre_chemin_1.jpg" alt="Tikal" /></span>
        </div>
    </body>
</html>
− Test −


Explications


Secret (cliquez pour afficher)


Le HTML


Code : CSS
1
2
3
<div>
     <span><img class="petite" src="votre_chemin_1.jpg" alt="Tikal" /><img class="grande" src="votre_chemin_1.jpg" alt="Tikal" /></span>
</div>

L'astuce utilisée ici est d'appeler la même image deux fois, toutes deux dans une balise span avec des classes différentes, .petite et .grande.

Tout le reste se passe dans le CSS !

Le CSS


On commence par donner les dimensions aux images et donc à la miniature :

Code : CSS
1
2
3
4
.petite {
	width:50px;
	height:50px;
}


Puis on s'attaque à l'agrandissement…
D'abord, on veut qu'il soit caché par défaut, on lui applique donc la propriété display:none.

Code : CSS
1
2
3
.grande {
	display:none;
}

On traite enfin ce qui se passe quand le curseur de la souris survole la miniature, c'est-à-dire que l'affichage de l'agrandissement passe de none à block, et on lui attribue des dimensions (sinon ce sont les dimensions réelles de l'image qui sont prises en compte).

Code : CSS
1
2
3
4
5
span:hover .grande {
	display:block;
	width:600px;
	height:600px;
}


Une autre approche


Je précise tout de même qu'il était possible de faire pareil plus simplement.
Comment ? En se passant carrément de la classe .petite.

Car si l'on ne précise pas quelles images sont au format 100 × 100 pixels, puis que l'on donne une taille différente aux images .grande, on arrive exactement au même résultat !

Voyons comment il faudrait modifier cette page pour retirer les .petite :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title>Faire apparaître une image</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <style type="text/css">
	    img {			/* On remplace .petite par img (c'est-à-dire toutes les images) */
		width:50px;
		height:50px;
	    }
	    .grande {
		display:none;
	    }
	    span:hover .grande {
		display:block;
		width:600px;
		height:600px;
	    }
        </style>
    </head>
    <body>
        <div>				<!-- On retire l'attribut class à notre miniature -->
            <span><img src="votre_chemin_1.jpg" alt="Tikal" /><img class="grande" src="votre_chemin_1.jpg" alt="Tikal" /></span>
        </div>
    </body>
</html>

Ça nous donne un code plus simple et plus léger.
Peut-être que cela paraît accessoire dans notre exemple, mais imaginez le gain que cela représente avec 36 miniatures. ;)


Ah ouais, c'est cool, mais comment sait-on quelle ligne il faut écrire avant d'appliquer les propriétés qui vont bien ?

Très bonne question ! C'est justement ce que je vous explique en dessous…
Retour en haut

Appliquer du style correctement

Vous avez peut-être eu du mal à trouver sur quel sélecteur appliquer le style span:hover .grande { … }.
C'est un point crucial de ce TP, et aussi ce qui m'avait posé le plus de problèmes en CSS.

Procédure à suivre


Voici énoncées six des neuf règles de base à connaître et à appliquer quand on a affaire aux pseudo-classes :
  1. Se demander si on doit limiter ou non la portée de notre style en ajoutant des conteneurs, sur un ou plusieurs niveaux. Si oui, il faudra faire suivre chaque « parent » d'une espace.
    #conteneur1 #conteneur2 … …

  2. Savoir sur quel élément on agit (a, span, img, td, div…). Nous ferons référence à cet élément en tant qu'élément déclencheur dans la suite. Il est cependant facultatif de le noter si la classe (ou l'id) est déjà spécifiée à la règle 3.
    #conteneur1 #conteneur2 element_declencheur

  3. Se demander s'il faut spécifier la classe ou l'id de l'élément déclencheur (ce qui limitera la portée de notre style). Si oui, on l'insère entre l'élément déclencheur et la pseudo-classe sans aucune espace (facultatif si l'élément déclencheur est spécifié).
    #conteneur1 #conteneur2 element_declencheur.class_dec

  4. Savoir quel pseudo-format utiliser et le faire suivre d'une espace pour séparer « l'élément déclencheur » et « l'élément cible ».
    #conteneur1 #conteneur2 element_declencheur.class_dec:hover

  5. Savoir sur quel élément cible contenu dans l'élément déclencheur on veut appliquer le style. L'élément cible doit impérativement être inclus dans l'élément déclencheur, mais il est facultatif de le spécifier si la classe (ou l'id) est déjà spécifiée à la règle 6.
    #conteneur1 #conteneur2 element_declencheur.class_dec:hover element_cible

  6. Savoir si on veut spécifier une classe ou un id en particulier (qui doit impérativement être contenu dans l'élément déclencheur). Si oui, on l'ajoute à l'élément précédent sans espace (facultatif si l'élément cible est renseigné à la règle 5).
    #conteneur1 #conteneur2 element_declencheur.class_dec:hover element_cible.class_cib


Soit dans notre cas


Revenons-en à notre exercice et appliquons ces règles afin de trouver l'expression CSS (span:hover .grande { … }) à laquelle appliquer le style pour que notre image apparaisse :

  1. Notre code est trop petit pour limiter la portée de notre style (il ne risque pas d'affecter autre chose, puisqu'il n'y a rien d'autre !).

  2. On agit sur l'élément span (qui contient nos deux images), c'est notre élément déclencheur.

    Code : CSS
    1
    span…

  3. Nous n'avons qu'une occurrence de la balise span qui ne contient même pas de classe ni d'id, il est donc inutile et impossible de préciser sur quelle classe ou id de span on veut agir.

  4. Nous voulons utiliser la pseudo-classe :hover.

    Code : CSS
    1
    span:hover …   /* N'oubliez pas l'espace à la fin ! */

  5. Le style sera appliqué à l'élément cible img.

    Code : CSS
    1
    span:hover img…

  6. La classe de l'élément image sur laquelle nous agissons est la classe .grande.

    Code : CSS
    1
    span:hover img.grande {…}


On obtient bien le même résultat, nous avons juste ajouté img devant notre élément cible et si vous testez chez vous, vous verrez que ça fonctionne parfaitement.

C'est normal étant donné que la règle 5 dit que le nom de l'élément est facultatif si celui de la classe ou de l'id lui correspondant est précisé.


En compliquant un peu


Modifions un peu notre code ci-dessus :

Code : HTML
1
2
3
4
5
6
7
8
9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    …
    <body>
        <div id="conteneur">
            <span class="imagedouble"><img class="petite" src="../image/tikal/1.jpg" alt="Tikal" /><img class="grande" src="../image/tikal/1.jpg" alt="Tikal" /></span>
        </div>
    </body>
</html>

Nous n'avons fait que donner une classe .imagedouble à notre balise span ainsi qu'un id #conteneur à notre div… et ce faisant, nous avons considérablement augmenté nos possibilités.

Je vais commencer à vous embrouiller un peu…

Reprenons nos six règles en imaginant que notre CSS s'applique à énormément de code HTML :

  1. Nous souhaitons limiter la portée de notre style au cas où nous aurions d'autres .grande ailleurs, par exemple. Justement, le div qui contient notre image possède un id #conteneur.

    Code : CSS
    1
    #conteneur …   /* Suivi d'une espace */

  2. Nous agissons toujours sur l'élément span, notre élément déclencheur.

    Code : CSS
    1
    #conteneur span…

  3. Nous avons beaucoup de code et une erreur serait regrettable, utilisons notre classe .imagedouble.

    Code : CSS
    1
    #conteneur span.imagedouble…

  4. Nous utilisons toujours la pseudo-classe :hover.

    Code : CSS
    1
    #conteneur span.imagedouble:hover …   /* Suivi d'une espace */

  5. Nous appliquons toujours le style à l'élément img.

    Code : CSS
    1
    #conteneur span.imagedouble:hover img…

  6. Et la classe de notre image est toujours .grande.

    Code : CSS
    1
    #conteneur span.imagedouble:hover img.grande {…}



Allons plus loin


Je suppose que vous avez modifié le HTML dans votre page pour faire les tests ? Si ce n'est pas le cas, faites-le pour voir si ça marche bien.
Maintenant, dans ce HTML modifié qui fonctionne avec ceci :

Code : CSS
1
#conteneur span.imagedouble:hover img.grande {…}


… remplacez le CSS par celui que nous avions tout à l'heure :

Code : CSS
1
span:hover .grande {…}

Que remarquez-vous ?

Tu nous as arnaqués, ça revient exactement au même ! Ça sert à quelque chose ton truc ?

Oui, le résultat est le même. Et oui, ça sert. :D

Il est très important de comprendre ce mécanisme. Ça peut paraître facile dans des exemples comme ceux que nous avons vus jusqu'à présent, mais ça va vite se compliquer.

Savoir ces petites choses vous simplifiera la vie à maintes reprises.

Voici quelques explications plus détaillées…

On pourrait aussi écrire :

Code : CSS
1
div#conteneur span.imagedouble:hover img.grande {…}

Comme vous le voyez, on peut souvent écrire un élément et (ou) le nom (id ou classe) qui lui est associé.

En fait, toutes les expressions suivantes fonctionneraient :

Code : CSS
1
#conteneur .imagedouble:hover .grande {…}

Code : CSS
1
div span:hover .grande {…}

Code : CSS
1
div#conteneur .imagedouble:hover .grande {…}

Code : CSS
1
div#conteneur span:hover img.grande {…}

Code : CSS
1
body div#conteneur span.imagedouble:hover img.grande {…}

C'est quoi, ton dernier exemple ? Ça marche aussi avec body ?

Oui, on peut remonter aussi loin que l'on veut dans la hiérarchie CSS.
Et il est aussi tout à fait possible de sauter des intermédiaires, comme ceci :

Code : CSS
1
body:hover .grande {…}

Mais il faut bien comprendre que tout dépend vraiment de ce que l'on souhaite obtenir.

Dans notre dernier exemple, tout fonctionne, mais puisque la pseudo-classe :hover agit sur body et que body occupe toute la largeur de notre écran, notre agrandissement apparaît même si notre souris passe quelque part à droite de l'image, alors que ce comportement n'existe pas dans nos autres exemples.

C'est pourquoi il faudra généralement être précis dans sa façon de faire. Et maintenant que vous avez compris tout cela, vous pourrez justement plus facilement faire preuve de précision.
Retour en haut

Un deuxième exercice

Je n'allais quand même pas vous laisser comme ça sans m'assurer d'abord que vous aviez bien tout compris !

Énoncé de l'exercice


Imaginez qu'un de vos amis est en train de créer un site et qu'il souhaite faire apparaître du texte subliminal lorsqu'un utilisateur clique sur une image.
Il essaie pendant des heures sans y parvenir et, désespéré, il vient vous voir un soir pour vous demander de l'aide. Voici son code HTML :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<html>
    <head> 
        …
        <style type="text/css">
	    …
	    div div span { display:none; }
        </style>
    </head>
    <body>
	<div id="contenu">
	    <div class="imagetexte">
		<img class="image" src="../image/tikal/1.jpg" alt="apparisseur" /><span class="text">Ceci est un message subliminal…</span>
	    <div>
	</div>
        …
    </body>
</html>


Il a trouvé comment cacher son texte avec ceci :

Code : CSS
1
div div span { display:none; }
− Test −


Il vous demande maintenant de l'aider à faire apparaître son texte (entre les balises span) quand on clique sur son image.
En plus, il tient à ce que vous n'utilisiez aucun des mots suivants : div, span.

Saurez-vous l'aider ?

Permettez-moi de vous rappelez les six premières règles pour trouver une expression CSS, peut-être que ça pourrait vous servir !

  1. Se demander si on doit limiter ou non la portée de notre style en ajoutant des conteneurs, sur un ou plusieurs niveaux. Si oui, il faudra faire suivre chaque « parent » d'une espace.
  2. Savoir sur quel élément on agit (a, span, img, td, div…). Nous ferons référence à cet élément en tant qu'élément déclencheur dans la suite. Il est cependant facultatif de le noter si la classe (ou l'id) est déjà spécifiée à la règle 3.
  3. Se demander s'il faut spécifier la classe ou l'id de l'élément déclencheur (ce qui limitera la portée de notre style). Si oui, on l'insère entre l'élément déclencheur et la pseudo-classe sans aucune espace (facultatif si l'élément déclencheur est spécifié).
  4. Savoir quel pseudo-format utiliser et le faire suivre d'une espace pour séparer « l'élément déclencheur » et « l'élément cible ».
  5. Savoir sur quel élément cible contenu dans l'élément déclencheur on veut appliquer le style. L'élément cible doit impérativement être inclus dans l'élément déclencheur, mais il est facultatif de le spécifier si la classe (ou l'id) est déjà spécifiée à la règle 6.
  6. Savoir si on veut spécifier une classe ou un id en particulier (qui doit impérativement être contenu dans l'élément déclencheur). Si oui, on l'ajoute à l'élément précédent sans espace (facultatif si l'élément cible est renseigné à la règle 5).

…
… …
… … …

Besoin d'un coup de pouce ?


Secret (cliquez pour afficher)
Indice 1 : quand on veut une action relative à un clic, on n'utilise plus :hover !
Indice 2 : vous ne pouvez pas faire référence aux balises par leurs noms génériques, alors essayez avec leurs noms de classe ou d'id !


Solution


Secret (cliquez pour afficher)
Code : CSS
1
#contenu .imagetexte:active .text { display:inline; }
− Test −

Le reste du TP sera grandement simpliste si vous avez bien compris ces explications.
Mais il reste encore plusieurs choses à dire sur le CSS avant que vous ne soyez fin prêts !

Un piège à éviter


Pendant vos tests, vous êtes peut-être tombés sur un cas où les six règles étaient suivies sans pour autant que le style se soit appliqué comme vous l'espériez.

Oui, et je me demandais justement pourquoi !

Je vais vous expliquer un truc que vous devrez garder à l'esprit à l'avenir.

Si par exemple vous cachez, comme dans notre diaporama, une image de cette manière :

Code : CSS
1
#id_du_div_conteneur .classe_de_notre_image_cachee { display:none; }

… et que vous autorisez son affichage grâce à ceci :

Code : CSS
1
span:hover .classe_de_notre_image_cachee { display:block; }

… eh bien, le passage de la souris ne fera pas apparaître votre agrandissement. Pourquoi ?

Parce que pour annuler ou modifier l'effet d'une propriété CSS, il faut impérativement que notre expression soit au moins aussi précise que celle qui a déjà servi à spécifier la propriété de notre élément.
En revanche, si la propriété n'a jamais été spécifiée, alors il n'y a pas de problème.

Tu parles bizarrement d'un coup… o_O Elle est vachement compliquée ta phrase !

Pas du tout ! En fait, c'est très simple, vous allez voir.

Voici la première fois où la propriété display de .classe_de_notre_image_cachee est modifiée :

Code : CSS
1
#id_du_div_conteneur .classe_de_notre_image_cachee { display:none; }

Vous voyez bien qu'avant la classe de notre image, on spécifie l'id d'un div qui contient l'image sur laquelle on applique le style.
Or, au-dessus, en essayant de rendre notre agrandissement visible à l'aide d'un display:block, nous n'avons pas mentionné l'id du div :

Code : CSS
1
span:hover .classe_de_notre_image_cachee { display:block; }

Ça aurait fonctionné avec un code comme celui-ci :

Code : CSS
1
#id_du_div_conteneur span:hover .classe_de_notre_image_cachee { display:block; }

Logique, non ?
Voyons si vous m'avez bien compris (et ne m'en veuillez pas pour les pièges…).

Encore des exercices


Essayez de trouver si l'image s'afficherait au survol de la souris dans les cas suivants et vérifiez la réponse.

L'affichage se ferait-il dans ce cas ?

Code : CSS
1
2
div .classe_de_notre_image_cachee { display:none; }
span:hover .classe_de_notre_image_cachee { display:block; }

Réponse :

Secret (cliquez pour afficher)
Non, parce que la modification de la propriété se fait à partir d'une adresse moins précise !

Il n'est pas fait mention du div dans la deuxième ligne.


L'affichage se ferait-il dans ce cas ?

Code : CSS
1
2
div .classe_de_notre_image_cachee { display:none; }
#id_du_div_conteneur span:hover .classe_de_notre_image_cachee { display:block; }

Réponse :

Secret (cliquez pour afficher)
Oui, parce que la modification de la propriété se fait à partir d'une adresse plus précise !

Stipuler l'id du div est une précision plus grande que d'indiquer simplement que l'image est contenue dans un div.


L'affichage se ferait-il dans ce cas ?

Code : CSS
1
2
div#id_du_div_conteneur .classe_de_notre_image_cachee { display:none; }
#id_du_div_conteneur span:hover .classe_de_notre_image_cachee { display:block; }

Réponse :

Secret (cliquez pour afficher)
Oui, parce que la modification de la propriété se fait à partir d'une adresse aussi précise !

Stipuler l'id du div est, pour CSS, aussi précis que de dire que l'image est contenue dans un div#id_du_div.

Pour terminer, on peut ajouter quelques règles supplémentaires aux six de tout à l'heure.
  • Quand une propriété a déjà été appliquée à un élément et que l'on souhaite la modifier, l'adresse doit, en plus d'être valide (nos six règles), être au moins aussi précise que celle qui a été utilisée pour appliquer le style la première fois. Dans le cas contraire, le style ne sera pas appliqué.
  • L'id ou la classe d'un élément est une information plus précise que la mention de l'élément sans id ni classe.
  • La mention de l'id ou de la classe rend la précision de l'élément inutile pour modifier le style. Mais attention : si une classe est appliquée à deux éléments div et a, par exemple, alors préciser « élément.classe » prend toute son importance dans le cas où l'on souhaite appliquer le style uniquement à l'un ou à l'autre.


En apprendre plus sur le sujet


Nous avons vu beaucoup de choses qui, je le répète, vous seront très utiles. Mais ce n'est en fait qu'une petite partie de ce qu'il faut savoir pour être à l'aise en CSS.

Voici une piste pour les curieux, la liste non exhaustive des propriétés CSS de biohazard2. On y apprend plein de choses intéressantes !

Voici également un cours sur les sélecteurs provenant de Wikibooks : Les sélecteurs CSS.
Retour en haut

Le sélecteur de frère adjacent

Tout ce que je vous ai montré est correct, mais il existe en réalité une façon plus simple de faire apparaître notre image du début de chapitre.

Explications


Connaissez-vous le + ? Non ? C'est le sélecteur de frère adjacent !

Le quoi ?

En CSS, un frère adjacent est un élément qui suit directement un autre élément. Le + est donc un sélecteur qui sélectionne le frère adjacent de l'élément déclencheur (pour reprendre notre propre syntaxe).

En reprenant notre exercice du début de chapitre, l'élément déclencheur serait notre miniature ; nous allons faire en sorte que notre frère adjacent soit notre .grande. Ça tombe bien puisque l'agrandissement succède à notre miniature dans le code HTML.

Ce qui nous donnerait ce code :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title>Apparition d'une image</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <style type="text/css">
	    img {
		width:50px;
		height:50px;
	    }
	    .grande {
		display:none;
	    }
	    img:hover + .grande {
		display:block;
		width:600px;
		height:600px;
	    }
        </style>
    </head>
    <body>
        <div>
            <img src="votre_chemin/1.jpg" alt="Tikal" /><img class="grande" src="votre_chemin/1.jpg" alt="Tikal" />
        </div>
    </body>
</html>
− Test −

Voici ce qui se passe avec ce code : à chaque fois qu'une image est survolée, la prochaine image à suivre dans le HTML dont la classe est .grande devient visible.

Pratique, non ?

Avantages

  • Ce code est plus simple que l'ancien parce que l'élément cible n'a plus besoin d'être contenu dans l'élément déclencheur.
  • Il n'est donc plus nécessaire d'utiliser de balises span.
  • Le code est plus clair, un peu moins lourd et pourtant, il fonctionne de manière rigoureusement identique.
  • Cerise sur le gâteau, on peut même, grâce au sélecteur de frère adjacent, se passer de notre classe .grande.


Exercice dérivé du précédent


Reprenez le code ci-dessus pour qu'il fonctionne de la même manière mais en se passant de la classe .grande.
Avec ce que vous avez appris, c'est facile et rapide !

…
… …
… … …

Réponse :

Secret (cliquez pour afficher)
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title>Faire apparaître une image</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <style type="text/css">
	    img {			/* Rien ne change pour la miniature */
		width:50px;
		height:50px;
	    }
	    img + img {			/* On cache les agrandissements avec le sélecteur de */
		display:none;		/* frère adjacent en ne donnant que le nom des éléments */
		
	    }
	    img:hover + img {		/* Au survol de la miniature par la souris */
		display:block;		/* L'agrandissement associé apparaît */
		width:600px;		/* Et on lui donne ses dimensions */
		height:600px;
	    }
        </style>
    </head>
    <body>
        <div>				<!-- On a enlevé la classe .grande -->
            <img src="../image/tikal/29.jpg" alt="Tikal" /><img src="../image/tikal/29.jpg" alt="Tikal" />
        </div>
    </body>
</html>

Le fonctionnement est exactement le même sauf que notre code est encore plus léger et plus clair.


Dernier exercice du chapitre


Que se passerait-il si nous utilisions le CSS ci-dessus avec une succession d'images comme ceci :

Code : HTML
1
2
3
4
5
6
7
8
…
<img src="../image/tikal/9.jpg" alt="Tikal" />
<img src="../image/tikal/10.jpg" alt="Tikal" />
<img src="../image/tikal/11.jpg" alt="Tikal" />
<img src="../image/tikal/12.jpg" alt="Tikal" />
<img src="../image/tikal/13.jpg" alt="Tikal" />
<img src="../image/tikal/14.jpg" alt="Tikal" />
…


Réponse :

Secret (cliquez pour afficher)
Alors nous ne verrions que la miniature de la première image ! Et au survol, nous ne verrions que l'agrandissement de la deuxième.

Parce que le CSS fait en sorte que toutes les images précédées d'une image sont cachées, on ne voit que la première miniature au chargement de la page puisque c'est la seule qui n'est pas précédée par une image.

Ensuite, le CSS indique qu'au survol d'une image, on affiche l'image suivante au format 600 × 600 pixels ; et c'est ce qu'il fait en affichant la deuxième image de notre HTML. Les autres n'auront jamais l'occasion de s'afficher en grand.
− Test −


Conclusion


Attention donc, car bien souvent, ce qui fonctionne dans un cas ne fonctionne pas dans l'autre, il faut toujours se poser les bonnes questions et bien connaître les éléments manipulés.

Vous connaissez à présent deux méthodes afin d'afficher des images ou du texte avec un :hover, et vous choisirez celle qui vous convient le mieux !
Quand ce sera possible, j'opterai pour la deuxième solution puisque qu'elle est plus concise et plus simple, et aussi parce que les span nous poseront bientôt problème.
Retour en haut
Vous aimez les exercices ? Ça tombe bien, il y en a plein dans le chapitre suivant !

Merci de laisser un commentaire si vous avez rencontré des difficultés ou si quelque chose ne vous paraît pas clair.
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut

Lire aussi

Icône
Préambule
Icône
Customisons notre diaporama… (1/2)
Icône
Prêts pour notre mégadiaporama ?
Icône
TP : diaporama original en CSS
Retour en haut
6 commentaires pour "Quelques notions de CSS"
Note moyenne : 3.76 / 4 (38 votes)
Pseudo Commentaire
Hors ligne Ceriko # Posté le 20/12/2010 à 13:54:22
Life is good !
Avatar

Avis : Très bon

Ville : Barcelona
Pays : Espagne

 Mon hébergeur gratuit a coupé l'accès pour cause de trafic trop important :-°
Ce sera résolu très rapidement (le validateur n'a plus qu'à appuyer sur un bouton).

Heureusement sans les liens d'exemple vous n'êtes pas bloqués: vous avez les explications, les codes souvent complets et même des photos à disposition.
De quoi reproduire tous mes exemples chez vous très facilement.
Créez un diaporama original en CSS à partir de zéro

Modérateur sur DarkyROM : donnez le meilleur à votre Galaxy S :D
 
Hors ligne elpacito # Posté le 23/12/2010 à 16:06:32
Avatar

 Une petite faute de frappe : "Ça ne vous faut pas peur, j’espère !"

Je poursuis ma lecture du tp !
Hors ligne Ceriko # Posté le 23/12/2010 à 18:01:25
Life is good !
Avatar

Avis : Très bon

Ville : Barcelona
Pays : Espagne

 Merci, ce sera corrigé lors de la prochaine mise à jour.
N'hésitez pas à commenter ce chapitre parce que pour moi c'est le plus important et je voudrais être sûr qu'il soit bien compris.
Créez un diaporama original en CSS à partir de zéro

Modérateur sur DarkyROM : donnez le meilleur à votre Galaxy S :D
 
Hors ligne pb2n # Posté le 29/06/2011 à 12:12:12
Avatar

 Est-il possible, dans un tableau, d’avoir la miniature « déclencheur » dans une cellule, et d’avoir la grande photo « élément cible » dans une autre cellule ?
Le tuto semble ne le permetre qu'en ligne et non en block !
J’utilise actuellement un script pour le réaliser mais je souhaiterai le faire en CSS.
Le tableau serait conservé car ce sont vraiment des données tabulaires que j’utilise. Dès que l’on est intéressé par une information, le survol d’un petit gif permet d’obtenir la photo désirée.
D’avance merci de la réponse.
Pascal
N'oublie pas que le chêne avant d'être grand et fort était comme toi, un gland.
 
Hors ligne Ceriko # Posté le 14/12/2011 à 14:15:18
Life is good !
Avatar

Avis : Très bon

Ville : Barcelona
Pays : Espagne

 Citation : pb2n
Est-il possible, dans un tableau, d’avoir la miniature « déclencheur » dans une cellule, et d’avoir la grande photo « élément cible » dans une autre cellule ?
Le tuto semble ne le permetre qu'en ligne et non en block !
J’utilise actuellement un script pour le réaliser mais je souhaiterai le faire en CSS.
Le tableau serait conservé car ce sont vraiment des données tabulaires que j’utilise. Dès que l’on est intéressé par une information, le survol d’un petit gif permet d’obtenir la photo désirée.
D’avance merci de la réponse.
Pascal

Désolé j'ai complètement zappé ton commentaire !

Oui c'est possible mais pourquoi utiliser un tableau quand c'est inadapté (les images ne sont pas des données tabulaires) alors qu'il existe une solution qui fonctionne très bien est qui est archi détaillée tout au long de ce TP ?
Créez un diaporama original en CSS à partir de zéro

Modérateur sur DarkyROM : donnez le meilleur à votre Galaxy S :D
 

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.