JavaScript - Carte d'image : Un guide pour les débutants

Salut là, future super star du codage ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde des cartes d'image en JavaScript. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - je serai ton guide attentionné, et nous avancerons pas à pas. À la fin de ce tutoriel, tu seras en mesure de créer des images interactives comme un pro !

Qu'est-ce qu'une carte d'image ?

Avant de plonger dans la partie JavaScript, comprenons ce qu'est une carte d'image. Imagine que tu as une image d'une pizza, et que tu veux que des choses différentes se passent lorsque quelqu'un clique sur différents ingrédients. C'est exactement ce que fait une carte d'image - elle rend des zones spécifiques d'une image cliquables !

Commencer avec HTML

Pour créer une carte d'image, nous commençons par un peu de HTML. Ne t'inquiète pas ; c'est plus simple qu'il n'y paraît !

<img src="pizza.jpg" alt="Pizza délicieuse" usemap="#pizzamap">

<map name="pizzamap">
<area shape="circle" coords="100,100,50" href="#fromage" alt="Fromage">
<area shape="rect" coords="200,50,300,150" href="#pepperoni" alt="Pepperoni">
</map>

Reprenons cela :

• Nous avons une balise <img> qui affiche notre image de pizza.
• L'attribut usemap relie l'image à notre carte.
• À l'intérieur de la balise <map>, nous définissons des zones cliquables avec des balises <area>.
• Chaque <area> a une forme (cercle ou rectangle), des coordonnées et un lien.

Améliorer avec JavaScript

Maintenant, ajoutons un peu de magie JavaScript pour rendre notre carte d'image plus interactive !

Étape 1 : Sélectionner les éléments

Tout d'abord, nous devons saisir nos éléments en utilisant JavaScript :

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

Ce code trouve notre image et toutes les zones cliquables que nous avons définies.

Étape 2 : Ajouter des événements de clic

Maintenant, faisons quelque chose se produire lorsque nous cliquons sur une zone :

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('Vous avez cliqué sur ' + this.alt);
});
});

Ce code ajoute un événement de clic à chaque zone. Lorsqu'on clique dessus, il affiche une alerte avec le nom de l'ingrédient.

Étape 3 : Mettre en évidence les zones

Faisons-en visuel ! Nous allons mettre en évidence la zone lorsque la souris la survole :

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

areas.forEach(area => {
const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

Ce code crée un calque semi-transparent pour chaque zone et le montre/cache lors du survol de la souris.

Mettre tout ensemble

Voici notre code JavaScript complet :

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('You clicked on ' + this.alt);
});

const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

Conclusion

Félicitations ! Tu viens de créer une carte d'image interactive avec JavaScript. Souviens-ti quand je t'ai dit que tu serais capable de créer des images interactives comme un pro ? Eh bien, regarde-toi maintenant !

Voici un résumé rapide de ce que nous avons appris :

1. Nous avons commencé par du HTML de base pour définir notre image et les zones cliquables.
2. Nous avons utilisé JavaScript pour sélectionner ces éléments.
3. Nous avons ajouté des événements de clic pour afficher des alertes lorsque les zones sont cliquées.
4. Nous avons créé un retour visuel avec des calques de surbrillance lors du survol de la souris.

Tableau des méthodes

Voici un tableau des principales méthodes JavaScript que nous avons utilisées :

Méthode	Description
querySelector()	Sélectionne le premier élément qui correspond à un sélecteur CSS
querySelectorAll()	Sélectionne tous les éléments qui correspondent à un sélecteur CSS
addEventListener()	Attache un gestionnaire d'événement à un élément
preventDefault()	Empêche l'action par défaut d'un événement
createElement()	Crée un nouvel élément HTML
appendChild()	Ajoute un nouveau noeud enfant à un élément

Continuez à praticaer et à expérimenter avec ces concepts. Avant de vous en rendre compte, vous créerez tous sorts d'éléments interactifs sur le web. Souvenez-vous, chaque expert a été un débutant à un moment donné. Bon codage !

Credits: Image by storyset