11548 sujets
Mon post est certainement un peu flou : il n'y a aucune réponse.
Voilà où j'en suis, toujours à la recherche d'un menu-vertical parfait. Pour cela, il me faut pouvoir utiliser les propriétés target et relatedTarget.
Voici un petit script de ma composition (fait de bric et de broc ; utile seulement sous Firefox) dont j'espérais qu'il m'aiderait à comprendre le fonctionnement de ces deux propriétés. Mais il renvoie une erreur, ligne 17 : event is not defined. Et je n'y comprends plus rien...
Quelques indications ?
GS.[/i][/i]
Modifié le 08 Dec 2004 - 12:14
Voilà où j'en suis, toujours à la recherche d'un menu-vertical parfait. Pour cela, il me faut pouvoir utiliser les propriétés target et relatedTarget.
Voici un petit script de ma composition (fait de bric et de broc ; utile seulement sous Firefox) dont j'espérais qu'il m'aiderait à comprendre le fonctionnement de ces deux propriétés. Mais il renvoie une erreur, ligne 17 : event is not defined. Et je n'y comprends plus rien...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
<!--
function affiche()
{
var objDD = document.getElementsByTagName('dd');
nobjDD = objDD.length;
for(i=0; i < nobjDD; i++)
{
objDD[i].onmouseover = faire('block',event,this);
objDD[i].onmouseout = faire('none',event,this);
}
}
function faire(disp,evnt,obj)
{
text = disp + " | " + evnt.target.nodeName + " | " + evnt.relatedTarget.nodeName;
objTextA = document.getElementsByTagName('textarea');
texteOld = objTextA[0].value;
objTextA[0].value = texteOld + "\n" + text;
}
-->
</script>
<style type="text/css">
dl#menu {
border:1px solid gray;
width:200px;
}
dl#menu dd{
border:1px solid gray;
display:block;
margin-bottom:3px;
width:60px;
}
dl#menu dt {
display:none;
}
</style>
</head>
<body>
<dl id="menu">
<dd name="dd_1">Dété 1</dd>
<dt name="dt_1"><a href="#">Text texte texte. Text texte texte</a><br><a href="#">Text texte texte. Text texte texte</a><br><a href="#">Text texte texte. Text texte texte</a><br><a href="#">Text texte texte. Text texte texte</a></dt>
<dd name="dd_2">Dédé 2</dd>
<dt name="dt_2"><a href="#">Text texte texte. Text texte texte</a><br><a href="#">Text texte texte. Text texte texte</a><br><a href="#">Text texte texte. Text texte texte</a><br><a href="#">Text texte texte. Text texte texte</a></dt>
<dd name="dd_3">Dédé 3</dd>
<dt name="dt_3"><a href="#">Text texte texte. Text texte texte</a><br><a href="#">Text texte texte. Text texte texte</a><br><a href="#">Text texte texte. Text texte texte</a><br><a href="#">Text texte texte. Text texte texte</a></dt>
<dd name="dd_4">Dédé 4</dd>
<dt name="dt_4"><a href="#">Text texte texte. Text texte texte</a><br><a href="#">Text texte texte. Text texte texte</a><br><a href="#">Text texte texte. Text texte texte</a><br><a href="#">Text texte texte. Text texte texte</a></dt>
</dl>
<input name="Bouton" type="button" onClick="affiche()" value="Appuyer">
<br>
<TEXTAREA cols="50" rows="40">Résultat</TEXTAREA>
</body>
</html>Quelques indications ?
GS.[/i][/i]
Modifié le 08 Dec 2004 - 12:14
Salut,
1) Non désolé je n'ai pas d'exemple. Je ne savais à vrai dire même pas qu'un tel attribut existait.
2) Ceci dit, avec quelques recherches, j'ai peut-être compris :
Donc, dixit le W3C, le relatedTarget sert à t'indiquer lors des manipulations souris une cible "secondaire". Si tu es sur un élément A et que tu survoles un élément B, le relatedTarget te renvoie à A (et non à B comme le target). Ca te permettrait donc de remonter ton historique d'actions d'un cran, d'une certaine façon.
Voilà j'espère que ça t'aidera.
1) Non désolé je n'ai pas d'exemple. Je ne savais à vrai dire même pas qu'un tel attribut existait.
2) Ceci dit, avec quelques recherches, j'ai peut-être compris :
a écrit :
Currently this attribute is used with the mouseover event to indicate the EventTarget which the pointing device exited and with the mouseout event to indicate the EventTarget which the pointing device entered.
Donc, dixit le W3C, le relatedTarget sert à t'indiquer lors des manipulations souris une cible "secondaire". Si tu es sur un élément A et que tu survoles un élément B, le relatedTarget te renvoie à A (et non à B comme le target). Ca te permettrait donc de remonter ton historique d'actions d'un cran, d'une certaine façon.
Voilà j'espère que ça t'aidera.
Merci. Entre temps, j'ai progressé un peu dans mon problème.
Voici le résultat des courses. Lorsque le onmouseover et le onmouseout sont placés dans une fonction JS pour application sur le tag, l'appel de event me renvoie une erreur (undefined). Si je le place directement dans le tag, l'erreur disparait. Si quelqu'un a un éclaircicement sur ce point...
GS.
Dans le JS, ne marche pas :
Directement dans le code HTML, cela fonctionne :
Voici le résultat des courses. Lorsque le onmouseover et le onmouseout sont placés dans une fonction JS pour application sur le tag, l'appel de event me renvoie une erreur (undefined). Si je le place directement dans le tag, l'erreur disparait. Si quelqu'un a un éclaircicement sur ce point...
GS.
Dans le JS, ne marche pas :
for(i=0; i < nobjDD; i++)
{
objDD.onmouseover = faire('block',event,this);
objDD.onmouseout = faire('none',event,this);
}Directement dans le code HTML, cela fonctionne :
<dd name="dd_1" onMouseOver="faire('block',event)" onMouseOut="faire('none',event)">Dété 1</dd>Concernant le gestionnaire d'evenement integré, la bonne syntaxe est :
Sinon, c'est bien de vouloir se la jouer propre et respecter le gestionnaire devenement DOM2, mais, il faut savoir que celui-ci est assez mal implémenté dans les navigateurs ! (quelque test IE vs Mozilla vs Opera vs Safari devrais vite t'en convaincre)
Tu peut arriver au même resultat sans te prendre la tête avec Event
... quel resultat tu veux obtenir exactement ?
for(i=0; i < nobjDD; i++)
{
objDD.onmouseover = function(){
faire('block',event,this);
}
objDD.onmouseout = function(){
faire('none',event,this);
}
}
Sinon, c'est bien de vouloir se la jouer propre et respecter le gestionnaire devenement DOM2, mais, il faut savoir que celui-ci est assez mal implémenté dans les navigateurs ! (quelque test IE vs Mozilla vs Opera vs Safari devrais vite t'en convaincre)
Tu peut arriver au même resultat sans te prendre la tête avec Event
... quel resultat tu veux obtenir exactement ?Bonjour Jep,
J'essaie simplement (mais ce n'est pas très simple pour moi) de régler le problème du clignotement dont nous avons déjà parlé.
J'ai compris que le target et relatedTarget n'étaient pas supportés par IE (il faut utiliser le fromElement et le toElement). Mon JS comportera donc deux "parties" pour chacun des navigateurs.
Pour le moment, j'en suis là. Attention, le code de cette page évolue chaque... seconde !
Je vais essayer ta méthode ici avec le function, mais cela avait échoué précédemment.
GS.
J'essaie simplement (mais ce n'est pas très simple pour moi) de régler le problème du clignotement dont nous avons déjà parlé.
J'ai compris que le target et relatedTarget n'étaient pas supportés par IE (il faut utiliser le fromElement et le toElement). Mon JS comportera donc deux "parties" pour chacun des navigateurs.
Pour le moment, j'en suis là. Attention, le code de cette page évolue chaque... seconde !
Je vais essayer ta méthode ici avec le function, mais cela avait échoué précédemment.
GS.
Après un test rapide, l'utilisation de function() pour le onmouseover ne fonctionne pas... ai-je fais une erreur ? Sans doute. Mais je en vois pas laquelle (cf. ici).
