Click droit sur une map html

Version imprimable

05/10/2010, 14h33
silverfly

Click droit sur une map html

Bonjour,

Je cherche à "capturer" le clic droit sur une map html, afin de faire fonctionner du javascript dessus (clic droit=> affiche un petit message différent en fonction de l'endroit de l'image où l'on a cliqué).

Malgré mes recherches, je ne trouve pas du tout le moyen de capturer le clic droit sur une MAP...

Merci d'avance à ceux qui voudront bien prendre un peu de leur précieux temps pour me répondre.

Silverfly
05/10/2010, 16h34
marcha

Salut,

tu as un exemple de code minimal stp ?
05/10/2010, 16h40
silverfly

et bien, c'est du même type que cette page la :
http://www.thelin.net/laurent/labo/html/imagemap.html
Par exemple, comment faire pour
° si je fait un clic droit sur "plongée", cela m'affiche un alert("plongée");
° si je fait un clic droit sur "punk", cela m'affiche un alert("punk");
° si je fait un clic droit sur "nucléaire", cela m'affiche un alert("nucléaire");

Mais que les liens clic gauche marche aussi...

c'est tout bête, mais je ne trouve pas du tout comment faire.

Bonjour,

non, je ne dirais pas que ce soit totalement "tout bête" puisqu'il n'existe pas de onRightClick, et je n'ai pas la réponse complète testée, mais voici une piste.

Sur tes tags area, tu peut mettre quelque chose du genre
Code:

1 2 <area shape="rect" coords="2,3,80,62" href="#" name="area1" onmouseover="setRightClick(this.name);" />
et tu définis une fonction setRightClick(area) qui va te gérer le clic droit selon la "area" cliquée
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script language="javascript">  </script>
Mais comme je l'ai dit, c'est un script que j'ai pas testé....

H.I.H

Modification : J'ai bien sûr oublié dans le tag area, il faut aussi mettre un onMouseOut="resetClick()" et écrire une fonction resetClick() qui va réinitialiser le clic droit.

05/10/2010, 19h54
Bovino

Oui... sinon, il y a aussi oncontextmenu :mrgreen:

effectivement, autre possibilité plus simple : oncontextmenu
Toujours le

Code:

1
2
 
<area shape="rect" coords="2,3,80,62" href="#" name="area1" onmouseover="setRightClick(this.name);" onmouseout="document.body.oncontextmenu = null" />

mais cette fois

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script language="javascript">
<!--
function setRightClick(area){
 
            switch (area) { 
                      case ("area1") : document.body.oncontextmenu = function(){alert('Clic sur area1')};
                      case ("area2") : document.body.oncontextmenu = function(){alert('Clic sur area2')};
                      ....
             }
return true;
}
// -->
</script>

C'est effectivement plus simple...

@teraDev Je pense que Bovino voyait plutôt ça comme ça:
Code:

1 2 <area oncontextmenu="alert('ok');return false;" shape="rect" coords="2,3,80,62" href="#" name="area1" />

06/10/2010, 09h35
silverfly

C'est dommage, cela ne marche pas :( que se soit avec oncontextmenu ou avec onmouseover ect...

J'ai trouvé ce script sur internet, qui capture le clic droit et le désactive

Est-ce que vous pourriez m'aider à adapter ceci avec la map fait juste en haut?

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
 
	<script type="text/javascript" language="javascript">
<!-- Debut
 
var message="BOUH"
 
function empecheClicDroit(e) {
  if (document.all) {
    if (event.button == 2) {
      alert(message);
      return false;
    }
  }
  if (document.layers||document.getElementById) {
    if (e.which == 3) {
      alert(message);
      return false;
    }
  }
}
if (document.layers) {
  document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=empecheClicDroit;
// -->
</script>

07/10/2010, 10h10
silverfly

Merci beaucoup pour votre aide :)

J'ai fait un mix des scripts que vous m'avez fourni, et sa marche :)