Discussion :

[webpxis]

Bonjour à tous,

Je suis confronté à un bug de débutant que je n'arrive pas à résoudre....

J'ai une page ou lorsque je passe au dessus d'un bout d'une image, cela m'affiche un DIV avec un petit texte et un lien.
J'ai fais une fonction pour que quand on n'a plus la souris dessus la div s'efface mais sa ne fonctionne pas... et je ne vois pas pourquoi

Auriez vous une idée ?

Le code JS et le HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function fenetre() {
var monCalque=document.createElement('div');
var test =document.getElementById("carteL");
monCalque.setAttribute("class","maclasse");
monCalque.setAttribute("className","maclasse");
monCalque.innerHTML="<ul><li>TEST</li><li>TEST2</li></ul>";
test.appendChild(monCalque);
}
 
function close_fen() {
 
document.getElementById("carteL").removeChild(document.getElementsByClassName("maclasse"));
	}

HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="carteL">
POUET
  <img src="images/carte_principale.jpg" alt="L" width="537" height="546" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="circle" coords="426,16,5" href="#" onmouseover="fenetre();" onmouseout="close_fen();" />
  </map>
</div>

[RomainVALERI]

La méthode getElementsByClassName ne renvoie pas une Node mais une NodeCollection. Il faut lui donner l'indice :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("carteL").removeChild(document.getElementsByClassName("maclasse")[0]);

"0" uniquement si l'élément à supprimer est le seul à avoir cette classe dans ton div. Sinon, ne pars pas dans la chasse au bon indice : donne lui un id à la création et référence-le de la même manière quand tu veux le supprimer ça sera plus clair...

[webpxis]

Merci sa fonctionne niquel mais pas contre je voudrais que le type puisse cliquer sur le contenu de ma div et a peine je bouge le curseur que mon div à disparu... aurait tu un truc pour sa ?

Merci.

[RomainVALERI]

Ben... si l'utilisateur est obligé de sortir de la zone de survol pour aller cliquer sur ta div (ça dépend ou elle est située dans ta page, à toi de nous le dire ^^), effectivement, il va falloir adapter un peu.
Mais ce n'est pas encore à proprement parler un problème technique, plutôt une question d'ergonomie dans la conception de ton interface. Les solutions "possibles" sont multiples, mais toutes ne seront pas adaptées à ton projet. En vrac :

1) ne pas supprimer la div sur le onmouseout actuel, mais sur celui d'une zone plus grande, englobant à la fois la zone à survoler et la div dans laquelle tu veux qu'on puisse cliquer

2) rapprocher la zone de survol et la zone a cliquer

3) ne faire disparaitre la div qu'apres l'execution d'un (plus ou moins long) timer

(il y en a surement plein d'autres ^^)

[webpxis]

Agrandir la zone cliquer ce n'est pas possible... voici un exemple de ma carte.. je dois pouvoir cliquer et avoir un nouveau div pour chaque point de la capture donc il sont très petits...

Tuverrais comment contourner le problème ?

[RomainVALERI]

Agrandir la zone cliquer ce n'est pas possible...

Effectivement ^^ mais ce n'est pas ce dont je parlais...

Pour mieux se comprendre voilà ce que je voulais dire :

Au survol (onmouseover) de cette partie mappée dans ton image, tu fais apparaitre le div, mais tu ne le fais disparaitre (s'il existe) que lors de l'événement onmouseout de ce cadre-là.