Avant-Propos
Bonsoir cher(e)s Cowblogueurs, Cowblogueuses,
Après quelques semaines de longues recherches acharnées, nous avons enfin trouvé LE code à insérer dans votre HTML. C'est un code très simple à utiliser, qui va vous permettre de fabriquer des diaporamas avec vos photos préférées !
Pour avoir des exemples, regarder un peu les photos des deux articles suivants :
✿. L'exemple de Coraline.
✿. L'exemple d'Old Boy.
Introduction
Avant de commencer toutes explications, du pourquoi, du comment, est construit ce code, il vous faut au maximum 5 URL d'images à insérer dans le diaporama. On les nommera donc :
URL1, URL2, URL3, URL4, et URL5.
Bien entendu, vous remplacerez ces termes par les véritables URL de vos images.
Explications
Le code se décompose en deux parties :
✿. La première qui regroupe l'image principale, en clair, celle qui apparaîtra, la première, en grand dans le diaporama.
✿. La seconde qui regroupe les cinq vignettes au maximum, c'est-à-dire, les images miniaturisées qui se situent sous l'image principale.
On distingue ces deux parties, grâce aux deux <br /> situé entre les deux.
Remarque :
✿. Le NB1 représente la largeur de l'image principale.
✿. Le NB2 représente la largeur des images des vignettes.
Attention, le NB2 doit être le même pour toutes les vignettes.
Le code à insérer
<img style="width: NB1px;" name="diapo" src="URL1" alt="" />
<br />
<br />
<img style="width: NB2px;" onmouseover='diapo.src="URL1" ' src="URL1" alt="" /> <img style="width: NB2px;" onmouseover='diapo.src="URL2" ' src="URL2" alt="" /> <img style="width: NB2px;" onmouseover='diapo.src="URL3" ' src="URL3" alt="" /> <img style="width: NB2px;" onmouseover='diapo.src="URL4" ' src="URL4" alt="" /> <img style="width: NB2px;" onmouseover='diapo.src="URL5" ' src="URL5" alt="" />
<br />
<br />
<img style="width: NB2px;" onmouseover='diapo.src="URL1" ' src="URL1" alt="" /> <img style="width: NB2px;" onmouseover='diapo.src="URL2" ' src="URL2" alt="" /> <img style="width: NB2px;" onmouseover='diapo.src="URL3" ' src="URL3" alt="" /> <img style="width: NB2px;" onmouseover='diapo.src="URL4" ' src="URL4" alt="" /> <img style="width: NB2px;" onmouseover='diapo.src="URL5" ' src="URL5" alt="" />
N'oubliez pas de changer les termes fictifs, par vos propres envies !
Merci énormément l'équipe pour cet article qui va énormément me servir pour exposer mes photographies ! Je test tout de suite !!! Par contre, j'ai pas compris la fin de l'article quand vous dîtes "N'oubliez pas de changer les termes fictifs" ^^