onmouseover + raccourci clavier

**xave** · 27/06/2006, 16h09

Bonjour à tous,

Sur mon site (php/MySQL/javascript) j'ai un menu issue de ma base de données.

Dans cette base une table "menu" dans laquelle j'ai le libellé du menu (par exemple Acceuil) et un raccourci clavier (par exemple 1).

J'affiche le menu sans problème avec dessus des onmouverover, onmouseout pour gérer les styles (style plus foncé sur onmouseover qui revient plus clair sur onmouseout), par contre je ne sais pas comment insérer les raccourcis clavier dans cette syntaxe...

Ca me donne par exemple:

Code :

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

1
2
3
4
5
6
7
8
 
<div class="textenav boites"
onmouseover="this.className='etat1 textenav';"
onmouseout="this.className='etat2 textenav';"
 
<?php
echo "onclick=\"document.location.href='http://main.php?page=$menu[nom_menu]&url=$menu[url]>$menu[nom_menu]";
echo "</div>";

Pouvez-vous m'aider?

Merci d'avance.

**FremyCompany** · 27/06/2006, 16h13

Code :

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

1
2
3
4
5
6
// JavaScript
document.onkeypress=function(e) {
   if (e.keyCode==32) {
      alert('vous avez tapé un "'
   }
}

**xave** · 27/06/2006, 16h17

Merci

Peux-tu m'expliquer ce qu'est cette fonction(e) et comment insérer ce script dans mon code (désolée, je suis très mauvaise en javascript

)?

**FremyCompany** · 27/06/2006, 16h22

connais pas bien PHP mais voila un exemple bidon et qui respecte pas les conventions HTML:

Code :

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

1
2
3
4
5
6
7
8
9
10
<html><body><?php
echo ("<script type=\"text/javascript\">")
echo ("// JavaScript
document.onkeypress=function(e) {
   if (e.keyCode==32) {
      alert('vous avez tapé un \"')
   }
}")
echo ("</script>")
?></body><html>

Aussi un petit truc pour t'aider :

Code :

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

if (String.fromCharCode(e.keyCode) == '"')

était bon aussi

**xave** · 27/06/2006, 16h25

Hum... oui, si je comprend bien, cette fonction va me retourner ce qui est saisi au clavier...

Reste ensuite à faire le redirection en fonction du caractère saisi...
Et donc vu la structure de mon site passer la variable de javascript à php, ce qui je crois n'est pas faisable...

Et on ne peut pas utiliser accesskey ici?

[Edit]
C'est quoi cette fonction e que tu me mets dans chaque exemple?
[/Edit]

**FremyCompany** · 27/06/2006, 16h30

CONTENU DE E == EVENT
-------------------------

Pour Netscape :
-------------------
data retourne un tableau de chaînes de caractères contenant les URL des objets déposés avec l'événement Drag and Drop.
height représente la hauteur de la fenêtre ou du cadre.
layerX représente la coordonnée X au sein d'un calque (Layer).
layerY représente la coordonnée Y au sein d'un calque (Layer).
modifiers chaîne de caractères spécifiant la modification de clés associée à un événement de souris ou de clavier. Les valeurs sont : ALT_MASK, CONTROL_MASK, SHIFT_MASK, and META_MASK.
pageX nombre spécifiant la position horizontale du curseur en pixels par rapport à la page.
pageY nombre spécifiant la position verticale du curseur en pixels par rapport à la page.
target chaîne de caractères représentant l'objet sur lequel l'événement a eu lieu.
which nombre spécifiant quel bouton de souris a été pressé ou la valeur ASCII d'une touche de clavier pressée.
width représente la largeur de la fenêtre ou du cadre.

Pour Explorer :
-------------------
altKey détermine si la touche Alt était pressée lors de l'événement.
button détermine le bouton de la souris pressée lors de l'événement.
cancelBubble arrête la propagation de l'événement.
clientX nombre spécifiant la position horizontale du curseur en pixels par rapport à la page.
clientY nombre spécifiant la position verticale du curseur en pixels par rapport à la page.
ctrlKey détermine si la touche Ctrl était pressée lors de l'événement.
fromElement représente l'objet source d'un déplacement de la souris.
keyCode détermine l'encodage Unicode de la touche pressée.
offsetX coordonnée horizontale de l'événement en position relative par rapport au conteneur.
offsetY coordonnée verticale de l'événement en position relative par rapport au conteneur.
reason représente l'état d'un transfert de données.
returnValue indique la valeur de retour pour le gestionnaire d'événement.
shiftKey détermine si la touche Shift était pressée lors de l'événement.
srcElement indique l'objet sur lequel l'événement s'est produit.
srcFilter indique le filtre qui a changé.
toElement indique l'objet de destination d'un déplacement de souris.

Commun :
-------------------
screenX nombre spécifiant la position horizontale du curseur en pixels par rapport à l'écran.
screenY nombre spécifiant la position verticale du curseur en pixels par rapport à l'écran.
type chaîne de caratères représentant le type de l'événement.
x identique à layerX.
y identique à layerY.

**xave** · 27/06/2006, 16h54

FremyCompany: je n'arrive pas à faire fonctionner ton bout de code, voilà ce que j'ai fait:

Code :

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

1
2
3
4
5
6
7
8
echo "<script language='javascript'>";
echo "document.onkeypress=function(e) {
   if (e.keyCode==1) {
      alert('vous avez tapé un \"')
   }
}";
 
echo "</script>";

Mais il ne se passe rien...

**FremyCompany** · 27/06/2006, 17h12

lol, c'est normal...
le caractère ASCII (1) étant un caractère de controle, tu ne sais pas le taper avec ton clavier...
si tu veux faire des tests :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document.onkeypress=function(e) {
   var Code=false
   if (e) {
      if (e.keyCode) {
         Code=e.keyCode
      }
      else if (e.wich) {
         Code=e.wich
      }
   }
   else if (window.event.keyCode) {
      Code=window.event.keyCode
   }
   else if (window.event.wich) {
      Code=window.event.wich
   }
   else {
      // Impossble de lire le caractère...
   }
   if (Code) {
      alert(Code + " : " + String.fromCharCode(Code));
   }
}

**xave** · 27/06/2006, 17h28

J'obtiens l'erreur suivante:

'keyCode' a la valeur nulle ou n'est pas un objet

**Lung** · 27/06/2006, 17h38

J'ai testé, mais ça ne fonctionne pas :

Code :

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

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
<html>
<body>
<script type=\"text/javascript\">
document.onkeypress = function(e)
{
   alert('');   //  <---
   var Code=false
   if (e) {
      if (e.keyCode) {
         Code=e.keyCode
      }
      else if (e.wich) {
         Code=e.wich
      }
   }
   else if (window.event.keyCode) {
      Code=window.event.keyCode
   }
   else if (window.event.wich) {
      Code=window.event.wich
   }
   else {
      // Impossble de lire le caractère...
   }
   if (Code) {
      alert(Code + " : " + String.fromCharCode(Code));
   }
}
</script>
 
<table border=1>
   <td><div>Accueil</div></td>
   <td><div>Menu 2</div></td>
</table>
 
<?php
 
?>
</body>
</html>

J'ai mis un alert pour voir si la fonction est appellée, mais je n'obtiens rien.

**FremyCompany** · 27/06/2006, 18h00

Code :

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

<script type=\"text/javascript\">

Que viennent faire ces "\" la ???

**xave** · 28/06/2006, 08h24

Fremycompany>> je pense que Lung c'est inspiré de ton post de 16h22

En attendant chez moi non plus ça ne fonctionne pas

**Lung** · 28/06/2006, 09h31

Envoyé par FremyCompany

Code :

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

<script type=\"text/javascript\">

Que viennent faire ces "\" la ???

Tu as raison : ca marche !!

**xave** · 28/06/2006, 09h35

Oui, ça y est chez moi aussi mais je vois toujours pas comment l'intégrer dans mon code...

**FremyCompany** · 28/06/2006, 10h22

Bien, cette étape-la passée, que veux-tu faire exactement ?
En gros : Quelle(s) touche(s) pour quoi faire

Maintenant, il va falloir jongler avec les possibilités qu'on a.

**xave** · 28/06/2006, 10h24

Merci Fremy

En gros je veux que quand l'utilisateur tape 1 par exemple, ça le redirige directement sur la page dont le raccourcis clavier est 1.

Sachant que mes liens sont un peu particulier puisque j'utilise des include de page, donc en gros quand on tape 1, ça renvoie par exemple sur index.php?lien=accueil

**FremyCompany** · 28/06/2006, 10h38

Code nécéssaire pour le fonctionnement : statique :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document.onkeypress=function(e) {
   var Code=false
   if (e) {
      if (e.keyCode) {
         Code=e.keyCode
      }
      else if (e.wich) {
         Code=e.wich
      }
   }
   else if (window.event.keyCode) {
      Code=window.event.keyCode
   }
   else if (window.event.wich) {
      Code=window.event.wich
   }
   else {
      // Impossble de lire le caractère...
   }
   if (Code) {
      window.KeyEvent(Code) // Lance la gestion de l'evenement
   }
}

Code de gestion de l'évenement : statique :

Code :

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

1
2
3
4
5
6
7
 
window.KeyEvent=function(Code) {
   var Char = String.fromCharCode(Code)
   if (Links[Char]) {
      window.location.href="index.php?lien=" + escape(Links[Char])
   }
}

Code de données : Dynamique (PHP)

Code :

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

1
2
3
4
5
var Links=new Array(); // Obligatoire !!!
// Liste des raccourcis : A génerer par PHP
Links['1']='acceuil'
Links['2']='page 1'
// [...]

**xave** · 28/06/2006, 10h39

Ah... merci Fremy, je vais essayer ça de suite!!!!

**xave** · 28/06/2006, 10h46

Ok, voilà ce que j'ai fait dans un premier temps pour faire simple:

Code :

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

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
document.onkeypress=function(e) {
	 alert('Test');
   var Code=false
   if (e) {
      if (e.keyCode) {
         Code=e.keyCode
      }
      else if (e.wich) {
         Code=e.wich
      }
   }
   else if (window.event.keyCode) {
      Code=window.event.keyCode
   }
   else if (window.event.wich) {
      Code=window.event.wich
   }
   else {
      // Impossible de lire le caractère...
	  alert("Impossible de lire le caractère");
   }
   if (Code) {
   	  //alert("Caractère lu: "+Code);	
      window.KeyEvent(Code) // Lance la gestion de l'evenement
   }
}
 
window.KeyEvent=function(Code) {
   var Char = String.fromCharCode(Code)
   if (Links[Char]) {
      window.location.href=escape(Links[Char])
   }
}
 
var Links=new Array(); // Obligatoire !!!
// Liste des raccourcis : A génerer par PHP
Links['1']='http://www.google.fr'
Links['2']='http://www.yahoo.fr'
// [...]
 
</script>

Quand je fais le raccourcis 1 par exemple, il affiche bien "Test" de l'alerte de début de fonction mais ensuite rien ne se passe...

**FremyCompany** · 28/06/2006, 11h10

Testé et OK sur IE & FF

Code :

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

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
<script>
document.onkeypress_error=false
document.onkeypress=function(e) {
   var Code=false
   if (e) {
      if (e.keyCode) {
         Code=e.keyCode
      }
      else if (e.which) {
         Code=e.which
      }
   }
   if (window.event  && (!Code)) {
	   if (window.event.keyCode) {
	      Code=window.event.keyCode
	   }
	   else if (window.event.which) {
	      Code=window.event.which
	   }
   }
   if (Code) {
      window.KeyEvent(Code) // Lance la gestion de l'evenement
   }
   else {
      // Impossible de lire le caractère...
	  if (!document.onkeypress_error) {
		alert("Votre navigateur n'est pas compatible.");
		document.onkeypress_error=true;
	  }
   }
}
 
window.KeyEvent=function(Code) {
   var Char = String.fromCharCode(Code)
   if (Links[Char]) {
      window.location.href=(Links[Char]) 
   // Le escape sert à faire comme un url_encode de PHP, si tu mets des url complètes, il ne sert à rien
   }
}
 
var Links=new Array(); // Obligatoire !!!
// Liste des raccourcis : A génerer par PHP
Links['1']='http://www.google.fr'
Links['2']='http://www.yahoo.fr'
// [...]
 
</script>

onmouseover + raccourci clavier

JavaScript

Discussions similaires

Partager

Partager