Comment expliquer, sans jargon de billetterie, la différence entre une place « catégorie 1 » et une place « catégorie 3 » sur un plan de salle ? Le plus efficace reste souvent une image du plan, sur laquelle chaque zone reste cliquable pour afficher le détail de la catégorie correspondante, sans qu’aucun système de réservation complexe ne soit nécessaire pour cela.
Une salle de spectacle qui veut simplement situer visuellement ses catégories de places, sans pour autant gérer la réservation précise de chaque siège, peut s’appuyer sur la balise HTML native <map>, couplée à des zones définies en champs personnalisés modifiables par l’équipe de la salle elle-même.
Le principe de l’image cliquable native
La balise <map>, associée à des éléments <area>, existe dans le HTML depuis des décennies et permet de définir des zones cliquables sur une image, chacune associée à une action ou un contenu affiché au clic, sans dépendance à une bibliothèque JavaScript tierce.
Stocker les zones en champ répétable
Un groupe de champs répétables ACF, avec pour chaque ligne des coordonnées de zone (forme, coordonnées, catégorie associée), permet à l’équipe de la salle de modifier elle-même le plan sans toucher au code, en ajustant simplement les valeurs depuis l’écran d’édition de la fiche.
$zones = get_field( 'zones_plan_salle' );
// Exemple de structure retournée :
// [
// [ 'forme' => 'poly', 'coordonnees' => '10,10,150,10,150,80,10,80', 'categorie' => 'Catégorie 1' ],
// [ 'forme' => 'poly', 'coordonnees' => '10,90,150,90,150,160,10,160', 'categorie' => 'Catégorie 2' ],
// ]Générer le balisage HTML
Une simple boucle PHP transforme ces champs en balisage <map>, avec une info-bulle native via l’attribut title et un attribut data-categorie exploité ensuite par un script léger pour afficher le détail tarifaire de la catégorie survolée.
echo '<img src="' . esc_url( $image_plan ) . '" usemap="#plan-salle" alt="Plan de la salle">';
echo '<map name="plan-salle">';
foreach ( $zones as $zone ) {
printf(
'<area shape="%s" coords="%s" title="%s" data-categorie="%s" href="#">',
esc_attr( $zone['forme'] ),
esc_attr( $zone['coordonnees'] ),
esc_attr( $zone['categorie'] ),
esc_attr( $zone['categorie'] )
);
}
echo '</map>';Prévoir une légende accessible
- Une liste de catégories affichée sous le plan, avec code couleur cohérent
- Un texte alternatif complet sur l’image pour les technologies d’assistance
- Une description textuelle des zones, en complément du plan visuel seul
Un plan uniquement cliquable, sans alternative textuelle, exclut de fait tout visiteur utilisant un lecteur d’écran. La légende écrite reste indispensable, pas seulement décorative.
Adapter le plan à un écran mobile
Les coordonnées d’une image map restent fixées en pixels sur l’image d’origine, ce qui pose un problème réel sur un affichage responsive où l’image est redimensionnée selon la largeur de l’écran. Une bibliothèque légère de recalcul des coordonnées, ou une image dédiée au format mobile, corrige ce défaut sans complexifier excessivement le dispositif.
Un plan de salle qui fonctionne parfaitement sur ordinateur mais devient inutilisable sur téléphone perd la moitié de son public réel : toujours tester sur un petit écran avant de valider.
Faire évoluer le plan sans casser les zones existantes
Une salle qui réaménage temporairement sa configuration pour un événement particulier a besoin de modifier certaines zones sans perturber la structure d’ensemble. Stocker un identifiant unique par zone, distinct de sa simple position dans le tableau répétable, permet de retrouver et d’ajuster une zone précise même après réorganisation de l’ordre des lignes.
En résumé
Une image map couplée à des champs répétables suffit à donner une vision claire des catégories de places, sans le poids d’un système de billetterie complet. La réservation précise d’un siège individuel reste un chantier bien plus vaste, qui nécessite une gestion fine des disponibilités en temps réel.
