Créer une barre de défilement

Voici un petit effet bien sympathique quand vous avez plusieurs images à montrer : créer une barre de défilement. Cela marche très bien dans les billets !

Ceci nécessite la définition de l'espace intégrale : barre & photos et la définition de la barre en elle-même que l'on peut aussi coloriser. D'où un code un peu long à construire.

Evidemment, n'oubliez pas de stocker vos photos chez un hébergeur et de prendre note de leur adresse.

Le code se fera sous la balise DIV STYLE et les attributs définissant la "scrollbar" sont :

SCROLLBAR-FACE-COLOR : couleur de la barre de défilement
SCROLLBAR-TRACK-COLOR : coulour du fond
SCROLLBAR-ARROW-COLOR : couleur des flèches
SCROLLBAR-3DLIGHT-COLOR : couleur de l'effet 3D des flèches
SCROLLBAR-SHADOW-COLOR : couleur de l'encadrement bas et droite de l'ascenseur
SCROLLBAR-HIGHLIGHT-COLOR : couleur de l'encadrement haut et gauche de l'ascenseur
SCROLLBAR-DARKSHADOW-COLOR : couleur de la bordure de la barre

On utilisera également les attributs WIDHT (pour que ça loge dans mon blog, la valeur que j'ai écrit est de 380 px)et HEIGHT pour définir l'espace nécessaire pour cet effet.
ce qui donne comme code :

<DIV style=" WIDTH: Xpx;HEIGHT: Xpx; OVERFLOW: scroll; COLOR: #b22222; SCROLLBAR-FACE-COLOR :#ffddbb ;SCROLLBAR-TRACK-COLOR :#2233aa ;SCROLLBAR-ARROW-COLOR :#bb0099 ;SCROLLBAR-SHADOW-COLOR :#ee8811 ;SCROLLBAR-HIGHLIGHT-COLOR: #ffbb77; SCROLLBAR-DARKSHADOW-COLOR: #ffbb77; BACKGROUND-COLOR: #000000" align=left>

Ensuite, il faut mettre les photos en utilisant la balise IMG. Pour chaque photo, le code sera

 <img style="WIDTH: (à adapter avec le cadre, valeur en px); HEIGHT: (à adapter avec le cadre)" height="419" alt="" src="URL de la photo" width="550" border="0" />

Enfin, on finit le code en fermant la balise DIV (ou </DIV>)

Ce qui donne :