Ajouter une bulle d'info enrichie à votre site
ERROR
00:00
00:00

TUTO Ajouter une bulle d'info enrichie à votre site

Adrien Gazaix
7,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto jQuery en vidéo, nous allons voir comment créer une bulle d'info enrichie qui apparaitra au survol de votre souris sur un élément de votre site ou portfolio.

Nous verrons dans ce tuto jQuery :

  • Créer la structure HTML de la liste des images
  • Créer une div qui accueillera les informations (titre, description, icônes...)
  • Styliser cette boîte pour qu'elle passe par-dessus l'image
  • Styliser le contenu textuel
  • Télécharger une nouvelle police et l'ajouter dans notre CSS
  • Positionner des éléments en absolu
  • Utiliser les backgrounds pour afficher les icônes
  • Changer un curseur
  • Ajouter un script javascript pour créer une infobulle
  • Styliser cette infobulle dans le CSS
  • Ajouter une flèche à celle-ci grâce à une nouvelle pseudo-classe CSS3
  • Créer un script js pour faire apparaître notre boîte de contenu au passage de la souris sur l'image
  • Utiliser une fonction de jquery pour dupliquer l'image survolée à coté de notre paragraphe
  • Ajouter une boucle en PHP pour afficher les 40 images
  • Modifier le CSS pour qu'elles s'affichent côte à côte sans espace blanc autour des images
  • Ajouter et modifier un script de lightbox pour l'adapter au site
  • Rendre les catégories aléatoires sur les 40 images à l'aide d'une fonction random de PHP

Vous trouverez dans les sources tous les fichiers créés pour ce tutoriel. Bon tuto !!

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Ajouter une bulle d'info enrichie à votre site

Plan détaillé du cours

Leçon 1Ajouter une bulle d'info enrichie à votre site
1h23m

Avis des apprenants

Détail des avis
352
Apprenants
18
Commentaires
5/5
Note moyenne
5/5
16
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 05/04/2021
Un tuto très intéressant et où on apprend beaucoup. Comme toujours Adrien nous explique bien tout de A à Z et dans un rythme ni trop lent ni trop rapide. Je pense que depuis les choses ont un peu évolué, mais le principe reste le même. Je ne suis pas convaincue sur la question des catégories, C'est aléatoire et ça ne peut pas forcément respecter le sujet de l'image (et sur des fausses images c'est pas parlant). Juste un point négatif : une vidéo de 1h23 ça le fait pas. Il aurait été préférable de créer plusieurs vidéos en répartissant les infos par étapes. Merci en tout cas pour ce partage.
Salvatore Piredda
Salvatore Piredda
Publié le 04/11/2017
Toujours un grand plaisir de suivre ses cours. Le travail fourni est de grande qualité.
Adrien Gazaix
Adrien Gazaix
Merci c'est sympa ! J'essaie de me mettre à la place d'un vrai débutant quand je fais mes tuto, donc si vous avez tout suivi c'est super. À bientôt pour d'autres tuto.
Cosmoce
Cosmoce
Publié le 09/08/2016
Toutes les étapes sont bien expliquées

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

jQuery , CSS 3

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données