28172 sujets

CSS et mise en forme, CSS3

Ouverture d'une fenêtre modale au passage de la souris sur imagemap

Bonjour,

Je dois faire afficher une fenêtre en css au passage (sans clic) de la souris sur une image map. Depuis ce matin je recherche sur la toile et je ne trouve rien....
Voici le fonctionnel: Ecrire un programme en utilisant uniquement HTML et CSS qui affichera une carte des nouvelles régions de France métropolitaine et qui affichera, dans une fenêtre, la liste des clubs de la région lors du survol de son nom.

J'ai déjà défini sur l'image mes zones mais ensuite je sèche

Merci de votre aide et au plaisir de vous lire Smiley smile
Modérateur
Bonjour,

L'idée est d'ajouter à l'intérieur de la balise <map> des balises (par exemple des <div>) qui contiendront les listes de clubs. Initialement, ces <div> seront cachées. Au survol d'un <area>, le css dira d'afficher la <div> correspondant en utilisant le sélecteur ~.

Ci-dessous un exemple rudimentaire avec les départements autour de Paris, et également visible sur jsfiddle à https://jsfiddle.net/57o2trce/ :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
#p75, #p92, #p93, #p94 {display:none;}
#a75:hover ~ #p75 {display:block;}
#a92:hover ~ #p92 {display:block;}
#a93:hover ~ #p93 {display:block;}
#a94:hover ~ #p94 {display:block;}
</style>
</head>
<body>
<img src="carte.gif" alt="" width="100" height="100" border="0" usemap="#carte">
<map id="carte" name="carte">
<area id="a75" title="Paris" alt="Paris" shape="poly" coords="24,36,23,46,41,54,55,49,50,43,48,32,32,34">
<area id="a92" title="Hauts de Seine" alt="Hauts de Seine" shape="poly" coords="12,53,12,28,25,19,32,29,21,40,29,50,41,57,43,76,37,79,31,75,29,69,18,61">
<area id="a93" title="Seine St Denis" alt="Seine St Denis" shape="poly" coords="26,17,46,15,55,16,67,10,74,19,73,50,53,41,50,31,33,31,31,23,20,20">
<area id="a94" title="Val de Marne" alt="Val de Marne" shape="poly" coords="52,45,71,51,73,76,67,90,56,81,42,75,43,55,55,54">
<div id="p75">Département de Paris</div>
<div id="p92">Département des Haut de Seine</div>
<div id="p93">Département de Seine St Denis</div>
<div id="p94">Département du Val de Marne</div>
</map>
</body>
</html>

Amicalement,
Essayes

<area shape="rect" coords="294,139,319,184" href="https://www.visionphotojura.fr/dijon.php" target="dijon" title="dijon" alt="dijon" style="border:0" onMouseOver="infobulle(this, 'Dijon<center><img class=\'arronde\' src=\'/vignettes/vignette_Dijon.jpg\' /></center>');" onmouseout="localisation.src='cartes/local.jpg'" >
<area shape="rect" coords="733,894,766,933" href="annecy" target="Aucun" title="annecy" alt="annecy" />
<area shape="rect" coords="687,260,706,289" href="https://www.visionphotojura.fr/cleron.php" alt="Cléron" title="Cléron" style="border:0" onMouseOver="infobulle(this, 'Château de<br>Cléron<center><img class=\'arronde\' src=\'/vignettes/vignette_cleron.jpg\' /></center>');" onmouseout="localisation.src='cartes/local.jpg'" >
Sujet clos
Aller à