Tutoriel HTML5: Créer Un Menu Avec Une Image En Mosaïque


Saviez-vous qu’il est possible de découper une image en mosaïque et de vous en servir pour créer un menu ? Voici un exemple de ce qu’il est possible de faire.


Cette galerie peut servir d’alternative à votre menu de navigation habituel. Avec un peu de créativité vous donnerez une nouvelle dimension à votre page d’accueil ou de produits/services.Il suffit de fractionner votre image en quatre segments et de les connecter aux pages de votre choix. Il est bien entendu possible de découper votre image à volonté tant que vous respectez les paramètres présentés ci-dessous.



L’outil en ligne Image Splitter pourra vous être très utile afin de segmenter votre photo. Il vous suffit de l’importer et d’indiquer le nombre de visuels que vous souhaitez générer. Splitter vous renverra votre image sous format zip et en petits morceaux.



Comment Procéder ?






Ajoutez les pages que vous désirez connecter à vos images, et préparez vos liens.




  • Prenez soin de vérifier que vous disposez d’assez de place et organisez vos pages.


  • Sur le menu de gauche : cliquez sur « Ajouter », « Galerie » puis « Grid ».




  • Dans les paramètres, modifiez le nombre de colonnes et de rangées selon vos besoins.


  • Puis, dans la case « En cliquant sur l’image », sélectionnez « Etre dirigé vers un lien spécifique »




  • Cliquez sur « Organiser les images » pour importer les photos que vous avez préparées.




  • Jouez avec l’ordre des morceaux jusqu’au moment où votre puzzle sera en place.


  • Cliquez sur chaque image séparément afin de la configurer. Ajoutez vos titres et descriptions.



  • Allez sur « connecter à un lien » et sélectionnez la page qui répond à vos besoins (dans la catégorie « page »).




  • Une fois votre galerie entièrement organisée, il ne vous reste plus qu’à la personnaliser. Cliquez sur Galerie, puis «Changer Style » et modifiez le design selon vos goûts.




C’est tout, votre menu est en ligne !


Lire aussi: Les ressources d'images gratuites à connaître.


#améliorerwebdesign #conseilspourcréerunsite #éditeurdimagesWix #Photos #portfolio

FR03.png