Confectionner son propre diaporama.

Posté le 07/01/10 par GeekandGirl

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="" />

N'oubliez pas de changer les termes fictifs, par vos propres envies !

Catégorie : Tutoriel

Tags : Tutoriel, HTML

Commentaires

Par Anarion le 07/01/10
Géant !!!

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" ^^
Par louise-anne le 07/01/10
Mdr, c'est de ne pas oublier de changer les NB1 et NB2 en nombre de pixel, et les URL par l'URL de tes images, LOL!
Par lillubibi le 07/01/10
Merci! L'effet avec les images est vraiment bien. Il faudra que j'essaie.
Anarion, je pense que les termes ficitfs sont URL1,2,3,4,5 et NB1,2.

En tout cas, merci encore.
Par Anarion le 07/01/10
Voilà, j'ai déjà fais un article. Je vais trop m'éclater avec ça, MERCI ! Et puis j'ai mis un lien pour votre blog =)
Par Jellyka le 07/01/10
Oui les termes fictifs sont bien URL1,2,3,4,5 et NB1,2.
Par The.Long.Way.Home le 07/01/10
Oulalala il va falloir que j'essaye ça assez vite aussi !! J'adore de trop <3 Les effets sont extras, sincèrement !! Merciiii <3 Les filles, vous êtes extras
Par Pseudoo le 10/01/10
C'est sympa. Par contre attention, l'attribut name ne peut-être utilisé avec la balise img. En effet ça ne respecte pas les normes du W3C.
Par maud96 le 10/01/10
Je viens de voir l'efficacité de ce code chez Anarion. C'est pas mal, et surtout merci à vous d'avoir mis ce code en ligne.... Autrefois, il y avait Sakatruc pour ce genre de pépites...
Par Anadyomene le 25/01/10
J'ai un petit souci avec le diaporama, je ne comprend pas trop pourquoi. J'ai fait l'article normalement, je les poster sans souci... puis pof, les vignettes ont disparus avec tout mon texte... Si quelqu'un a la solution ça pourrait être vraiment sympa. MERCI !
Par weasel le 18/02/10
euh... désolé mais j'ai rien compris. On doit mettre ce code où ? changer quoi ? je ne comprend pas -_____-'''
Par Jellyka le 18/02/10
Dans la source HTML de ton article ! :)
Par Tonin-de-jardin le 06/04/10
comment ça se fait qu'on peut mettre que 5 images?
en fait je veux faire une diapo de 12 images... et quand je fait prévisualiser les 12 images passent... mais pas quand j'enregistre l'article.

enfin ducoup je fais 3 diapos de 4 images
Par Tonin-de-jardin le 06/04/10
meme des petites diapos ça marche pas ça me mange tout mon code après la grande image...
Ayant vu il y a quelque peu, Jusqu'en Enfer, le dernier bijou de Sam Raimi, je me suis donc dit, qu'il était peut être temps de retourner à mes sources, et de visualiser une fois pour toutes
J'aime beaucoup l'enlèvement du bold dans les dates des commentaires.
Très bon film à regarder où Anthony Hopkins incarne son rôle de tueur à la perfection.
Dans le module Twitter, les dates de parution de vos Tweets sont aussi mis par défaut.
Par http://www.bestclips.fr le 28/03/16
ceux ne connaissant pas ! Une sorte de belle et la bête revisité à sa façon.
Bonne fin de journée, l'équipe.
Comme vous l'avez sans doute aperçu, le gras de vos dates dans les commentaires est mis par défaut.
Bonne fin de journée, l'équipe.
de cette évasion aérienne.
Par Vans Pas Cher le 27/08/16
réapparaître soudainement.
 









Commentaire :








Votre adresse IP sera enregistrée pour des raisons de sécurité.
 

<< Page précédente | 1 | 2 | 3 | 4 | 5 | Page suivante >>

Créer un podcast