Salut,
je n'ai fait que très peu de programmation web (les bases du html et du css).

Aujourd'hui (non, cette phrase ne se finira pas par "VDM", promis), j'ai tenté de trifouiller un peu dans les lignes de code d'un forum "xooit". J'ai d'abord téléchargé un "nouveau thème". J'en ai trouvé un bien avec un système qui m'avait l'air compliqué et intéressant de travailler : il y avait une image qui était remplacé par un gif lorsqu'on passait la souris sur les différents titres du menu.

Après un bon moment de recherche au milieu du code et au milieu de documentations diverses et variées, j'ai finalement trouvé mon "onMouseOver" (que je ne connaissait pas encore). Seulement c'est bien beau de voir quelque chose mais encore faut il savoir en tirer quelque chose. Alors j'ai essayé de manipuler l'outil pour me faire un menu (non, j'ai pas travailler l'aspect innovant de la chose, en effet) personnalisé avec une animation qui se déclenche quand on passe la souris sur les onglets du menu. Seulement, j'envisage, a terme, d'employer un gif qui ne se répète pas indéfiniment, juste une animation quand on passe la première fois sur le menu.

Pour ceux qui ne connaissent pas trop les gifs, ce n'est pas de leur côté que ça bloque, on peut très facilement faire en sorte qu'un gif ne fasse pas une boucle infinie mais bien une seule lecture. Alors où est le problème me direz vous? Du moment que je ne met pas de "onMouseOut", l'image devrait rester tel que. Oui, sauf que dès que je repasse sur le menu, le gif se relance au début car l'image est rechangée par elle même !

Pour résoudre ça, j'ai du m'intéresser au Javascript, que je n'ai découvert que cette après-midi. En m'aidant du site du Zéro, j'ai vite compris comment je pourrais faire, j'en ai profiter pour modifier certaines choses (le onMouseOver n'était pas dans une balise de javascript, la personne qui avait codé ça avait une autre méthode de faire).

Au final, je me suis retrouvé avec ceci
(Oui, je sais, mon menu ressemble à rien pour l'instant, chaque chose en son temps ...)



Et donc mon problème c'est qu'il à l'air de se moquer éperdument de mon 'mouseover' et que mon dragon (le gif) crache ses flammes dès que je charge la page et non quand je passe ma souris sur un élément du titre. J'ai regardé 3 tutos différents sur le mouseover mais rien n'y fait ...

Si quelqu'un a la solution à cette énigme pour moi, je l'accueillerais à bras ouverts.

Merci d'avance

Hm... tu as mal appris tes cours ! Vilain.

Pas de parenthèses après changeimg dans le aEL. Tu passes en paramètre la fonction et non pas le résultat de son exécution !

main.addEventListener('mouseover', changeimg, false);

Hmmm j'ai essayé de corriger ça, là il ne crache plus du tout de flammes, jamais.

Puis si l'une des erreurs vient de là, alors je ne comprend pas :

Citation : Cours du Site du Zéro

el.addEventListener('click', function() {
alert("Et de deux !");
}, false);

edit 2 : (tain je suis vraiment bigleux : sous cet exemple, y avait un exemple d'utilisation de fonction créée avant utilisation)

Ici, ils définissent la fonction directement dans l'AEL, moi j'ai préféré (pensant que c'était possible) de définir ma fonction auparavant. Est ce la raison pour laquelle ici on doit préciser les parenthèses?

Edit : Supposition pour les problèmes restants : peut être que ça vient du fait que j'ai plusieurs éléments déclencheurs du mouseover : tout les éléments de la classe "mainmenu" ? Non parce que je n'ai trouvé aucun exemples du genre, toujours qu'un élément déclencheur.

Arf bien vu ton EDIT, c'est un problème en effet... Il faut faire une boucle for() pour attribuer l'événement à chacun des éléments de main.



Concernant les fonctions, tu sembles confondre les parenthèses utilisées lors de la déclaration pour indiquer les arguments, et celles utilisées lors de l'exécution pour envoyer des valeurs en paramètres.


Quand tu définies une fonction, tu as forcément une paire de parenthèses.

function f() /* <- Ici */ {
    alert("Plop !");
}

var f = function() /* <- Ici */ { 
    alert("Plop !");
};

Regarde bien la deuxième déclaration de la fonction f(). Cette écriture illustre bien l'égalité qu'il y a entre f et function() { alert("Plop !"); } !


Donc ces deux écritures sont, dans ce cas, équivalentes :

machin.addEventListener('mouseover',f,false);

machin.addEventListener('mouseover',function() {
    alert("Plop !");
},false);

Capich ?

Ok, merci pour ton aide, tes éclaircissements et surtout ton temps