Détruire/supprimer une area

Version imprimable

01/03/2008, 16h37
Kalseln

Détruire/supprimer une area

Bonjour,

Je cherche désespérément la syntaxe pour détruire ou supprimer ou effacer de la page une area.
01/03/2008, 17h12
julien.63

salut,
je ne sais pas vraiment ce que tu appelles une area.
Mais pour cacher un élément d'une page tu peux utiliser

Code:

tonElement.style.display ="none";

ou

Code:

tonElement.style.visibility="hidden";
01/03/2008, 17h34
Kalseln

Une <area...> c'est une zone définie par des positions et qui doit faire partie d'une balise <map...> qui elle même fait référence à une image. Utile pour faire des zones cliquables d'autres formes que carrées. Voici une de mes zones octogonales :

Code:

<area shape="poly" coords="336,194,383,188,419,205,406,229,359,235,324,218" />

Ce que j'essaie de faire c'est un "onclick" qui commence par enlever la possibilité de recliquer sur la même zone ou une autre zone. Donc j'avais pensé à supprimer carrément la zone ou enlever le href des zones mais je ne trouve pas comment faire.

J'ai essayé par exemple

Code:

this.delete();

ça ne fait rien.

Je viens d'essayer

Code:

this.style.display ="none";

ça ne marche pas non plus.
01/03/2008, 18h20
Auteur

display et visibility sont des attributs pour afficher ou cacher un élement.

Le mieux est de supprimer le noeud en utilisant removeChild().

ça m'a l'air d'être une bonne piste, merci pour vos réponses au fait.
Mais est-ce que tu pourrais me donner un exemple de suppression d'une div par exemple ? ou si tu connais un site qui en parle ...
Je n'arrive à trouver que des exemples avec removeChild() de suppression d'éléments dans un "select".

Edit:
Non c'est bon j'ai trouvé comment ça marche. Exemple avec des divs :
Code:

1 2 3 4 5 <div id="b"> <div id="a" style="left:100px;top:100px;height:50px;width:50px;background-color:blue;"></div> </div> <a href="#" onclick="document.getElementById('b').removeChild(document.getElementById('a'));">Supprimer la zone</a>
Il ne me reste plus qu'à adapter pour mes area (que je génère grâce à 4 boucles for...)

supprime ton area comme tu supprimes ton div ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function supprArea()
{
    var noeudAera = document.getElementById("idPoly");
    document.getElementById("ImageMap").removeChild(noeudAera);
}
//-->
</script>
 
</head>
 
<body>
 
<img src="map.jpg" style="width:200px; height:200px; border: none" usemap="#map" />
 
<map id="ImageMap" name="map">
    <area shape="rect" coords="21,20,48,104" alt="Rectangle" href="http://www.page.htm" />
    <area shape="circle" coords="45,162,27" alt="Cercle" href="http://www.page.htm" />
    <area id="idPoly" shape="poly" coords="78,68,77,61,114,48,114,141,132,141,132,146,83,146,84,138,100,139,101,58" alt="Polygone" href="http://www.page.htm" />
</map>
 
<br />
<input type="button" value="Bouton" id="idButton" onclick="supprArea()" />
 
 
</body>
 
</html>

Après le clic sur le bouton, l'area polygone n'existe plus :)

Petite parenthèse : les options du select ne sont pas supprimées avec removeChild(). L'objet select possède ses propres fonctions d'ajout et suppression des options ;)

03/03/2008, 00h28
Kalseln

C'est bon ça fonctionne. :D
Merci bien.

Pour les select je n'ai pas vraiment regardé quand j'ai vu que c'était compliqué, je saurai si j'en ai besoin un jour.

un exemple d'ajout et de suppression des options dans un select (il n'y a rien de compliqué) ;) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function addItem()
{
 /*op = new Option("Text","Value",false,false);
 alert(op.text+" "+op.value); */
 
 
 var combo = document.getElementById("combo");
 var Valeur = document.getElementById("idAjValeur").value;
 var Texte = document.getElementById("idAjTexte").value;
 var Pos = document.getElementById("idAjPos").value;
 
 if (parseInt(Pos).toString()==Number.NaN.toString())
    Pos = "0";
 
 
 var op = new Option(Texte, Valeur,false,false);
 combo.options.add(op,Pos);
 
}
 
function removeItem()
{
  var posSuppr = document.getElementById("idSupprPos").value;
  var combo = document.getElementById("combo");
  combo.remove(posSuppr);
 
}
//-->
</script>
 
</head>
 
<body>
<h3>Ajout d'une option :</h3>
Valeur :
<input type="text" value="Valeur" id="idAjValeur" size="20" maxlength="10">(Sans espace)
<br>
Option :
<input type="text" value="NomOption" id="idAjTexte" size="20" maxlength="10">
<br>
Index :
<input type="text" value="0" id="idAjPos" size="20" maxlength="10">(Laiser vide pour ajout en haut de liste)<br>
<br>
<input type="button" value="Ajouter" onclick="addItem()"><br><br><br>
 
<h3>Suppression d'une option :</h3>
Index : <input type="text" value="0" id="idSupprPos" size="10" maxlength="5">
<input type="button" value="Enlever" onclick="removeItem()">
 
<br><br>
 
 
<!-- Il faut au moins une option dans le select pour que la page soit valide W3C -->
<select size="10" id="combo">
<option value="defaut">Valeur par défaut</option>
</select>
 
 
 
</body>
 
</html>

Une remarque :
Pour que la page passe la validation W3C, il faut ajouter le doctype, mais surtout il faut que le select possède au moins 1 option.