Images Mobiles 2011

l'image "Bonettes"

Coulissement de deux images de même taille fusionnées

Deux images de 175px*160px sont fusionnées en une seule image de 350px*160px. L'image d'arrière-plan est positionnée initialement à 0px-0px, au survol elle est déplacée vers la gauche de -175px.

On applique à <a> la class Bonettes dont les propriétés figurent ci-dessous.

Code html ci-dessous :

l'image "Belem"

Une seule image qui n'apparait qu'au survol

L'élément <div> qui contient les deux images mobiles "Belem" et "Phare Carré" est placé position relative, elle est mise en évidence ici par une bordure rouge.

Dans l'état a, la zone réactive est un rectangle transparent de 150px*17px, mis en évidence ici par une bordure bleue. il est placé en position absolute par rapport à la <div> et recouvre une partie de la ligne incluant le mot "BELEM".

Attention, dans ce cas le mot "BELEM" n'est pas placé entre les balises <a> car il serait sorti du flux et ne s'insèrerait plus dans le texte.

Dans l'état a : hover, le rectangle prend les dimensions 354px*383px, il reçoit l'image d'arrière-plan Belem.png et un cadre de 2px qui ménage en partie basse un espace transparent permettant de lire le texte.

L'image est repositionnée en haut et à gauche par des valeurs négatives.

On applique à <a> la class Belem dont les propriétés figurent ci-dessous.

Code html ci-dessous :

l'image "Royal clipper"

Coulissement de deux images de tailles différentes fusionnées

Cette image est empruntée à la page "Cinq Mâts Carré", de Gérard DUJARDIN.

Une vignette de 60px*40px et une image de 480px*320px sont fusionnées en une seule image de 540px*320px. L'image d'arrière-plan est positionnée initialement à 0px-0px, au survol elle est déplacée vers la gauche de -60px.

Ces images coulissantes sont placées dans les list-items, mis en évidence ici par une bordure rouge, d'une liste class="Liste3".

Pour éviter un déplacement par la grande image des éléments placés dans le flux, l'image coulissante doit être positionnée en position absolute, dans chaque list-item positionné en position relative.

Les propriétés de ces list-items leurs sont attribuées par la class="VignetteCoul".

On applique à <a> la class ImgCoul dont les propriétés figurent ci-dessous :

Quand la grande image se déploit, elle doit recouvrir les list-items placés après elle. Chaque image est donc dotée d'un z-index d'une valeur supérieure à celui de l'image suivante.

L'image d'arrière-plan, différente pour chaque list-item, est appelée dans le style en ligne. Code html ci-dessous :

l'image "voilure d'un Trois Mâts Carré"

Apparition d'images par le jeu display:none/display:block

Il s'agit de faire apparaître sur l'image du voilier Cutty Sark, la voile dont on clique le nom dans le tableau situé sous l'image.
"Incredible Sherlock, mais comment se fait-ce? Bof! Élémentaire mon cher Watson"

  1. L'image Voilure/CuttySark500.jpg
    • Comportement block
    • Largeur 500px
    • Hauteur 331px
    • Marge Gauche 42px
    • Marge Basse 20px
  2. Le tableau des voiles

Tout d'abord nous crééons une <div>, mise en évidence ici par une bordure rouge,à laquelle nous attribuons la propriété position : relative. Dans cette <div> nous plaçons :

Pour chacune des vingt-trois voiles, nous avons crée préalablement une image .png par détourage de l'image d'arrière-plan CuttySark500.jpg et de même taille que celle-ci.

Dans chaque case du tableau est placé un lien <a> qui contient le nom de la voile et une image class="GImage"

Dans l'état a, les caractéristiques dimensionnelles et le positionnement de l'image GImage (matérialisée dans l'image ci-dessous, par une bordure pointillée bleue) sont définis, mais l'affichage de celle-ci est annulé par la propriété display : none.

Dans l'état a : hover, l'image s'affiche grâce à la propriété display : block.

Les propriétés de la class GImage, figurent ci-dessous.

L'image d'arrière-plan, différente pour chaque image, est appelée dans le style en ligne de chaque case du tableau . Ci-dessous, code html pour l'exemple du Grand Cacatois :