Dans ce tuto HTML vous découvrirez comment créer des zones cliquables sur une image afin (aussi appelé "image map"). Nous verrons comment définir les zones à rendre cliquables et comment optimiser / améliorer le code généré. Ce tuto est découpé est deux parties :

  • Édition de l'image avec The Gimp et export au format HTML
  • Étude et amélioration du code généré

Jetez un oeil à ces autres tuto HTML

Montage HTML/CSS d’une maquette graphique sur DreamweaverMontage HTML/CSS d’une maquette…
Voici une formation dédiée à la découpe et au montage HTML…

Apprendre XHTML & CSSApprendre XHTML & CSS
Voici une formation XHTLM et CSS, de plus de 9h, en vidéo et…

ConclusionConclusion

Mise en forme du formulaireMise en forme du formulaire…

Montage HTML/CSS d’une maquette graphique sur DreamweaverMontage HTML/CSS d’une maquette…
Voici une formation dédiée à la découpe et au montage HTML…

Apprenez les bases du HTML 2ème partie (avec un peu de CSS)Apprenez les bases du HTML…
Dans ce tuto HTML, nous continuerons l'apprentissage de ce langage…

Formation HTML : l'essentielFormation HTML : l'essentiel…
Voici une formation HTML en vidéo grâce à laquelle vous allez…

Apprendre XHTML & CSSApprendre XHTML & CSS
Voici une formation XHTLM et CSS, de plus de 9h, en vidéo et…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto HTML de 13 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

ReBleach , Formateur

Je m'appelle Jean-Philippe BELLON, passionné par le web, je suis développeur / intégrateur web depuis 5 ans. Convaincu que le web est l'avenir de la programmation j'espère, au travers de mes tutos, vous en convaincre et vous aider. Coté langage j'affectionne le pHp (couplé à du javascript avec jQuery), un petit peu de Ruby On Rails, le JAVA et le VB.NET. Pour de plus amples informations je vous invite à venir consulter mon CV/Portfolio : http://www.jeanphilippebellon.com

Toutes les formations de ReBleach


Témoignage des clients de ReBleach

Merci de tes formations continue :D

Très bon tuto et très utile surtout pour des pages assez lourdes. A recommander

Merci pour ces super tuto que vous nous proposez... Le php devient plus facile avec vous ;)

 

D'autres tuto de ReBleach

Création d'un système de cache simpleCréation d'un système de cache simple
Dans ce tuto PHP en vidéo vous découvrirez comment réaliser un système de cache simple…

Extraction de données d'un fichier txt et insertion en BDDExtraction de données d'un fichier txt et insertion en BDD
Dans ce tuto PHP en vidéo, vous découvrirez comment extraire les données d'un fichier…

Créer des effets sur les images mapCréer des effets sur les images map
Dans ce tuto jQuery vous découvrirez comment réaliser une carte dynamique avec jQuery…

voir tous les tuto de ReBleach

Notes attribuées par les utilisateurs (4 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (6)

par eliandtha voté :
(a téléchargé ce tuto - 25 octobre 2012)

" top top "

par ReBleach
(auteur de ce tuto - 26 juin 2012)

" @golfhubert : j'ai fais un tuto pour ça aussi http://fr.tuto.com/jquery/creer-des-effets-sur-les-images-map-jquery,20035.html

@gsxf750 : pouvez-vous copier coller votre code dans pastebin et poster le lien pour que je puisse faire le debug avec vous ? "

par gsxf750
(a téléchargé ce tuto - 23 juin 2012)

" bonjour

j'ai beau réaliser ma carte cliquable comme dans le tuto, il m'est impossible de l'ouvrir dans mon navigateur, j'ai un magnifique carré blanc :( "

par golfhuberta voté :
(a téléchargé ce tuto - 04 mars 2012)

" Super. C'est un autre "chemin" je pense pour rendre une carte "active". Mais comment changer l'image zone carte en passanr la souris sur un texte "hors carte"? Ex: le Bon coin? "

par jeanclaude16a voté :
(a téléchargé ce tuto - 30 janvier 2012)

" Tutoriel intéressant, la grosse nouveauté pour moi a été de découvir que l'on pouvait mapper une image avec the Gimp.

Très intéressant. "

par swifika voté :
(a téléchargé ce tuto - 26 décembre 2011)

" tres bon "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto HTML d’une durée de 13 minutes a été téléchargé 405 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 27 juin 2011 par ReBleach, contributeur, ayant reçu une note moyenne de 4,7/5 pour l’ensemble de ses vidéos.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !