Ma première fonctionRésolu

Question

Je tente d'ecrire une fonction pour gérer le background de liens dans un menu dynamique Je suis carrément novice et évidement, ca ne marche pas :os Je la reproduit ici en essayant de simplifier au maximum (le but est de changer le bg de lien a en survolant lien b) html : Document sans nom [# lien a] [# lien b] css : a:hover {background-color:red;} .noir a:hover {background-color:black;} javascript : function lien(){ getElementById('liena').className='noir'; } Si vous m'aidez a dépatouiller ca, je serais bienheureux ;o)

cs_bultez · Accepted Answer

>>le problème est simple en fait je veux modifier le background de lien A au survol de lien B je répond "strictement" à ce qui est demandé ! [# lien a] [# lien b] pas certain que le css puisse faire cela.....

Cordialement Bul [mon Site] [M'écrire]

leejunfan · Answer

J'ai corrigé deux erreurs mais ca ne fonctionne toujours pas :

.noir a {background-color:black;}

document.getElementById('liena').className='noir';

nicomilville · Answer

Salut,

Tu aurai pu m'attendre, lol !!
Tout ça pour dire que je viens de me lever et que j'ai répondu a ton message !!!

J'ai répondu que si tu mettais une class sur tes liens tu pouvais peut être faire quelque chose dans ce genre :

   .class:hover
{
   background-color: couleur;
}

Si t'a besoin d'aide, MP !!!

PetoleTeam · Answer

Bonjour, essaies avec ce style ;O)

leejunfan · Answer

Merci de vos réponses ;o)

Je viens de tester ca et aucune des deux ne marchent, je m'explique.
Si je met la même classe aux deux liens, quand je survoole lien A, lien B est modifié, et c'est genant pour mon menu dynamique.
Pour ce qui est de la syntaxe css, cela ne fonctionne pas mais j'aurais au moins progressé en "orthographe" ;o)

cs_bultez · Answer

Bonjour,

    >>Si je met la même classe aux deux liens, quand je survole lien A, lien B est modifié,
        ah ben... sûrement pas ? le "survol" est bien attaché au survol d'un lien
                l'autre ne change pas... puisque non survolé....

    >>Pour ce qui est de la syntaxe css, cela ne fonctionne pas
        si si ( l'impératrice ) désolé d'affirmer ça;, mais le css : ça fonctionne
        peut-être pas comme tu voudrais ?
            encore faudrait-il savoir ce que tu veux.... justement !
            et encore faut-il faire ce qu'il faut pour obtenir ce qu'on voudrait
            .... si c'est possible ( et ça ne l'est pas toujours... quoique )

    >>pour mon menu dynamique.
        pas vu de menu ici.... me trompe-je ?

<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

leejunfan · Answer

Bonjour Bultez,

le problème est simple en fait je veux modifier le background de lien A au survol de lien B

Et je n'accuse ni le CSS ni le JavaScript, je voulais simplement dire que la solution proposé ne fonctionnait pas

Effectivement il n'y a pas de menu dynamique, j'ai tenté se simplifier au maximum le problème, j'adapterais par la suite à ce fameux menu

leejunfan · Answer

Je met la source du menu dynamique horizontal, si cela peut aider

Il est adapté dans mon cas avec une cascade de sous menu et je voudrais conserver le background des liens du haut vers le bas

nicomilville · Answer

Salut,

essaye ça, en supposant que le lienA est un attribut id qui vaut lienA et que le lienB est un attribut id qui vaut lienB :

document.getElementById('lienA').onmouseover = function () { 
document.getElementById('lienA').style.background-color = "#couleur"; 
} 
document.getElementById('lienB').onmouseover = function () { 
document.getElementById('lienA').style.background-color = "#couleur"; 
document.getElementById('lienB').style.background-color = "#couleur"; 
}

Si t'a besoin d'aide, MP !!!

nicomilville · Answer

Re,

je viens de me rendre compte d'une erreur :

function lien () {
document.getElementById('lienA').onmouseover = function () { 
document.getElementById('lienA').style.bgcolor = "#couleur"; 
} 
document.getElementById('lienB').onmouseover = function () { 
document.getElementById('lienA').style.bgcolor = "#couleur"; 
document.getElementById('lienB').style.bgcolor = "#couleur"; 
}
}

Si t'a besoin d'aide, MP !!!

cs_bultez · Answer

je ne suis pas certain non plus que c'est ce que tu veux réellement !
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

leejunfan · Answer

Bultez, 

il me reste du boulot pour adapter ton code mais si, c'est exactement ce que je voulais, lors du survol de lien B on a bien une modification de bg de lien A

En fait mon menu descend en cascade et je veux "conserver" le chemin du haut vers le bas, avec ta fonction et un peu de reflexion je pense y arriver

Nico n'est pas loin de la solution lui aussi (il a pris la même piste que moi) mais je ne sais pas pourquoi, pour l'instant ca ne veux pas functionner :op

cs_bultez · Answer

>>En fait mon menu descend en cascade et je veux "conserver" le chemin du haut vers le bas,
    pas sûr, là non plus, de comprendre    
    mais si ce qu'on t'a mis te permet de faire : nickel.
    ça me semble... disons curieux...
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

leejunfan · Answer

En fait le menu comprend une cascade de deux sous menu ;
Lors du survol du premier lien, j'ouvre un premier sous menu, je survole un lien dans ce sous menu et il ouvre un sous-sous menu.
Et bien je veux conserver le bg "survol" du premier lien jusqu'au troisième en descendant.
Je pense que je vais adapter ton code comme je vais pouvoir, cela va me faire un script d'un kilomètre et il y a surement beaucoup plus simple.
Mais au moins j'ai un début de solution et je ne passerais plus pour un abruti avec la caboche qui fume derrière son écran :o))

leejunfan · Answer

Lundi je met les sources et la solution que j'aurais bidouillé ;o)

cs_bultez · Answer

ok.   car peut-être ne faut-il pas "faire quelquec chose sur le lien b" quand on est sur le lien a
    mais, et là ça baigne en css ,  "remettre le lien b comme il était" en quittant le lien b ?
    on verra...
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

leejunfan · Answer

Je suis en train d'adapter le code, cela soulève un nouveau problème.

J'ai une feuille de style avec ses propriétés (a:hover)

Avec la fonction de Bultez j'ai onmouseout qui réatribue un bg a lien A, le soucis c'est qu'ainsi le css ne fonctionne plus, Lien A garde cette propriété

Y a t'il une manière de revenir au css ?

cs_bultez · Answer

si tu veux changer background-color, oui. sinon, non. sinon met onmouseover sur le lien a [# lien a] [# lien b]

Cordialement Bul [mon Site] [M'écrire]

cs_bultez · Answer

on peut bien entendu jouer avec className si plusieurs choses à modifier.
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

leejunfan · Answer

En fait dans l'idéal je voudrais effectivement appeler une classe plutôt que de gérer le background dans le javascript.
Je m'absente, merci mille fois pour votre aide.

nicomilville · Answer

Bon, je viens de revenir, c'est dommage, je n'étais pas loin de la solution, ce n'était qu'une question de syntaxe, j'ai essaye : background-color, bgcolor mais pas backgroundColor !!!

Si tout bon ba c'est bien si tout fonctionne !!!

a++

Si t'a besoin d'aide, MP !!!

cs_bultez · Answer

salut Nico...
    on s'est tous fait avoir avec ça !    après on sait.
    au m'avait dit à mes debuts les machins dans style, de la forme "axx-byy"
        sont à remplacer en javascript par "axxByy", c'est à dire supprimer
        le moins et mettre en majuscule le caractère suivant.
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

nicomilville · Answer

Oui, c'est bon a savoir, c'est pour ça aussi que dans les fonction par exemple javascript, c'est bien de respecter un règle d'écriture et de nomage strict !!! 

Au moins la prochaine fois je saurai quoi faire !!! 

Je crois qu'a partir de maintenant je vais être plus actif sur javascriptfr car il paraitrait que je ne sois plus le bienvenue sur phpcs (il faut que je revienne dans quelque année quand j'aurai les bases et de l'expérience en php a ce qu'il parait ) !!!

Citation de maelob : Je me coucherai moins bête ce soir !!! 

PS : j'ai respecter le copyright, lol !!! 

Si t'a besoin d'aide, MP !!!

leejunfan · Answer

Bon j'avance, j'ai une solution en passant par les class css, je vous la poste : html : [# lien a] [# lien b] css : a:hover {background-color:red;} .class1 {background-color:red;} .class2 {background-color:none;}

leejunfan · Answer

Il me reste a extraire le javascript de la page et pour l'instant je sèche (objet attendu sur l'id lien1)


Ha les autodidactes :o)

cs_bultez · Answer

nico :
>>car il paraitrait que je ne sois plus le bienvenue sur phpcs
    meuh.... et qui t'as dit cela nico ? 
    à mon humble avis, toutes les bonnes volontés sont
        les bienvenues, même si je puis te glisser de tester
        avant de poster une réponse ( c'est ce que je fais
        généralement ! )

leejunfan:
qu'est-ce que tu fais là ?    ou que veux-tu faire ?
    les mêmes fonctions sont appelées sur les 2 liens,
        mais on ne s'y adressent qu'à lien1 ????

<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

nicomilville · Answer

>>    meuh.... et qui t'as dit cela nico ? à mon humble avis, toutes les bonnes volontés sont les bienvenues, même si je puis te glisser de tester avant de poster une réponse ( c'est ce que je fais généralement ! )
      Personne laisse tomber, on m'a dit de rester a l'écart et de revenir dans quelque années, j'ai répondu que j'étais peut être jeune mais que ça ne faisait pas de moi un ignorant et on m'a répondu que ce n'était pas la jeunesse le problème mais l'expérience, et qu'il faut avoir des années d'expérience que visiblement je n'ai pas !!! Avant hier par exemple je postait une réponse et a chaque fois la même personne disait qu'il ne fallai pas faire attention a moi ... la même personne m'a dit que si je ne savais pas quoi répondre il valait mieux que je ne réponde pas, ce que j'ai fais, je lui ai dit que je lui laissais le post et tout ce qu'il a trouvé de mieux a faire c'est de me dire que de toute façon j'aurai eu du mal a epliquer même les bases de php, je lui est dis pas forcement et que je connaissait certaines choses quand même et il m'a dit c'est n'ai pas parce qu'on connait tout les mot du dictionnaire que l'on parle bien le français ...
      Je vais suivre ton conseil pour ce qui est de tester avant de poster !!!

a++

Si t'a besoin d'aide, MP !!!

leejunfan · Answer

En tous cas nico, une gentillesse comme la tienne est appréciable sur un forum ;o)

Bultez, oui c'est un oubli cette fonction appelé aussi sur lien 1, elle date de la solution précédente car elle solutionnait le problème de background attribué qui prenait le pas sur le css

nicomilville · Answer

Merci leejunfan, mais la gentillesse n'es pas le problème, sur le forum php ce n'es pas la gentillesse qui compte mais l'expérience (et il parait que je suis pire qu'un débutant au niveau de l'expérience...)

Sinon, si tu veus, je peus t'aider a séparer ton code js de ta page html comme je l'ai fais sur ma source...

Si t'a besoin d'aide, MP !!!

leejunfan · Answer

Ce serait volontiers nico, je ne comprends pas pourquoi lorsque je sépare le script il est en erreur "objet attendu" sur lien 1, pourtant j'apelle la fonction après avoir déclaré l'id

nicomilville · Answer

C'est peut être parce que le DOM n'est pas encore chargé, tu as firefox ? si oui, regarde la console d'erreur et met nous ce qu'elle contient !!

Si t'a besoin d'aide, MP !!!

leejunfan · Answer

Mais si le DOM n'est pas chargé pourquoi le code marche lorsqu'il est dans la page ?
Je dois filer, je mets le message d'erreur firefox a mon retour ;o)

nicomilville · Answer

ok

a++

Si t'a besoin d'aide, MP !!!

cs_bultez · Answer

>>
                        
                        C'est peut être parce que le DOM n'est pas encore chargé
    ça ne veut rien dire ça nico....
    le dom se crée au fur et à mesure.....( ça ne veut rien dire non plus, mais bon... )

    document.getElementById("toto").... ici en erreur
    
    document.getElementById("toto").... ici c'est bon.

    

<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

cs_bultez · Answer

et donc : [# lien a] [# lien b] ça baigne.... [# lien a] [# lien b] ça baigne plus.... au fait : ¡————————¡——————————————————————————————————————————————————————————¡ |FireFox |regarder la "console d'erreurs" | | | Outils / Console d'erreurs | | | | | | et mieux, télécharger FireBug | ¦————————¦——————————————————————————————————————————————————————————¦ |Internet|activer le deboggage : Outils/options Internet/Avancés | |Explorer| dans la liste, sous "Navigation" : décocher | | | ° Afficher une notification de chaque erreur de script | | | ° Désactiver le débogage de Scripts (Internet Explorer) | | | | | | et mieux, télécharger le Debogger IE | ¦————————¦——————————————————————————————————————————————————————————¦ |K—Meleon|regarder la "console d'erreurs" | | | Outils / Console d'erreurs | ¦————————¦——————————————————————————————————————————————————————————¦ |Opera |regarder la "console d'erreurs" | | | utils / Asole d'erreurs | ¦————————¦——————————————————————————————————————————————————————————¦ |Safari |regarder Debug / Show JavaScript Console | | | | | |modif Fichier "Support:\Documents and Settings\utilisateur| | |\Application Data\Apple Computer\Safari\Preferences.plist"| | | y ajouter IncludeDebugMenu | | | | !————————!——————————————————————————————————————————————————————————! et pour nico, ne sachant pas de qui tu parles... ( tu peux me dire en privé, je te répondrais de même ! ) j'en connais, au moins 1, qui semble, peut-être, un codeur "pas trop mauvais", mais totalement détestable, stupide... pour n'en pas dire plus...

Cordialement Bul [mon Site] [M'écrire]

nicomilville · Answer

Je me souviens que j'avais eu un pb comme ça et juki_wrbmaster m'avait dit que le DOM n'était  pas encore chargé et qu'il fallait que je fasse une fonction pour appellé l'autre fonction une fois que le dom était chargé en l'occurence le document !!

Si t'a besoin d'aide, MP !!!

nicomilville · Answer

o c'est mal passé, juki_webmaster, excusez moi, lol

Si t'a besoin d'aide, MP !!!

cs_bultez · Answer

>>...le DOM n'était  pas encore chargé....
    le DOM ne se charge pas....
    il "se construit" au fur et à mesure de l'interprétation des 
        lignes  de la page par le navigateur.
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

nicomilville · Answer

je pense que c'est ce que voulais dire juki_webmaster !!

++

Si t'a besoin d'aide, MP !!!

leejunfan · Answer

Encore une fois Bultez a trouvé la solution. Cela clochait car je déclarais ma variable l=document.getElementById("lien1"); en préambule des fonctions, alors que l'id n'était pas encore déclaré. Donc je fait un getElementById a l'intérieur de la fonction que j'apelle après l'id et ca marche. Voila ce que ca donne : lien.html : Document sans nom [# lien a] [# lien b] liens.css : a:hover {background-color:red;} .class1 {background-color:red;} .class2 {background-color:none;} liens.js : function sur() { document.getElementById("lien1").className="class1"; } function par() { document.getElementById("lien1").className="class2"; } Conclusion : grâce a vous je suis parré pour le boulot demain, un grand merci ;o)

nicomilville · Answer

Tout le mérite revient a bultez, je lui donne ma part, lol  !!!

Si t'a besoin d'aide, MP !!!

Ma première fonction

41 réponses

Votre réponse

Discussions similaires