5568 sujets

Sémantique web et HTML

[Résolu] HTML/JS balises HTML n'apparaissent pas en mode Hover

Bonjour,

Comme le titre n'est pas très parlant, je précise ici.
J'ai un petit code HTML qui permet d'afficher une carte de France. Cette carte est divisée par départements (images SVG). Chaque département est censé afficher un bloc avec du texte au survol de la souris.

Le bloc et le texte apparaissent bien mais quand je mets le texte entre des balises HTML (pour la mise en forme), le texte n'apparait plus.
Quelqu'un pourrait m'expliquer pourquoi ce n'est pas pris en compte ?

Merci pour vos retours Smiley smile

Pour mieux comprendre, voici le code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>

<body style="width:1000px;">
<!-- LE BLOC TEXTE -->
<div class="mh-menu">
	<div id="dep-75" style="display:none;">Texte sans balises HTML<h2>TITRE</h2><span>Rencontre avec députés - 31/01/2019 - 13/02/2019</span><aside>1. Rencontre avec Casimir<br>2. Groupe de travail</aside></div>
</div>

<!-- LES DEPARTEMENTS -->
<div class="map" id="map">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 612 585">
	<defs>
		<style type="text/css">
			.land
			{
				fill: #CCCCCC;
				fill-opacity: 1;
				stroke:white;
				stroke-opacity: 1;
				stroke-width:0.5;
			}
		</style>

		<amcharts:ammap projection="mercator" leftLongitude="-5.181900" topLatitude="51.089515" rightLongitude="9.560929" bottomLatitude="41.366975"></amcharts:ammap>

	</defs>
	<g>
		<a href="#" onMouseOver="document.getElementById('dep-75').style.display='block';" onMouseOut="document.getElementById('dep-75').style.display='none';"><path id="FR-75" title="Ville de Paris" class="land" d="M311.53,141.03L314.45,141.07L315.23,143.69L315.23,143.69L315.27,145.18L317.5,144.8L317.16,145.98L314.7,145.24L311.9,146.11L311.9,146.11L307.49,143.87L308.32,142.55L309.4,143.18z" cursor="pointer"/></a>
	</g>
</svg>
</div>

</body>
</html>
Bonjour,

Vous ciblez un élément par son son id dans 
<a href="#" onMouseOver="document.getElementById('dep-75').style.display='block';" onMouseOut="document.getElementById('dep-75').style.display='none';">


Mais où est l'élément <element id="dep-75"> ?
Greg_Lumiere a écrit :

Mais où est l'élément &lt;element id="dep-75"&gt; ?


Plus haut dans le code ^^
<!-- LE BLOC TEXTE -->
<div class="mh-menu">
	<div id="dep-75" style="display:none;">Texte sans balises HTML<h2>TITRE</h2><span>Rencontre avec députés - 31/01/2019 - 13/02/2019</span><aside>1. Rencontre avec Casimir<br>2. Groupe de travail</aside></div>
</div>
Ok, autant pour moi je ne l'avais pas vu Smiley confused


Là comme ça je ne vois pas ce qui coince avec le JS. Néanmoins je m'interroge sur la nécessité d'employer ce langage là où le CSS suffirait amplement:
[id^="dep-"] {
  display: none;
}
[id^="dep-"]:hover {
  display: block;
}
Modérateur
Bonjour,
Greg_Lumiere a écrit :
Là comme ça je ne vois pas ce qui coince avec le JS. Néanmoins je m'interroge sur la nécessité d'employer ce langage là où le CSS suffirait amplement:
[id^="dep-"] {
  display: none;
}
[id^="dep-"]:hover {
  display: block;
}

L'idée est bonne. Mais ici, un hover sur un élément qui a un display:none, et qui donc n'est pas affiché dans la page, ne va pas fonctionner.

Dans le html, il faudrait mettre le div d'un département (les div qui ont pour id "dep-nn") juste après le svg qui le représente sur la carte.

Alors, en reprenant l'idée de Greg_Lumiere, le code suivant devrait fonctionner :
svg+[id^="dep-"] {
  display: none;
}
svg:hover+[id^="dep-"] {
  display: block;
}


Amicalement,
Modifié par parsimonhi (29 Jan 2019 - 13:04)
Modérateur
Bonjour,

Remarque en passant : quelque soit la solution retenue, il faudrait retirer le display:none dans <div id="dep-75" style="display:none;">, et mettre ce display:none dans le css.

C'est surement ça qui empêche la solution en js de fonctionner, car ce display:none aura la priorité sur les display modifiés par js.

Amicalement,
Merci pour vos réponses !

J'ai modifié le code HTML et CSS comme vous me l'indiquez mais cela ne fonctionne pas vraiment car le display:none n'est pas pris en compte dans le <div id="dep-75">. Du coup je en peux tester si le Hover fonctionne puisque le bloc est déjà en place ^^

Voici le HTML
<div class="mh-menu">
	<div id="dep-75">Texte sans balises HTML<h2>TITRE</h2><span>Rencontre avec députés - 31/01/2019 - 13/02/2019</span><aside>1. Rencontre avec Casimir<br>2. Groupe de travail</aside></div>
</div>

<div class="map" id="map">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 612 585">
	<defs>
		<amcharts:ammap projection="mercator" leftLongitude="-5.181900" topLatitude="51.089515" rightLongitude="9.560929" bottomLatitude="41.366975"></amcharts:ammap>
	</defs>
	<g>
		<a href="#"><path id="FR-75" title="Ville de Paris" class="land" d="M311.53,141.03L314.45,141.07L315.23,143.69L315.23,143.69L315.27,145.18L317.5,144.8L317.16,145.98L314.7,145.24L311.9,146.11L311.9,146.11L307.49,143.87L308.32,142.55L309.4,143.18z" cursor="pointer"/></a>
	</g>
</svg>
</div>


Et le CSS
svg+[id^="dep-"] {
  display: none;
}
svg:hover+[id^="dep-"] {
  display: block;
}


J'ai l'impression que le css fait référence au <svg> et non au <div> qui doit être affiché/masqué... ? Smiley confused
Modifié par cevichero (29 Jan 2019 - 13:52)
Modérateur
Bonjour,

Amélioration de la solution css : il faudrait rajouter un pointer-events: none; sur les div id="dep-nn" pour éviter un scintillement désagréable.

svg+[id^="dep-"] {
  display: none;
  pointer-events: none;
}
svg:hover+[id^="dep-"] {
  display: block;
}


Ou bien (au cas où il faudrait pouvoir cliquer sur quelque chose dans ces div) rajouter un display:block sur ces div lorsqu'ils sont déjà affichés et qu'on fait un hover dessus.

svg+[id^="dep-"] {
  display: none;
}
svg:hover+[id^="dep-"],
svg+[id^="dep-"]:hover {
  display: block;
}

Amicalement,
Modifié par parsimonhi (29 Jan 2019 - 13:54)
Merci Parsimonhi,

J'ai modifié le code HTML et CSS comme vous me l'indiquez mais cela ne fonctionne pas vraiment car le display:none n'est pas pris en compte dans le <div id="dep-75">. Du coup je en peux tester si le Hover fonctionne puisque le bloc est déjà en place ^^

Vois mon message précédent. Nos posts se sont sûrement croisés.
Je n'ai réussi à faire fonctionner les CSS.
Surtout, le problème initial perdure. A savoir : Le bloc et le texte apparaissent bien mais quand je mets le texte entre des balises HTML (pour la mise en forme), le texte n'apparait plus.

Quelqu'un a une idée svp ?
J'ai l'impression qu'on s'est fourvoyé, l'élément à afficher est en amont dans le code de l'élément à survoler...

Je dois partir mais si j'ai un peu le temps ce soir, je repasserai.

++
Modérateur
Bonjour,

Pour le css, ça dépend du reste du code html.

Est-ce qu'il y a un svg par département, ou seulement un svg pour l'ensemble des départements avec plein de path à l'intérieur du svg ? (j'ai supposé qu'il y avait un svg par département, mais à la réflexion, ce n'est sans doute pas le cas).

Pour faire fonctionner le code initial avec javascript :
1) On oublie le code css avec les :hover,
2) Dans le css (par exemple dans une balise style dans la partie head de la page), on met simplement :

  [id^="dep-"] {
    display: none;
    pointer-events: none;
  }
}

3) Dans le html, on remplace :
<div id="dep-75" style="display:none;">

par
<div id="dep-75">


Exemple de code complet :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<style>
div.map {
	width: 612px;
	height: 585px;
	background: #ccc;
}
[id^="dep-"] {
	position: absolute;
	padding: 1em;
	background: green;
	color: white;
}
[id^="dep-"] {
  display: none;
  pointer-events: none;
}
svg {
	display: block;
	width: 612px;
	height: 585px;
}
</style>
</head>
<body>
<div id="dep-75">Texte sans balises HTML<h2>TITRE</h2><span>Rencontre avec députés - 31/01/2019 - 13/02/2019</span><aside>1. Rencontre avec Casimir<br>2. Groupe de travail</aside></div>
<div class="map" id="map">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 612 585">
		<a href="#" onMouseOver="document.getElementById('dep-75').style.display='block';" onMouseOut="document.getElementById('dep-75').style.display='none';">
			<path id="FR-75" title="Ville de Paris" class="land" d="M311.53,141.03L314.45,141.07L315.23,143.69L315.23,143.69L315.27,145.18L317.5,144.8L317.16,145.98L314.7,145.24L311.9,146.11L311.9,146.11L307.49,143.87L308.32,142.55L309.4,143.18z" cursor="pointer"></path>
		</a>
	</svg>
</div>
</body>
</html>

Amicalement,
parsimonhi a écrit :
Pour le css, ça dépend du reste du code html.
Est-ce qu'il y a un svg par département, ou seulement un svg pour l'ensemble des départements avec plein de path à l'intérieur du svg ? (j'ai supposé qu'il y avait un svg par département, mais à la réflexion, ce n'est sans doute pas le cas).

Merci pour ton retour.
Je crois que ta première impression était la bonne ! Il y a bien un seuls <svg> mais autant de <a><path> que des départements. Je n'ai pas tout mis dans mon code pour ne pas effrayer les foules ^^

Du coup, ça marche (youpi Smiley biggrin ) avec un seul departement mais pas 95... Que dois-je modifier dans les CSS ?
Modérateur
Bonjour,
Greg_Lumiere a écrit :
J'ai l'impression qu'on s'est fourvoyé, l'élément à afficher est en amont dans le code de l'élément à survoler...

C'est pour ça que j'avais suggéré dans un post précédent de placer les div à afficher après les svg (s'il y a un svg par département). Mais s'il n'y a qu'un svg et plein de path (un par département), il n'est pas clair qu'on puisse le faire avec une solution en css uniquement.

Amicalement,
Modérateur
Bonjour,
cevichero a écrit :
Du coup, ça marche (youpi Smiley biggrin ) avec un seul departement mais pas 95... Que dois-je modifier dans les CSS ?

Bon, on avance. Smiley cligne

Quel est ton extrait de code html avec le 95 et le 75 ?

Amicalement,
parsimonhi a écrit :
Quel est ton extrait de code html avec le 95 et le 75 ?

Merci pour ton temps ^^
Voici le code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<style>
div.map {
	width: 612px;
	height: 585px;
	background: #ccc;
}
[id^="dep-"] {
	position: absolute;
	padding: 1em;
	background: green;
	color: white;
}
[id^="dep-"] {
  display: none;
  pointer-events: none;
}
svg {
	display: block;
	width: 612px;
	height: 585px;
}
</style>
</head>
<body>
<div id="dep-75">Texte sans balises HTML<h2>TITRE</h2><span>Rencontre avec gens - 31/01/2019 - 13/02/2019</span><aside>1. Rencontre avec Casimir<br>2. Groupe de travail</aside></div>
<div id="dep-95">Texte sans balises HTML<h2>95</h2><span>Rencontre avec gens - 31/01/2019 - 13/02/2019</span><aside>1. Rencontre avec Casimir<br>2. Groupe de travail</aside></div>
<div class="map" id="map">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 612 585">
		<a href="#" onMouseOver="document.getElementById('dep-75').style.display='block';" onMouseOut="document.getElementById('dep-75').style.display='none';"><path id="FR-75" title="Ville de Paris" class="land" d="M311.53,141.03L314.45,141.07L315.23,143.69L315.23,143.69L315.27,145.18L317.5,144.8L317.16,145.98L314.7,145.24L311.9,146.11L311.9,146.11L307.49,143.87L308.32,142.55L309.4,143.18z" cursor="pointer"></path></a>
		<a href="#" onMouseOver="document.getElementById('dep-95').style.display='block';" onMouseOut="document.getElementById('dep-95').style.display='none';"><path id="FR-95" title="Val-d'Oise" class="land" d="M285.85,120.07L286.26,119.49L287.35,120.55L286.3,121.67L287.42,123.28L289.99,123.01L290.35,123.76L291.37,123.55L291.31,124.35L296.11,123.96L297.15,123.12L298.23,123.61L301.51,121.43L302.15,122.71L303.5,122.48L303.81,123.41L304.29,122.81L305.23,124.39L307.22,123.39L307.58,125.14L310,124.63L311.17,122.94L312.99,125.37L313.71,124.63L316.41,125.46L316.17,126.28L317.24,125.81L319.06,127.27L318.5,127.99L320.24,128.4L321.15,126.86L321.31,128.48L322.65,129.65L322.65,129.65L321.77,130.85L322.8,131.71L320.79,133.22L321.01,133.96L321.01,133.96L318.5,136.69L316.39,137.61L313.35,136.4L312.06,137.41L310.51,136.86L309.85,137.88L309.85,137.88L306.49,140.49L306.49,140.49L306.65,137.78L305.38,137.64L304.99,135.71L303.13,135.22L303.15,133.61L299.11,134.84L297.82,133.35L295.56,133.34L294.32,131.69L293,133.62L291.97,132.62L292.58,131.11L291.11,129.89L286.66,131.89L284.58,129.78L281.9,129.82L281.9,129.82L283.93,126.4L284.62,121.36z" cursor="pointer"/></a>
	</svg>
</div>
</body>
</html>
Modérateur
Bonjour,

Ton code marche chez moi (Mac Os, chrome ou Safari ou Firefox).

Amicalement,
ça marche en effet !
Merci pour ton coup de main Parsi, tu me sauves !

Au fait, tu vas où ? Je fais référence à l'idéogramme Smiley smile
Modérateur
Bonjour,
cevichero a écrit :
Au fait, tu vas où ? Je fais référence à l'idéogramme Smiley smile

Il signifie "jeu de go" en japonais.

Amicalement,
Modérateur
Bonjour,
parsimonhi a écrit :
C'est pour ça que j'avais suggéré dans un post précédent de placer les div à afficher après les svg (s'il y a un svg par département). Mais s'il n'y a qu'un svg et plein de path (un par département), il n'est pas clair qu'on puisse le faire avec une solution en css uniquement.


Finalement, pour ceux que ça intéresse, j'ai réussi à faire fonctionner une version en css uniquement avec un seul svg et un path par département, en utilisant une balise appelée foreignObject insérée après chaque path, et incluant le div donnant des informations sur le département correspondant au path qui le précède.

Je n'ai pas vérifié la compatibilité dans les détails. Ça marche au moins avec Chrome et Safari sur Mac OS (ne marche pas avec Firefox, pas encore trouvé pourquoi).

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<style>
div.map {
	position: relative;
}
svg {
	display: block;
	width: 612px;
	height: 585px;
	background: #9cf;
}
path {
	fill: green;
}
path:hover {
	fill: orange;
}
foreignObject>div {
	position: absolute;
	display: none;
	padding: 1em;
	min-width: 10em;
	background: blue;
	color: white;
}
path:hover+foreignObject>div {
  display: block;
}
</style>
</head>
<body>
<div class="map" id="map">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 612 585">
		<path id="FR-75" title="Ville de Paris" class="land" d="M311.53,141.03L314.45,141.07L315.23,143.69L315.23,143.69L315.27,145.18L317.5,144.8L317.16,145.98L314.7,145.24L311.9,146.11L311.9,146.11L307.49,143.87L308.32,142.55L309.4,143.18z" cursor="pointer"></path>
		<foreignObject>
			<div id="dep-75">Texte sans balises HTML<h2>75</h2><span>Rencontre avec députés - 31/01/2019 - 13/02/2019</span><aside>1. Rencontre avec Casimir<br>2. Groupe de travail</aside></div>
		</foreignObject>
		<path id="FR-95" title="Val-d'Oise" class="land" d="M285.85,120.07L286.26,119.49L287.35,120.55L286.3,121.67L287.42,123.28L289.99,123.01L290.35,123.76L291.37,123.55L291.31,124.35L296.11,123.96L297.15,123.12L298.23,123.61L301.51,121.43L302.15,122.71L303.5,122.48L303.81,123.41L304.29,122.81L305.23,124.39L307.22,123.39L307.58,125.14L310,124.63L311.17,122.94L312.99,125.37L313.71,124.63L316.41,125.46L316.17,126.28L317.24,125.81L319.06,127.27L318.5,127.99L320.24,128.4L321.15,126.86L321.31,128.48L322.65,129.65L322.65,129.65L321.77,130.85L322.8,131.71L320.79,133.22L321.01,133.96L321.01,133.96L318.5,136.69L316.39,137.61L313.35,136.4L312.06,137.41L310.51,136.86L309.85,137.88L309.85,137.88L306.49,140.49L306.49,140.49L306.65,137.78L305.38,137.64L304.99,135.71L303.13,135.22L303.15,133.61L299.11,134.84L297.82,133.35L295.56,133.34L294.32,131.69L293,133.62L291.97,132.62L292.58,131.11L291.11,129.89L286.66,131.89L284.58,129.78L281.9,129.82L281.9,129.82L283.93,126.4L284.62,121.36z" cursor="pointer"/>
		<foreignObject>
			<div id="dep-95">Texte sans balises HTML<h2>95</h2><span>Rencontre avec gens - 31/01/2019 - 13/02/2019</span><aside>1. Rencontre avec Casimir<br>2. Groupe de travail</aside></div>
		</foreignObject>
	</svg>
</div>
</body>
</html>

Amicalement,
Sujet clos
Aller à