Conflit OnMouseOut et OnClick

Question

Bonjour à tous. Je sais que le sujet a déjà été traité mais mon problème est un peu différent et je n'arrive pas à m'en sortir. J'ai récupéré un code ici et me le suis adapté mais pourtant un problème subsiste et mes compétences en javascript sont dépassées à ce stade! Mon problème : j'ai un menu avec 7 rubriques (7 images) avec un onmouseover, un onmouseout et un onClick sur chq image avec un changement d'image classique sur les onmouseover/out et l'ouverture de sous-rubriques avec le onclick. Je souhaiterai que l'image apparue sur le onmouseover reste lorsqu'il y a eu un click! Il y a donc un conflit entre le onmouseOut et le Onclick, cependant, je ne pense aps pouvoir utiliser une variable car, au total, j'ai plus de 30 images (correspondant dc à des rubriques ou sous-rubriques)!!! Le site est visible ici : www.deroutes.fr/test/index.php Je vous mets le code, cela me semble le mieux. Merci de votre aide Le site du groupe Déroutés

, ---- [plan.htm Plan du site ]- [mentions.htm Mentions légales]

PetoleTeam · Answer

Bonjour, sur l'événement onclick, il te suffit de supprimer l'événement onmouseout exemple simple [# LIEN] ;O)

rehtakulveets · Answer

Bon, c'est super, ca marche niquel!! MErci Petole Team... Cependant, j'aimerai développer ce code, je sais qu'il ne me manque pas grand chose mais, là encore, mes compétences sont dépassées. Mes 3 questions sont donc les suivantes: -comment faire pour que lorsque l'on clique sur le lien 2 APRES avoir cliqué sur le lien 1, le lien 1 disparaisse? Et, question qui découle de la première: -comment faire pour que lorsque l'on survole le lien 2 APRES avoir cliqué sur le lien 1, le lien 1 disparaisse mais réapparaisse lorsque l'on quitte le survol du lien 2? - comment mettre des images à la place du texte "LIEN" et LIEN2" et appeller également des images aux survols? Il suffit de remplacer simplement les this_.innerHTML = "LIEN" par du this_.img src = "LIEN.jpg"? Merci d'avance. Je mets un petit bout de code développé avec 2 liens!!! ;) Bon WE à tous [# LIEN] [# LIEN2]

PetoleTeam · Answer

Bonjour, 
Ce que je t'avais mis était un exemple. 

...il ne faut pas multiplier les fonctions identiques mais en faire une 
générique exemple Change_Texte
//--------------------------------- 

function Change_Texte( this_, txt_){ 
  this_.innerHTML =   
txt_; 
}
avec un appel du type 
onmouseover = "Change_Texte( this, 'OVER Lien');"
qui remplace les fonctions  _1  et _2, avec cette fois ci le 
passage en paramétre du texte à afficher. 

Réponse 
#1
Lors du click sur le lien_2 il faut tester si le lien_1 a été 
cliqué et si oui le faire disparaître en modifiant son style.display. 
Dans ce cas il faut gérer une 
propriété, par exemple clic, et la mettre à true lorsque l'on clique sur le lien, la fonction 
devient par exemple 
 //----------------------  
function 
Fct_Clic(this_){ 
  this_.onmouseout  = function(){}; 
  this_.clic = true; 

}
de la sorte on saura si elle à déjà été cliquée, ceci n'est 
qu'une façon de faire il y en a bien d'autres. 

Réponse #2
Ce n'est qu'une question de logique 
et de gestion des opérations liées aux événements et à leurs réinitialisations 
correctes. 

Réponse #3

c'est un rollover classique... 

voilà en gros à la louche... 
;O)

rehtakulveets · Answer

Merci beaucoup Petole Team de cette réponse bien complémentaire...
Je la comprends, mais n'arrive pas à la mettre en place, ca dépasse vraiment ma compréhension -limitée-. 
Est-ce trop te demander de m'écrire juste les quelques lignes toutes à la suite et d'utiliser, au lieu du LIEN, une image1 pour l'état normal et une image2 pour le survol?

D'avance, encore merci pour ton aide...et bon WE!!!

M.P

PetoleTeam · Answer

Bonjour, 
une des 1000 et une façons de procéder 
pour faire un RollOver avec des images 
la fonction : 
//------------------------------- 
function 
Swap_Image( this_, src_){ 
  this_.src = src_; 
}
l'appel : 

;O)

rehtakulveets · Answer

Merci Petrole Team.. J'ai écrit ceci, mais bien sûr, ca marche pas... Je ne sais pas où je dois mettre la fonction Fct_Clic et ce que je dois metrte pour les images!!! Merci encore de votre aide. [# ]

PetoleTeam · Answer

Bonjour, ----, J'ai écrit ceci, mais bien sûr, ca marche pas...

question de logique... Ta fonction Change_Image ne fait rien d'autre que la même chose que la fonction Change_Texte que je t'ai mis plus haut, donc pas ce que visiblement tu veux. Si tu veux changer une IMG contenue dans un lien, A, il te faut d'abord atteindre l'objet avant de lui changer sa src. On y accéde via la propriété firstChild des objets. La fonction Change_Image devient ainsi celle ci //--------------------------------- function Change_Image( this_, src_){ this_.firstChild.src = src_; } quant à la Fct_Clic elle se met sur l'événement onclick du lien. ;O)

rehtakulveets · Answer

Merci encore Petole Team de ces infos précieuses. Je pense avoir pigé l'essentiel. J'ai réécrit un code, je pense qu'il s'agit de celui dont j'ai besoin, mais il y a encore un souci, peux tu me dire où? Je sens que je ne suis pas loin. J'avais une question supplémentaire : où dois-je rajouter la ligne de code du lien (de la page que je souhaite ouvrir) lorsque l'on clique sur l'image? Encore merci [# ]

PetoleTeam · Answer

Bonjour, ----, ...mais il y a encore un souci...

il te faut passer aux fonctions une chaine de caractères aussi onmouseout = "Change_Image( this, image1.gif);" devient onmouseout = "Change_Image( this, " image1.gif");" concernant la fonction Fct_Click onclick = "Fct_clic( this,image2.gif);" le 2nd paramétre ne sert à rien si ce n'est à générer une erreur donc onclick = "Fct_clic( this);" ----, ...où dois-je rajouter la ligne de code du lien...

d'après ce que je lit plus haut ce serait un truc du style [la_page.html ] ;O)

rehtakulveets · Answer

Merci Petole Team. Avec tout ça, j'aurai pensé y arriver, et pourtant des problèmes subsistent : - Au survol, mon image1 ne se transforme pas en image2. - Au click, j'ouvre bien ma page ds une target, mais l'image1 ne se transforme pas non plus en image2 (ce que je souhaite depuis le début)!!! Tu vois où est le problème?? Merci déjà pour tout ca & Bon WE!! [news.htm ]

PetoleTeam · Answer

il va de soit que image1.gif et image2.gif doivent 
exister... 
;O)

rehtakulveets · Answer

Oui, on est d'accord, elles exsitent bien!!!
Mais ca marche pas???!!!!
Une idée?

PetoleTeam · Answer

ATTENTION



onmouseover =  "Change_Image(this, 
 " image2.gif");"

il faut mettre


onmouseover  = "Change_Image(this, 'image2.gif');"





;O)

rehtakulveets · Answer

Ok, c'est bon, le problème d'apparition/disparition de mon image2 est résolu.

Par contre, et cela n'a pas l'air normal, une fois cliquée, lorsque je sors de l'image2, elle redevient image1.
Cela veut donc dire que le mouseOut prend tjs le dessus sur le OnClick?

PetoleTeam · Answer

peut être 
onclick = "Fct_Clic(this);"
attention à la casse...
;O)

rehtakulveets · Answer

En effet, Petole Team, tu avais encore une fois raison, attention à la casse...
Merci beaucoup pour tes conseils.

J'aurai juste une dernière chose à te demander.
Ce code est prévu pour un menu, je vais donc avoir plusieurs titres (représentés par des images).
Lorsque je survole ou clique sur mon image1, elle se transforme en image2, ca, c'est réglé!
J'aimerai maintenant que lorsque je survole et clique sur mon image3 (qui deviendra alors image4), mon image2 redevienne image1.
Je me doute que c'est une histoire d'architecture entre les fonctions, mais je suis, là encore, dépassé!!!

Voilà ma dernière requête!!! ;)

Bon WE & merci

PetoleTeam · Answer

Bonjour, ----, J'aimerai maintenant que lorsque je survole et clique sur mon image3 ..., mon image2 redevienne image1

dans ce cas il te faut pouvoir accéder aux autres Objets à partir du clique sur l'un deux, donc mettre des ID sur chacun de tes liens pour les récupérer via document.getElementById . Les mettre sous la forme, par exemple, A_ numero_chrono , ce qui donnerait ...etc... Comme tu veux restituer l'image initiale, il te faut également sauvegarder, pour chaque objet sa référence, cela peut se faire dans la fonction Change_Image, et ce lors du premier appel. Ensuite tu la restitues en fonction de l'objet initialement cliqué. Pour restituer tu as au moins 2 options - Sauvegarde de l'objet cliqué dans une variable globale, puis restitution pour celui ci sur le click d'un autre... - Restitution pour tous les objets avec une ID ="A_numero_chrono", sans avoir donc à sauvegarder l'objet initialement cliqué... ;O)

rehtakulveets · Answer

WAOUH!!!!
Là, Petole Team, sincérement, je nage complet...
Un petit bout de code plus long pour amorcer ne serait pas de refus, si toutefois tu as le temps!!! ;)

Merci déjà de ton aide!!

PetoleTeam · Answer

Bonjour, 
Tu as toutes les billes pour réussir, 
qu'est ce que tu n'arrives pas à faire ? 
;O)

rehtakulveets · Answer

Pour faire court, j'arrive à modifier des codes que je récupère et les mettre à ma sauce, parce que l'"architecture" du code est déjà faite... Sans rien, je ne saurai pas te dire où je dois mettre le document.GetElementbyID, par exemple, si c'est dans ou , puis, également où le situer par rapport à l'image que je veux mofidier... Je suis dépassé aussi par les ID... Donc, c'est pour cela que je te demander un bout de code + complet, avec au moins les balises et !!! ;o)

Conflit OnMouseOut et OnClick

29 réponses

Votre réponse

Discussions similaires