Ma première fonction [Résolu]

Signaler
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008
-
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
-
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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="liens.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="liens.js"></script>
</head>



[# lien a]

[# lien b]

</html>

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)

41 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>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]

<script>
    var l=document.getElementById("lien1");
    function sur()
    {    l.style.backgroundColor="red";    }
    function par()
    {    l.style.backgroundColor="green";    }
</script>

    pas certain que le css puisse faire cela.....

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
et donc :

<style>
a:hover {background-color:red;}
.class1  {background-color:red;}
.class2  {background-color:none;}
</style>
[# lien a]

[# lien b]

<script>
    var l=document.getElementById("lien1");
    function sur()
    {    l.className="class1";    }
 function par()
    {    l.className="class2";    }
</script>

ça baigne....

<head>
<script>
    var l=document.getElementById("lien1");
    function sur()
    {    l.className="class1";    }
 function par()
    {    l.className="class2";    }
</script>
<style>
a:hover {background-color:red;}
.class1  {background-color:red;}
.class2  {background-color:none;}
</style>
</head>

[# 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 <key>IncludeDebugMenu</key> |
| | <true/> |
!————————!——————————————————————————————————————————————————————————!

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...

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

J'ai corrigé deux erreurs mais ca ne fonctionne toujours pas :

.noir a {background-color:black;}

document.getElementById('liena').className='noir';
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
33
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 !!!
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Bonjour,
essaies avec ce style

<style type="text/css">

a:hover {
  background-color:red;
}
a.noir:hover { /* note l'ecriture */
  background-color :
black;
  color : white
}
</style>
;O)
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

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)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
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]
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

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
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

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
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
33
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 !!!
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
33
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 !!!
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
je ne suis pas certain non plus que c'est ce que tu veux réellement !
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

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
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>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]
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

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))
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

Lundi je met les sources et la solution que j'aurais bidouillé ;o)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
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]
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

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 ?
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
si tu veux changer background-color, oui. sinon, non.
    sinon met onmouseover sur le lien a

<style>
a:hover { color:yellow;    }
</style>
[# lien a]
[# lien b]
<script>
    var l=document.getElementById("lien1");
    function sur()
    {    l.style.backgroundColor="red";    }
    function par()
    {    l.style.backgroundColor="green";    }
</script>

<hr size="2" width="100%" />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
on peut bien entendu jouer avec className si plusieurs choses à modifier.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]