7 Crédits +d'infos

Tuto Ajouter une bulle d'info enrichie à votre site avec jQuery, CSS


7 Crédits +d'infos

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 !!


Formateur : Adrien Gazaix

Adrien Gazaix a publié 74 tutoriels et obtenu une note moyenne de 4,8/5 sur 17 420 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com

Voir les autres formations de Adrien Gazaix

  • Très rapide pour un résultat SUPER !!! C'est possible d'avoir des tuto sur Bootstrap :)
    mrmoustache, 19/09/2014
  • Très pédagogique, bourré d'astuces (pour un débutant) - Super Tuto
    gb4752, 10/01/2013
  • Encore une fois, très enrichissante et agréable à suivre cette formation ! Mais j'ai quelques soucis que je n'arrive pas à régler, vu que je débute et que j'ai encore beaucoup à apprendre. - en agrandissant une image, le numéro (5of40) est partout sur toutes les images. Comment modifier cette pagination, si j'ai 50 ou 60 images par exemple, et aussi pour que le numéro s'adapte à l'image (4 of 60) ou 7 of 60), etc ... - comment faire en sorte de ne prévoir que 8 images par page, si dans mon cas j'en ai plusieurs et que je veux que chaque groupe de 8 image ne s'affiche que sur une page. - quand je clique sur agrandir, j'ai l?image "big" noire qui s'affiche au lieu de l?image agrandie. -comment personnaliser le contenu texte de chaque image. Merci d'avance pour votre réponse qui me serait certainement d'une grande aide, c'est vraiment Urgent !
    samellite, 14/08/2012

  • Quel est le niveau requis pour suivre ce tuto ?
    débutant