11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Overlay multiple

Bonjour à tous, et bonne année,

Je commence tout juste dans le domaine et j'ai essayé de faire un site web pour avancer sur mes travaux de master pour l'année prochaine.

Dans ce site, j'aimerais insérer une image sur laquelle il serait possible de cliquer à différents endroits pour voir les définitions de différents termes, sans pour autant changer de fenêtre à chaque fois.
J'ai regardé sur internet, suivi des tutos, et j'ai réussi à faire fonctionner mon overlay avec une image map.
Sauf que comme j'utilise un ID dans mon script (enfin je crois que c'est pour ça), tous mes clics renvoient vers le même overlay... J'ai essayé de faire par ClassName mais ça ne fonctionne pas Smiley decu .

Voici ce que j'ai fait pour l'instant (je suis navrée si c'est brouillon, j'ai commencé à trifouiller là dedans cette semaine): https://jsfiddle.net/87shp6cv/
Lien vers l'image que j'ai utilisée : https://www.zupimages.net/up/20/01/gwcp.png

Merci d'avance pour votre aide,
Une très bonne journée! Smiley smile
Bonsoir,
Merci pour votre réponse.

En fait, dans l'exemple j'ai deux zones cliquables sur l'image. Et j'aimerais avoir des textes différents dans l'overlay de chaque zone. Or, pour l'instant j'ai à chaque fois la définition de Blended Learning et pas celle de Gamification. C'est ça que je ne comprends pas...

Pour tenter d'être plus claire: j'aimerais cliquer sur une zone -> overlay avec la definition de digital learning. Puis une autre zone -> overlay avec la définition de gamification.
Modérateur
Et l'eau,

ici : https://codepen.io/niuxe/pen/OJPzNOG

<img src="https://www.zupimages.net/up/20/01/gwcp.png" usemap="#image-map" class="imgdigitallearning">

	<div id="overlay" onclick="off()">
		<div id="text"><p class="styleoverlay">Blended Learning is a mix of two digital learning processes.</p></div>
	</div>

	<button>
		<map name="image-map">
			<area onclick="on('un texte')" alt="Blended Learning" title="Blended Learning" coords="911,99,77" shape="circle" class="digitallearningoverlay">
			<area onclick="on('un autre texte')" alt="Gamification" title="Gamification" coords="736,55,48" shape="circle" class="gamificationoverlay">   
		</map>
	</button>



.imgdigitallearning{
	}
#overlay{
	position: fixed; 
	display: none; 
	height: 520px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.8); 
	z-index: 2; 
	cursor: pointer; 
	}
.styleoverlay{
	text-align:center;
	font-size:50px;
	color:white;
	}
area{
  background:red;
  cursor:pointer;
}


function on(txt) {
  document.getElementById("overlay").style.display = "block";
  document.querySelector('#text p').textContent = txt;
}

function off() {
  document.getElementById("overlay").style.display = "none";
}

Modifié par _laurent (08 Jan 2020 - 23:49)
Meilleure solution
Sujet clos
Aller à