Les Images coulissantes : Suite

Le problème des images de tailles différentes

Deux images coulissantes de tailles différents sont placées normalement dans le flux, par exemple une vignette et une grande image comme c'est le cas ici avec l'image Chapon.

On constate que dans l'état a : hover, la seconde image plus grande que la première repousse les éléments qui la suivent dans le flux courant : les titres AVEC UNE SEULE IMAGE, MEROU et l'image correspondante.

Le mouvement ainsi créé n'est pas très esthétique et est fatigant pour l'utilisateur.

Nous avions proposé comme solution dans le TP précédent de donner au conteneur de la vignette les dimensions de la grande image 300px* 300px.

Cette solution, si elle résoud le problème du déplacement intempestif, n'est guère satisfaisante car elle laisse un grand espace vide autour de la vignette. De plus dans l'état a, la zone réactive est étendue à toute la surface du carré vide.

La solution la plus satisfaisante, consiste à attribuer à <a> la propriété position: absolute. Dans ce cas :

La propriété position : absolute

La propriété position : absolute permet de positionner un élément en totale indépendance par rapport au flux et sans interaction avec les éléments placés dans le flux qui l'entourent.

Le positionnement absolu est une méthode radicale (et puissante) qui retire tout à fait un élément du flux.

Un élément doté de la propriété position : absolute est positionné grâce aux couples de propriétés top et left ou right et bottom par rapport à un élément de référence qui peut être soit un élément parent doté de la propriété position : relative ou de la propriété position : absolute soit en l'absence d'un tel élément parent, l'élement body.

La position à l'écran d'un élément doté de la propriété position : absolute ne dépend pas de l'ordre dans lequel les éléments HTML sont déclarés dans le code.

LEs exercices

Les exercices de ce TP vont consister à appliquer, au prix de quelques modifications du code css, la technique du positionnement absolu aux images coulissantes de tailles différentes que nous avions expérimentées dans le TP précédent.
  • .Reference{
    • position : relative
    • hauteur : 50px
    • marge basse : 80px;
    • bordure : 2px dotted #f0f
  • }
Nous allons tout d'abord créer dans la feuille de style interne, une class .Reference qui servira de cadre de positionnement pour les images placées en position : absolute, nous atribuerons à cette class, les propriétés ci-contre.

Ci-dessous figurent les modifications à apporter aux propriétés des différentes class d'images coulissantes. Les propriétés supprimées sont écrites en vert, les propriétés ajoutées sont écrites en bleu.

Chapon (Deux images de tailles différentes)

.Img2{

/*<!--
Comportement de block
marges:30px auto 0 auto
largeur:300px
hauteur:300px
-->*/
position : absolute;
haut : 0;
gauche : 300px;
largeur : 40px
hauteur : 40px
 Arrière-plan : url(ImgPoissons/VChapon.jpg) pas de répétition
bordure : 2px pointillée #f00

}
.Img2:hover{

largeur:300px
hauteur:300px
 Arrière-plan:url(ImgPoissons/Chapon.jpg)

}

Le code html de l'image est sans changement : <a href="#Cible" class="Img2"></a>. Cependant, il faut l'insérer dans un élément <div> ou <p> auquel on attribue la class="Reference".

Homard (Une seule image, coulissement vertical)

.Img4{

/*<!--
Comportement de block
marges:30px auto 0 auto
largeur:300px
hauteur:300px
-->*/
position : absolute;
haut : 0;
gauche : 300px;
largeur : 120px
hauteur : 60px
 Arrière-plan : url(ImgPoissons/Homard.jpg) pas de répétition 0 -300px
bordure : 2px pointillée #f00

}
.Img4:hover{

largeur:300px
hauteur:300px
 Position d'arrière-plan:0 0

}

Le code html de l'image est sans changement : <a href="#Cible" class="Img4"></a>. Comme dans l'exercice précédent, il faut l'insérer dans un élément <div> ou <p> auquel on attribue la class="Reference".

Langouste (Une seule image, coulissement horizontal)

.Img5{

/*<!--
Comportement de block
marges:30px auto 0 auto
largeur:300px
hauteur:300px
Arrière-plan : url(ImgPoissons/Langouste.png) pas de répétition 240px 0
-->*/
position : absolute;
haut : 0;
gauche : 300px;
largeur : 60px
hauteur : 60px
Arrière-plan : url(ImgPoissons/Langouste.png) pas de répétition 0 0
 bordure : 2px pointillée #f00

}
.Img5:hover{

largeur:300px
hauteur:300px
 Position d'arrière-plan:-60px 0

}

Le code html de l'image est sans changement : <a href="#Cible" class="Img5"></a>. Comme dans les exercices précédents, il faut l'insérer dans un élément <div> ou <p> auquel on attribue la class="Reference".

Deux images de tailles différentes
(Même code CSS pour les deux images, image d'arrière-plan paramètrable)

Conteneurs
.Poissons{

/*<!--style de liste:aucun
largeur:604px
hauteur:360px
marges:40px auto;-->*/
 largeur : 608px
hauteur : 54px
marges : 40px auto;
marge-basse : 150px;
bordure : 2px dotted #090;

}
.Poissons div{

/*<!--hauteur:358px-->*/
largeur:300px
flottement:gauche
bordure : 2px pointillé #f00
height : 50px
position : relative

}

Images Coulissantes
.Img6{

/*<!--comportement de block
arrière-plan: pas de répétition-->*/
largeur : 60px;
hauteur : 60px;
position : absolute;
haut : 40px;
gauche : 0;

}
Pas de changement pour .Img6:hover

.Img6:hover{

largeur:300px;
hauteur:300px;
position d'arrière-plan : -60px 0

}
Et pas de changement non plus pour le code html........ ouf!